使用自动布局概述

项目
08/12/2011

本主题面向开发人员介绍有关如何编写带有可本地化user interfaces (UIs) 的 Windows Presentation Foundation (WPF) 应用程序的准则。过去，对 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。	在 UI的根元素中添加 xml:lang 特性，如为英文应用程序添加 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"/>

注意有关完整的代码示例，请参见如何：在网格之间共享大小调整属性。