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

Статья
08/11/2011

В этом разделе представлены рекомендации разработчикам о написании приложений Windows Presentation Foundation (WPF) с локализуемыми user interfaces (UIs). В прошлом процесс локализации UI занимал значительное время. Каждый язык, для которого адаптировался UI, требовал поточечного выравнивания. Сегодня при соблюдении стандартов разработки и кодирования UIs может быть создан таким образом, чтобы локализаторам требовалось выполнять меньше изменений размеров и расположений. Подход к написанию приложений с более легким изменением размеров и расположения называется автоматической разметкой и может быть достигнут с использованием структуры приложения WPF.

В этом разделе содержатся следующие подразделы.

Преимущества использования автоматической разметки
Автоматическая разметка и элементы управления
Автоматическая разметка и стандарты кодирования
Автоматическая разметка и сетки
Автоматическая разметка и сетки, использующие свойство IsSharedSizeScope
Связанные разделы

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

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

UI отображается правильно на всех языках.
Снижается необходимость перенастраивать расположение и размер элементов управления после перевода текста.
Снижается необходимость перенастраивать размер окна.
Разметка UI отображается правильно на любом языке.
Локализация может быть сведена не многим более чем к переводу строки.

Автоматическая разметка и элементы управления

Автоматическая разметка позволяет приложению устанавливать размер элемента управления автоматически. Например, элемент управления может измениться, чтобы вместить строку целиком. Эта возможность позволяет локализаторам перевести строку; больше не требуется изменять размер элемента управления, чтобы полностью отобразить переведенный текст. В следующем примере создается кнопка с текстом на английском языке.

<Window
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://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="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://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. Обсуждение различных типов панелей см. в разделе Общие сведения о панелях.
Не устанавливайте фиксированный размер окна.	Используйте событие SizeToContent. Пример. `<StackPanel xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" x:Class="GridLoc.Pane1" >`
Добавьте свойство FlowDirection.	Добавьте свойство FlowDirection к корневому элементу приложения. WPF предоставляет удобный способ поддержки горизонтальной, двунаправленной и вертикальной разметки. Для определения направления в инфраструктуре представления можно использовать свойство FlowDirection. Ниже перечислены шаблоны направления текста. LeftToRight (LrTb) — горизонтальная разметка для латинского языка, восточноазиатских языков и т. д. RightToLeft (RlTb) — двунаправленная разметка для арабского, иврита и др. языков.
Используйте составные шрифты вместо физических шрифтов.	С составными шрифтами свойство FontFamily не требует локализации. Разработчики могут использовать один из следующих шрифтов или создать свой собственный. Global User Interface Global San Serif 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 полезен в локализуемых приложениях для создания элементов управления, настраиваемых по размеру содержимого. Однако иногда требуется, чтобы элемент управления сохранял определенный размер, независимо от содержимого. Например, если имеются кнопки "ОК", "Отмена" и "Обзор", то, возможно, не требуется выравнивать размер этих кнопок по размеру содержимого. В этом случае, вложенное свойство элемента 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"/>

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