使用自動配置概觀

  • 發行項

本主題介紹開發人員如何使用可當地語系化的使用者介面 （UI） 撰寫 Windows Presentation Foundation （WPF） 應用程式的指導方針。 過去，UI 的當地語系化是一個耗時的程式。 UI 針對圖元調整所需的圖元調整而調整的每個語言。 現在，使用正確的設計和正確的編碼標準，可以建構 UI，讓當地語系化人員調整和重新調整位置。 撰寫更容易調整大小和重新置放的應用程式的方法稱為自動版面配置，而且可以使用 WPF 應用程式設計來達成。

使用自動版面配置的優點

因為 WPF 簡報系統功能強大且有彈性，因此能夠在應用程式中配置可調整以符合不同語言需求的專案。 下列清單提出一些自動版面配置的優點。

  • UI 會以任何語言顯示良好。

  • 減少在翻譯文字之後重新調整控制項位置和大小的需求。

  • 減少重新調整視窗大小的需求。

  • UI 配置會以任何語言正確呈現。

  • 可將當地語系化降低為只比字串翻譯多一點點的程度。

自動版面配置和控制項

自動版面配置可讓應用程式自動調整控制項的大小。 例如，控制項可變更以容納字串的長度。 此功能可讓當地語系化工具翻譯該字串；它們不再需要調整控制項的大小來符合翻譯的文字。 下列範例會建立一個含有英文內容的按鈕。

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

下圖顯示程式碼範例的輸出：

The same button with text in different languages

自動版面配置和編碼標準

使用自動版面配置方法需要一組程式碼撰寫和設計標準和規則，才能產生完全可當地語系化的 UI。 下列指導方針將有助於自動版面配置編碼。

請勿使用絕對位置

如需各種面板類型的討論，請參閱 面板概觀 。

不要設定視窗的固定大小

  • 使用 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 ，屬性可用來定義版面配置。 書寫方向模式如下：

使用複合字型，而不是實體字型

  • 使用複合字型時， FontFamily 屬性不需要當地語系化。

  • 開發人員可以使用下列其中一個字型，或自行建立。

    • Global User Interface
    • 全域新細明體
    • 全域有襯線字型

新增 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 example 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"/>

注意

如需完整的程式碼範例，請參閱 在方格 之間共用調整大小屬性。

另請參閱