自動レイアウトの使用の概要

[アーティクル]
08/10/2023

このトピックでは、ローカライズ可能なユーザーインターフェイス (UI) を使用して Windows Presentation Foundation (WPF) アプリケーションを記述する方法について、開発者向けのガイドラインを紹介します。以前は、UI のローカライズは時間のかかるプロセスでした。 UI の適応対象の言語ごとに、ピクセル単位での調整が必要でした。現在では、適切な設計と適切なコーディング標準を使用することで、ローカライザーが行うサイズ変更や位置変更が少なくて済むように、UI を構築できます。サイズ変更や位置変更が簡単になるアプリケーションの作成方法は自動レイアウトと呼ばれ、WPF のアプリケーション設計を使用して実現できます。

自動レイアウトを使用する利点

WPF のプレゼンテーションシステムは強力かつ柔軟であるため、さまざまな言語の要件に合わせてアプリケーションの要素のレイアウトを調整できます。次の一覧では、自動レイアウトの利点の一部を示します。

どのような言語でも UI が適切に表示されます。
テキストを翻訳した後で、コントロールの位置とサイズを再調整する必要が減ります。
ウィンドウサイズを再調整する必要が少なくなります。
どのような言語でも UI のレイアウトが正しくレンダリングされます。
ローカライズの作業を、ほとんど文字列の翻訳にまで減らすことができます。

自動レイアウトとコントロール

自動レイアウトを使用すると、アプリケーションでコントロールのサイズを自動的に調整できます。たとえば、文字列の長さに合わせてコントロールを変更できます。この機能を使用して、ローカライザーは文字列を翻訳できます。翻訳されたテキストに合わせてコントロールのサイズを変更する必要はなくなります。次の例では、内容が英語のボタンを作成します。

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://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="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://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>

次の図は、コードサンプルの出力を示しています。

自動レイアウトとコーディング標準

自動レイアウトアプローチを使用するには、完全にローカライズ可能な UI を生成するために、一連のコーディングと設計の標準および規則が必要です。次のガイドラインは、自動レイアウトのコーディングに役立ちます。

絶対位置を使用しない

要素が絶対的に配置されるため、Canvas は使用しないようにします。
コントロールを配置するには、DockPanel、StackPanel、Grid を使用します。

さまざまな種類のパネルの詳細については、「パネルの概要」を参照してください。

ウィンドウに固定サイズを設定しない

Window.SizeToContent を使用してください。次に例を示します。


<StackPanel
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="GridLoc.Pane1"
>

FlowDirection を追加する

アプリケーションのルート要素に FlowDirection を追加します。

WPF では便利な方法で横書きレイアウト、双方向レイアウト、縦書きレイアウトを作成できます。プレゼンテーションフレームワークでは、FlowDirection プロパティを使用してレイアウトを定義できます。フローの方向パターンは次のとおりです。
- FlowDirection.LeftToRight (LrTb) — ラテン語や東アジア言語などのための横書きレイアウト。
- FlowDirection.RightToLeft (RlTb) — アラビア語やヘブライ語などのための双方向レイアウト。

物理フォントの代わりに複合フォントを使用する

複合フォントを使用すると、FontFamily プロパティをローカライズする必要がありません。
開発者は、次のいずれかのフォントを使用することも、独自に作成することもできます。
- Global User Interface
- Global San Serif
- Global Serif

xml:lang を追加する

UI のルート要素に xml:lang 属性を追加します (英語アプリケーションの xml:lang="en-US" など)。
複合フォントでは xml:lang により使用するフォントが決定されるため、このプロパティを設定すると、多言語のシナリオがサポートされます。

自動レイアウトとグリッド

Grid 要素は、開発者が要素を配置できるようになるため、自動レイアウトに便利です。 Grid コントロールでは、列と行の配置を使用して、使用可能なスペースを子要素間に分散できます。 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>

次の図では、前のコードによって生成されるグリッドを示します。

Grid example グリッド

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"/>

注意

完全なコードサンプルについては、「グリッド間でサイズ設定プロパティを共有する」を参照してください。

自動レイアウトの使用の概要

自動レイアウトを使用する利点

自動レイアウトとコントロール

自動レイアウトとコーディング標準

自動レイアウトとグリッド

IsSharedSizeScope プロパティを使用した自動レイアウトとグリッド

関連項目

フィードバック

その他のリソース