使用自動配置概觀

發行項
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) - 適用於阿拉伯文、希伯來文等的雙向版面配置。
使用複合字型而非實體字型 (Physical Font)。	使用複合字型，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>

下圖顯示上述程式碼產生的格線。

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

注意：如需完整程式碼範例，請參閱 HOW TO：在格線之間共用調整大小屬性

請參閱

工作

HOW TO：使用自動配置建立按鈕

HOW TO：針對自動配置使用格線

概念

WPF 的全球化

共用方式為