Przegląd Użyj automatycznego układu

W tym temacie przedstawiono wskazówki dla deweloperów dotyczące pisania aplikacji programu Windows Presentation Foundation (WPF) przy użyciu zlokalizowanych interfejsów użytkownika. W przeszłości lokalizacja interfejsu użytkownika była czasochłonnym procesem. Każdy język, który interfejs użytkownika został dostosowany do wymaganego piksela przez dostosowanie pikseli. Obecnie dzięki odpowiednim standardom projektowania i odpowiedniego kodowania interfejsy użytkownika mogą być konstruowane tak, aby lokalizatory miały mniej zmian rozmiaru i zmiany położenia. Podejście do pisania aplikacji, które można łatwiej zmienić rozmiar i położenie, jest nazywane układem automatycznym i można je osiągnąć przy użyciu projektu aplikacji WPF.

Zalety korzystania z układu automatycznego

Ponieważ system prezentacji WPF jest zaawansowany i elastyczny, zapewnia możliwość układu elementów w aplikacji, które można dostosować do wymagań różnych języków. Poniższa lista wskazuje niektóre zalety automatycznego układu.

• Interfejs użytkownika jest dobrze wyświetlany w dowolnym języku.

• Zmniejsza konieczność dostosowania położenia i rozmiaru kontrolek po przetłumaczeniu tekstu.

• Zmniejsza konieczność dostosowania rozmiaru okna.

• Układ interfejsu użytkownika jest poprawnie renderowany w dowolnym języku.

• Lokalizację można zmniejszyć do tego stopnia, że jest to niewiele więcej niż tłumaczenie ciągów.

Automatyczny układ i kontrolki

Układ automatyczny umożliwia aplikacji automatyczne dostosowanie rozmiaru kontrolki. Na przykład kontrolka może ulec zmianie, aby pomieścić długość ciągu. Ta funkcja umożliwia lokalizatorom tłumaczenie ciągu; nie muszą już zmieniać rozmiaru kontrolki, aby dopasować przetłumaczony tekst. Poniższy przykład tworzy przycisk z zawartością w języku angielskim.

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

W tym przykładzie wystarczy, aby przycisk hiszpański zmienił tekst. Przykład:

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

Poniższa ilustracja przedstawia dane wyjściowe przykładów kodu:

Standardy automatycznego układu i kodowania

Użycie podejścia automatycznego układu wymaga zestawu standardów kodowania i reguł projektowania w celu utworzenia w pełni lokalizowalnego interfejsu użytkownika. Poniższe wskazówki ułatwią automatyczne kodowanie układu.

Nie należy używać pozycji bezwzględnych

• Nie należy używać Canvas , ponieważ umieszcza elementy absolutnie.

• Użyj DockPanelkontrolek , StackPaneli Grid , aby umieścić kontrolki.

Aby zapoznać się z dyskusją na temat różnych typów paneli, zobacz Panele — omówienie.

Nie ustawiaj stałego rozmiaru okna

• Użyj witryny Window.SizeToContent. Przykład:

  
  <StackPanel
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      x:Class="GridLoc.Pane1"
  >
  

Dodaj FlowDirection

• Dodaj element FlowDirection do elementu głównego aplikacji.

  WPF zapewnia wygodny sposób obsługi układów poziomych, dwukierunkowych i pionowych. W strukturze FlowDirection prezentacji właściwość może służyć do definiowania układu. Wzorce kierunku przepływu to:

  • FlowDirection.LeftToRight (LrTb) — układ poziomy dla łacińskich, wschodnioazjatyckich itd.

  • FlowDirection.RightToLeft (RlTb) — dwukierunkowy dla języka arabskiego, hebrajskiego itd.

Używanie czcionek złożonych zamiast czcionek fizycznych

• W przypadku czcionek złożonych FontFamily właściwość nie musi być zlokalizowana.

• Deweloperzy mogą użyć jednej z następujących czcionek lub utworzyć własne.

  • Globalny interfejs użytkownika
  • Globalny san serif
  • Globalny serif

Dodaj plik xml:lang

• xml:lang Dodaj atrybut w elemercie głównym interfejsu użytkownika, na przykład xml:lang="en-US" dla aplikacji w języku angielskim.

• Ponieważ czcionki złożone służą xml:lang do określania czcionki do użycia, ustaw tę właściwość tak, aby obsługiwała scenariusze wielojęzyczne.

Automatyczne układy i siatki

Element Grid jest przydatny w przypadku automatycznego układu, ponieważ umożliwia deweloperowi pozycjonowanie elementów. Kontrolka Grid może rozdzielić dostępne miejsce między jego elementy podrzędne przy użyciu układu kolumny i wiersza. Elementy interfejsu użytkownika mogą obejmować wiele komórek i można mieć siatki w siatkach. Siatki są przydatne, ponieważ umożliwiają tworzenie i pozycjonowanie złożonego interfejsu użytkownika. W poniższym przykładzie pokazano użycie siatki do umieszczania niektórych przycisków i tekstu. Zwróć uwagę, że wysokość i szerokość komórek są ustawione na Auto; dlatego komórka zawierająca przycisk z obrazem dostosowuje się do dopasowania obrazu.

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

Poniższa ilustracja przedstawia siatkę utworzoną przez poprzedni kod.

Siatki

Automatyczne układy i siatki przy użyciu właściwości IsSharedSizeScope

Element Grid jest przydatny w aplikacjach lokalizowalnych do tworzenia kontrolek, które dopasowują się do zawartości. Jednak czasami kontrolki mają zachować określony rozmiar niezależnie od zawartości. Jeśli na przykład masz przyciski "OK", "Anuluj" i "Przeglądaj", prawdopodobnie nie chcesz, aby przyciski miały rozmiar pasującego do zawartości. W takim przypadku Grid.IsSharedSizeScope dołączona właściwość jest przydatna do udostępniania tego samego rozmiaru między wieloma elementami siatki. W poniższym przykładzie pokazano, jak udostępniać dane określania rozmiaru kolumn i wierszy między wieloma Grid elementami.

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

Uwaga

Aby zapoznać się z kompletnym przykładem kodu, zobacz Udostępnianie właściwości ustalania rozmiaru między siatkami.

Zobacz też

• Globalizacja dla WPF
• Używanie automatycznego układu do utworzenia przycisku
• Używanie siatki do automatycznego układu