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

Статья
08/10/2023

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

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

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

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

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

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

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

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

Автоматическая разметка и стандарты кодирования

Для использования автоматической разметки требуется набор стандартов и правил разработки и кодирования, которые позволят создать полностью локализуемый пользовательский интерфейс. Следующие рекомендации предназначены для помощи в кодировании автоматической разметки.

Не используйте абсолютное позиционирование

Не используйте элемент управления 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 можно использовать для определения макета. Ниже перечислены шаблоны направления текста.
- FlowDirection.LeftToRight (LrTb) — горизонтальная разметка для латиницы, восточноазиатских языков и т. д.
- FlowDirection.RightToLeft (RlTb) — двунаправленная разметка для арабского, иврита и т. д.

Используйте составные шрифты вместо физических шрифтов

С составными шрифтами свойство FontFamily не требует локализации.
Разработчики могут использовать один из следующих шрифтов или создать свой собственный.
- Глобальный пользовательский интерфейс
- Global San Serif
- Global Serif

Добавьте xml:lang

Добавьте атрибут xml:lang в корневом элементе вашего пользовательского интерфейса, как, например, xml:lang="en-US" для приложения на английском языке.
Поскольку составные шрифты используют xml:lang для определения того, какой шрифт использовать, установите это свойство для поддержки многоязычных сценариев.

Автоматическая разметка и сетки

Элемент Grid полезен для автоматической разметки, поскольку он позволяет разработчику позиционировать элементы. Элемент управления Grid способен распределять имеющееся пространство среди своих дочерних элементов при помощи упорядочения столбцов и строк. Элементы пользовательского интерфейса могут занимать несколько ячеек, и возможно размещение сетки внутри сетки. Сетки полезны, поскольку они позволяют создавать и позиционировать сложные пользовательские интерфейсы. В следующем примере демонстрируется использование сетки для размещения нескольких кнопок и текста. Обратите внимание на то, что для высоты и ширины ячейки установлено значение 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"/>

Примечание

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

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

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

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

Автоматическая разметка и стандарты кодирования

Автоматическая разметка и сетки

Автоматическая разметка и сетки, использующие свойство IsSharedSizeScope

См. также раздел

Обратная связь

Дополнительные ресурсы