自動レイアウトの使用の概要
更新 : 2007 年 11 月
ここでは、開発者がローカライズ可能なユーザー インターフェイス (UI) を持つ Windows Presentation Foundation (WPF) アプリケーションを作成する方法に関するガイドラインについて説明します。これまで、UI のローカライズには時間がかかっていました。UI が翻訳された言語をピクセル単位で調整する必要がありました。現在では、適切な設計およびコーディング標準を使用して UI を構築し、ローカライザが行う必要があるサイズ変更や位置変更を減らすことができます。サイズ変更や位置変更がより簡単になるアプリケーションの作成方法は、自動レイアウトと呼ばれます。これは、WPF アプリケーション設計を使用して実現できます。
このトピックは、次のセクションで構成されています。
自動レイアウトを使用する利点
自動レイアウトとコントロール
自動レイアウトとコーディング標準
自動レイアウトとグリッド
IsSharedSizeScope プロパティを使用した自動レイアウトとグリッド
関連トピック
自動レイアウトを使用する利点
WPF のプレゼンテーション システムは強力で柔軟なため、さまざまな言語の要件を満たすように調整できる、アプリケーション要素のレイアウト機能を提供します。自動レイアウトの利点の一部を次に示します。
UI がどの言語でも適切に表示されます。
テキストの翻訳後にコントロールの位置およびサイズを再調整する必要性が軽減されます。
ウィンドウ サイズを再調整する必要性が軽減されます。
UI レイアウトがどの言語でも適切にレンダリングされます。
ローカリゼーション作業を文字列の翻訳と同じ程度まで削減できます。
自動レイアウトとコントロール
自動レイアウトを使用すると、アプリケーションでコントロールのサイズを自動的に調整できます。たとえば、文字列が収まる長さにコントロールを変更できます。この機能により、ローカライザは文字列を翻訳した後、翻訳したテキストに合わせてコントロールのサイズを変更する必要がなくなりました。次の例では、英語のコンテンツを含むボタンが作成されます。
<Window
xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
x:Class="ButtonLoc.Pane1"
Name="myWindow"
SizeToContent="WidthAndHeight"
>
<DockPanel>
<Button FontSize="28" Height="50">My name is Hope.</Button>
</DockPanel>
</Window>
この例でスペイン語のボタンを作成するには、テキストを変更するだけで済みます。次に例を示します。
<Window
xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
x:Class="ButtonLoc.Pane1"
Name="myWindow"
SizeToContent="WidthAndHeight"
>
<DockPanel>
<Button FontSize="28" Height="50">Me llamo Esperanza.</Button>
</DockPanel>
</Window>
コード サンプルによる出力を次の図に示します。
自動サイズ変更可能なボタン
.png "テキストの言語が異なる同じボタン")
.gif "メモ") メモ : |
|---|
前の例を含むコード サンプル全体については、「ローカライズ可能なアプリケーションの自動レイアウトのサンプル」を参照してください。 |
自動レイアウトとコーディング標準
自動レイアウト方法を使用するには、完全にローカライズ可能な UI を生成するためのコーディングと設計の標準および規則のセットが必要です。次のガイドラインは、自動レイアウト コーディングに役立ちます。
コーディング標準 |
説明 |
|---|---|
絶対位置を使用しない。 |
|
ウィンドウに固定サイズを設定しない。 |
|
FlowDirection を追加する。 |
|
物理フォントではなく複合フォントを使用する。 |
|
xml:lang を追加する。 |
|
自動レイアウトとグリッド
Grid 要素を使用すると、開発者は要素を配置できるため、自動レイアウトに役立ちます。Grid コントロールは、行と列に配置されており、UI 要素を各セルに配置する子要素に使用可能なスペースを分配できます。UI 要素は複数のセルにまたがることができ、グリッド内にグリッドを配置することもできます。グリッドを使用すると、複雑な UI を作成および配置できるため便利です。グリッドを使用してボタンとテキストを配置する方法を次の例に示します。セルの高さと幅は Auto に設定されているため、イメージを持つボタンを含むセルがイメージに合わせて調整されます。
<Grid Name="grid" ShowGridLines ="false">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Margin="10, 10, 5, 5" Grid.Column="0" Grid.Row="0" FontSize="24">Grid
</TextBlock>
<TextBlock Margin="10, 10, 5, 5" Grid.Column="0" Grid.Row="1" FontSize="12"
Grid.ColumnSpan="2">The following buttons and text are positioned using a Grid.
</TextBlock>
<Button Margin="10, 10, 5, 5" Grid.Column="0" Grid.Row="2" Background="Pink"
BorderBrush="Black" BorderThickness="10">Button 1
</Button>
<TextBlock Margin="10, 10, 5, 5" Grid.Column="1" Grid.Row="2" FontSize="12"
VerticalAlignment="Center" TextWrapping="WrapWithOverflow">Sets the background
color.
</TextBlock>
<Button Margin="10, 10, 5, 5" Grid.Column="0" Grid.Row="3" Foreground="Red">
Button 2
</Button>
<TextBlock Margin="10, 10, 5, 5" Grid.Column="1" Grid.Row="3" FontSize="12"
VerticalAlignment="Center" TextWrapping="WrapWithOverflow">Sets the foreground
color.
</TextBlock>
<Button Margin="10, 10, 5, 5" Grid.Column="0" Grid.Row="4">
<Image Source="data\flower.jpg"></Image>
</Button>
<TextBlock Margin="10, 10, 5, 5" Grid.Column="1" Grid.Row="4" FontSize="12"
VerticalAlignment="Center" TextWrapping="WrapWithOverflow">Adds an image as
the button's content.
</TextBlock>
</Grid>
前のコードによって生成されるグリッドを次の図に示します。
グリッド
.png "グリッドの例")
| メモ : |
|---|
コード サンプル全体については、「ローカライズ可能なアプリケーションのグリッドのサンプル」を参照してください。 |
IsSharedSizeScope プロパティを使用した自動レイアウトとグリッド
Grid は、ローカライズ可能なアプリケーションでコンテンツに合わせて調整されるコントロールを作成する場合に便利です。ただし、コンテンツに関係なくコントロールが特定のサイズを維持する必要がある場合もあります。たとえば、多くの場合、[OK]、[キャンセル]、および [参照] ボタンをコンテンツに合わせてサイズ変更することはありません。この場合、Grid 要素の IsSharedSizeScope 添付プロパティを使用して、複数のグリッド要素間で同じサイズ設定を共有すると便利です。複数の Grid 要素間で列と行のサイズ設定データを共有する方法を次の例に示します。
<StackPanel Orientation="Horizontal" DockPanel.Dock="Top">
<Button Click="setTrue" Margin="0,0,10,10">Set IsSharedSizeScope="True"</Button>
<Button Click="setFalse" Margin="0,0,10,10">Set IsSharedSizeScope="False"</Button>
</StackPanel>
<StackPanel Orientation="Horizontal" DockPanel.Dock="Top">
<Grid ShowGridLines="True" Margin="0,0,10,0">
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="FirstColumn"/>
<ColumnDefinition SharedSizeGroup="SecondColumn"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" SharedSizeGroup="FirstRow"/>
</Grid.RowDefinitions>
<Rectangle Fill="Silver" Grid.Column="0" Grid.Row="0" Width="200" Height="100"/>
<Rectangle Fill="Blue" Grid.Column="1" Grid.Row="0" Width="150" Height="100"/>
<TextBlock Grid.Column="0" Grid.Row="0" FontWeight="Bold">First Column</TextBlock>
<TextBlock Grid.Column="1" Grid.Row="0" FontWeight="Bold">Second Column</TextBlock>
</Grid>
<Grid ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="FirstColumn"/>
<ColumnDefinition SharedSizeGroup="SecondColumn"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" SharedSizeGroup="FirstRow"/>
</Grid.RowDefinitions>
<Rectangle Fill="Silver" Grid.Column="0" Grid.Row="0"/>
<Rectangle Fill="Blue" Grid.Column="1" Grid.Row="0"/>
<TextBlock Grid.Column="0" Grid.Row="0" FontWeight="Bold">First Column</TextBlock>
<TextBlock Grid.Column="1" Grid.Row="0" FontWeight="Bold">Second Column</TextBlock>
</Grid>
</StackPanel>
<TextBlock Margin="10" DockPanel.Dock="Top" Name="txt1"/>
メモ 完全なコード例については、「方法 : グリッド間でサイズ設定プロパティを共有する」を参照してください。