次の方法で共有

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

このトピックでは、ローカライズ可能なユーザー インターフェイス (UI) を使用して Windows Presentation Foundation (WPF) アプリケーションを記述する方法に関する開発者向けのガイドラインについて説明します。 以前は、UI のローカライズには時間のかかるプロセスでした。 各言語のUIが対応されるたびに、ピクセル単位での調整が必要でした。 現在、適切な設計と適切なコーディング標準により、URI を構築して、ローカライザーのサイズ変更と位置変更を減らすことができます。 より簡単にサイズ変更および再配置できるアプリケーションを記述するアプローチは、自動レイアウトと呼ばれ、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 プロパティを使用してレイアウトを定義できます。 フロー方向のパターンは次のとおりです。

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

  • 複合フォントでは、 FontFamily プロパティをローカライズする必要はありません。

  • 開発者は、次のいずれかのフォントを使用するか、独自のフォントを作成できます。

    • グローバル ユーザー インターフェイス
    • グローバル サン セリフ
    • Global Serif

xml:lang の追加

  • 英語アプリケーションのxml:langなど、UI のルート要素に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>

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

グリッド例 グリッド

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

注

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

こちらも参照ください