共用方式為


使用自動配置概觀

更新:2007 年 11 月

本主題向開發人員介紹以可當地語系化的使用者介面 (UI) 撰寫 Windows Presentation Foundation (WPF) 應用程式的方針。在過去,將 UI 當地語系化是一項非常費時的程序。每當 UI 需要顯示新的語言就必須逐一調整像素。現在有了正確的設計和編碼標準,UI 的建構就可以更簡單,進而減少當地語系化人員調整大小和位置的工作。這種使應用程式的大小和位置更容易調整的撰寫方法稱為「自動配置」,它可以使用 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。下列方針會協助自動配置編碼。

編碼標準

說明

請勿使用絕對位置。

  • 請勿使用畫布,因為它會以絕對方式來放置項目。

  • 使用 DockPanelStackPanelGrid 來放置控制項。

  • 如需各類面板的討論,請參閱面板概觀

請勿對視窗設定固定大小。

  • 使用 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。

  • XmlLang 屬性加入至 UI 的根項目,例如如果是英文應用程式則為 xml:lang="en-US"。

  • 因為複合字型是使用 xml:lang 決定要使用的字型,所以請設定這個屬性以支援多語系案例。

自動配置和格線

Grid 項目對於自動配置相當有用,因為它可以讓開發人員放置項目。Grid 控制項可以在其子項目之間分配可用空間,以欄和列排列,並且將 UI 項目放置在每個儲存格中。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 項目的 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:針對自動配置使用格線

概念

全球化 Windows Presentation Foundation