HOW TO：針對自動配置使用格線
本範例說明如何使用自動配置模式下的格線來建立可當地語系化的應用程式。
user interface (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>
下圖顯示程式碼範例的輸出。
Grid
.png "格線範例")