Практическое руководство. Использование сетки для автоматической разметки

Обновлен: Ноябрь 2007

В этот примере описаны способы использования сетки для автоматической разметки для создания локализуемого приложения.

Локализация пользовательский интерфейс может занять много времени. Часто при локализации необходимо изменять размеры и положение элементов в дополнение к переводу текста. В прошлом каждый язык, на который переводился Пользовательский интерфейс, требовал коррекции. Теперь с возможностями среды Windows Presentation Foundation (WPF) можно разработать элементы, уменьшающие потребность в коррекции. Подход к написанию приложений, в которых проще изменять размер и положение, называется auto layout.

В следующем примере Язык XAML (Extensible Application Markup Language) демонстрируется использование сетки для размещения нескольких кнопок и текста. Обратите внимание на то, что для высоты и ширины ячейки установлено значение 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>

На приведенном ниже рисунке показан вывод примера кода.

Сетка

Примечание.
Полный образец кода, из которого взяты предыдущие примеры, см. в разделе Пример сетки для локализуемого приложения.

См. также

Задачи

Практическое руководство. Использование автоматической разметки для создания кнопки

Основные понятия

Обзор использования автоматической разметки