Поделиться через

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

  • Статья

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

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

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

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

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

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

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

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

  • См. также

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

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

  • Пользовательский интерфейс отображается правильно на всех языках.

  • Снижается необходимость перенастраивать расположение и размер элементов управления после перевода текста.

  • Снижается необходимость перенастраивать размер окна.

  • Разметка Пользовательский интерфейс отображается правильно на любом языке.

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

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

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

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

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

Кнопка с автоматически изменяемым размером
Та же кнопка с текстовой подписью на различных языках

ms748828.alert_note(ru-ru,VS.90).gifПримечание.

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

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

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

Стандарты кодирования

Описание

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

  • Не используйте элемент управления «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».

  • Добавьте свойство XmlLang в корневом элементе Пользовательский интерфейс, например 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>

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

Сетка
Пример сетки

ms748828.alert_note(ru-ru,VS.90).gifПримечание.

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

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

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

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

См. также

Задачи

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

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

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

Глобализация и Windows Presentation Foundation