Přehled automatického rozložení

Článek
10/18/2023

Toto téma představuje pokyny pro vývojáře, jak psát aplikace WINDOWS Presentation Foundation (WPF) s lokalizovatelnými uživatelskými rozhraními (UI). V minulosti byla lokalizace uživatelského rozhraní časově náročným procesem. Každý jazyk, pro který bylo uživatelské rozhraní upraveno pro požadované pixely úpravou pixelů. V současnosti se správnými standardy návrhu a správného kódování je možné vytvořit uživatelská rozhraní, aby lokalizátory měly menší velikost a změnu umístění. Přístup k psaní aplikací, které se dají snadněji změnit a přemístit, se nazývá automatické rozložení a lze ho dosáhnout pomocí návrhu aplikace WPF.

Výhody použití automatického rozložení

Vzhledem k tomu, že prezentační systém WPF je výkonný a flexibilní, poskytuje možnost rozložení prvků v aplikaci, které lze upravit tak, aby vyhovovaly požadavkům různých jazyků. Následující seznam uvádí některé výhody automatického rozložení.

Uživatelské rozhraní se dobře zobrazuje v libovolném jazyce.
Zmenšuje potřebu čtení pozice a velikosti ovládacích prvků po přeložení textu.
Zmenšuje potřebu čtení velikosti okna.
Rozložení uživatelského rozhraní se správně vykresluje v libovolném jazyce.
Lokalizaci je možné snížit na bod, který je o něco větší než překlad řetězců.

Automatické rozložení a ovládací prvky

Automatické rozložení umožňuje aplikaci automaticky upravit velikost ovládacího prvku. Ovládací prvek se například může změnit tak, aby vyhovoval délce řetězce. Tato funkce umožňuje lokalizátorům přeložit řetězec; už nemusí měnit velikost ovládacího prvku tak, aby odpovídal přeložený text. Následující příklad vytvoří tlačítko s anglickým obsahem.

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

V příkladu stačí, abyste udělali španělské tlačítko, změní text. Příklad:

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

Následující obrázek znázorňuje výstup ukázek kódu:

Automatické rozložení a kódování standardů

Použití přístupu automatického rozložení vyžaduje sadu standardů a pravidel pro kódování a návrh k vytvoření plně lokalizovatelného uživatelského rozhraní. Následující pokyny vám pomůžou s automatickým kódováním rozložení.

Nepoužívejte absolutní pozice.

Nepoužívejte Canvas , protože umísít prvky naprosto.
Slouží DockPanelk umístění ovládacích prvků a StackPanel Grid k umístění ovládacích prvků.

Diskuzi o různých typech panelů najdete v tématu Přehled panelů.

Nenastavujte pevnou velikost okna.

Použijte Window.SizeToContent. Příklad:


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

Přidat FlowDirection

FlowDirection Přidejte do kořenového prvku aplikace.

WPF poskytuje pohodlný způsob, jak podporovat vodorovná, obousměrná a svislá rozložení. V prezentačním rozhraní FlowDirection lze vlastnost použít k definování rozložení. Vzory směru toku jsou:
- FlowDirection.LeftToRight (LrTb) – vodorovné rozložení pro latinku, východoasijské jazyky atd.
- FlowDirection.RightToLeft (RlTb) – obousměrný pro arabštinu, hebrejštinu atd.

Použití složených písem místo fyzických písem

U složených písem FontFamily nemusí být vlastnost lokalizována.
Vývojáři můžou použít jedno z následujících písem nebo si vytvořit vlastní.
- Globální uživatelské rozhraní
- Global San Serif
- Globální serif

Přidat xml:lang

xml:lang Přidejte atribut do kořenového prvku uživatelského rozhraní, například xml:lang="en-US" pro anglickou aplikaci.
Vzhledem k tomu, že složená písma slouží xml:lang k určení písma, které chcete použít, nastavte tuto vlastnost tak, aby podporovala vícejazyčné scénáře.

Automatické rozložení a mřížky

Tento Grid prvek je užitečný pro automatické rozložení, protože umožňuje vývojáři umístit prvky. Ovládací Grid prvek je schopen distribuovat dostupné místo mezi jeho podřízené prvky pomocí uspořádání sloupců a řádků. Prvky uživatelského rozhraní mohou obsahovat více buněk a v mřížkách je možné mít mřížky. Mřížky jsou užitečné, protože umožňují vytvořit a umístit složité uživatelské rozhraní. Následující příklad ukazuje použití mřížky k umístění některých tlačítek a textu. Všimněte si, že výška a šířka buněk jsou nastaveny na Auto; buňka, která obsahuje tlačítko s obrázkem, se upraví tak, aby odpovídala obrázku.

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

Následující obrázek znázorňuje mřížku vytvořenou předchozím kódem.

Grid example Mřížky

Automatické rozložení a mřížky pomocí vlastnosti IsSharedSizeScope

Prvek Grid je užitečný v lokalizovatelných aplikacích k vytvoření ovládacích prvků, které se přizpůsobí obsahu. Někdy ale chcete, aby ovládací prvky zachovaly určitou velikost bez ohledu na obsah. Pokud máte například tlačítka OK, Zrušit a Procházet, pravděpodobně nechcete, aby velikost tlačítek odpovídala obsahu. V tomto případě je připojená Grid.IsSharedSizeScope vlastnost užitečná pro sdílení stejné velikosti mezi více prvky mřížky. Následující příklad ukazuje, jak sdílet data velikosti sloupců a řádků mezi více Grid prvky.

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

Poznámka:

Kompletní ukázku kódu najdete v tématu Sdílení vlastností velikosti mezi mřížkami.

Přehled automatického rozložení

Výhody použití automatického rozložení

Automatické rozložení a ovládací prvky

Automatické rozložení a kódování standardů

Automatické rozložení a mřížky

Automatické rozložení a mřížky pomocí vlastnosti IsSharedSizeScope

Viz také

Váš názor

Další materiály