Share via

方法 : 自動レイアウト用のグリッドを使用する

  • [アーティクル]

更新 : 2007 年 11 月

この例では、自動レイアウトの方法でグリッドを使用してローカライズ可能なアプリケーションを作成する方法について説明します。

ユーザー インターフェイス (UI) のローカライズには時間がかかる場合があります。ローカライザは、多くの場合、テキストの翻訳だけでなく要素のサイズ変更や位置変更も行う必要があります。これまでは、UI が翻訳された言語を調整する必要がありました。現在では、Windows Presentation Foundation (WPF) の機能により、調整する必要性の少ない要素をデザインできます。サイズ変更や位置変更がより簡単になるアプリケーション作成方法は、auto layout と呼ばれます。

次の Extensible Application Markup Language (XAML) 例では、グリッドを使用してボタンとテキストを配置する方法を示しています。セルの高さと幅は Auto に設定されているため、イメージを持つボタンを含むセルがイメージに合わせて調整されることに注意してください。Grid 要素はコンテンツに合わせて調整できるため、ローカライズ可能なアプリケーションの設計に自動レイアウト方法を採用した場合に便利です。

使用例

グリッドを使用する方法を次の例に示します。

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

コード サンプルによる出力を次の図に示します。

グリッド
グリッドの例

ms752074.alert_note(ja-jp,VS.90).gifメモ :

前の例を含むコード サンプル全体については、「ローカライズ可能なアプリケーションのグリッドのサンプル」を参照してください。

参照

処理手順

方法 : 自動レイアウトを使用してボタンを作成する

概念

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