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ładxml: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ż
.NET Desktop feedback