Az automatikus elrendezés használata

Ez a témakör útmutatást nyújt a fejlesztőknek a Windows Presentation Foundation (WPF) alkalmazások honosítható felhasználói felületekkel (UI-k) való írásához. Korábban a felhasználói felület honosítása időigényes folyamat volt. Minden olyan nyelv, amelyhez a felhasználói felületet igazították, képpontonkénti beállítást igényelt. Ma a megfelelő kialakítással és a megfelelő kódolási szabványokkal a felhasználói felületeket úgy lehet létrehozni, hogy a honosítók kevesebb átméretezést és áthelyezést végezzenek el. Az egyszerűbben átméretezhető és áthelyezhető alkalmazások írásának megközelítését automatikus elrendezésnek nevezzük, és WPF-alkalmazástervezéssel érhető el.

Az automatikus elrendezés használatának előnyei

Mivel a WPF bemutató rendszere hatékony és rugalmas, lehetővé teszi az alkalmazások olyan elemeinek elrendezését, amelyek a különböző nyelvek követelményeinek megfelelően módosíthatók. Az alábbi lista az automatikus elrendezés néhány előnyére mutat rá.

A felhasználói felület minden nyelven jól jelenik meg.
Csökkenti a vezérlőelemek helyének és méretének újraszabályozását a szöveg lefordítása után.
Csökkenti az ablak méretének újraigazítása szükségességét.
A felhasználói felület elrendezése bármilyen nyelven megfelelően jelenik meg.
A honosítás a minimalizálásnak arra a szintjére hozható, ahol nem több, mint szövegfordítás.

Automatikus elrendezés és vezérlők

Az automatikus elrendezés lehetővé teszi, hogy az alkalmazás automatikusan módosítsa a vezérlő méretét. Például egy vezérlő képes módosulni, hogy illeszkedjen egy karakterlánc hosszához. Ez a képesség lehetővé teszi, hogy a honosítók lefordítsák a sztringet; többé nem kell átméretezniük a vezérlőt a lefordított szövegnek megfelelően. Az alábbi példa egy angol tartalommal rendelkező gombot hoz létre.

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

A példában csak annyit kell tennie, hogy megváltoztatja a gomb szövegét spanyolra. Például

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

Az alábbi ábrán a kódminták kimenete látható:

Automatikus elrendezési és kódolási szabványok

Az automatikus elrendezési megközelítés használatához kódolási és tervezési szabványok és szabályok szükségesek a teljes mértékben honosítható felhasználói felület létrehozásához. Az alábbi irányelvek segítik az automatikus elrendezéskódolást.

Ne használjon abszolút pozíciókat

Ne használja Canvas , mert az elemeket abszolút pozícióba teszi.
Használja a DockPanel, StackPanel és Grid jelölőket a vezérlők elhelyezéséhez.

A különböző típusú panelekről a Panelek áttekintése című témakörben olvashat bővebben.

Ne állítson be rögzített méretet egy ablakhoz

Használja a Window.SizeToContent. Például:


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

Hozzáadás FlowDirection

Adjon hozzá egy FlowDirection elemet az alkalmazás gyökéreleméhez.

A WPF kényelmes módot kínál a vízszintes, kétirányú és függőleges elrendezések támogatásához. A bemutató keretrendszerben a tulajdonság használható az FlowDirection elrendezés meghatározására. A folyamatirány-minták a következők:
- FlowDirection.LeftToRight (LrTb) – vízszintes elrendezés latin, kelet-ázsiai és így tovább.
- FlowDirection.RightToLeft (RlTb) – kétirányú arab, héber és így tovább.

Összetett betűtípusok használata fizikai betűtípusok helyett

Összetett betűtípusok használata mellett a FontFamily tulajdonságot nem kell honosíteni.
A fejlesztők használhatják az alábbi betűtípusok egyikét, vagy létrehozhatják sajátjukat.
- Globális felhasználói felület
- Globális San Serif
- Globális serif

Xml:lang hozzáadása

Adja hozzá az xml:lang attribútumot a felhasználói felület gyökéreleméhez, például xml:lang="en-US" egy angol alkalmazáshoz.
Mivel az összetett betűtípusok határozzák xml:lang meg a használni kívánt betűtípust, állítsa be ezt a tulajdonságot a többnyelvű forgatókönyvek támogatására.

Automatikus elrendezés és rácsok

Az Grid elem hasznos az automatikus elrendezéshez, mivel lehetővé teszi a fejlesztő számára az elemek elhelyezését. A Grid vezérlő képes a rendelkezésre álló terület elosztására a gyermekelemek között egy oszlop- és sorelrendezés használatával. A felhasználói felület elemei több cellára is kiterjedhetnek, és lehetséges, hogy egymásba ágyazott rácsok vannak. A rácsok azért hasznosak, mert lehetővé teszik az összetett felhasználói felület létrehozását és elhelyezését. Az alábbi példa azt mutatja be, hogy rács használatával helyez el néhány gombot és szöveget. Vegye észre, hogy a cellák magassága és szélessége Auto értékre van állítva; ezért a képet tartalmazó gomb cellája a képhez igazodik.

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

Az alábbi ábrán az előző kód által létrehozott rács látható.

Rácsos példa Rács

Automatikus elrendezés és rácsok az IsSharedSizeScope tulajdonság használatával

A Grid honosítható alkalmazásokban hasznos elem a tartalomnak megfelelő vezérlők létrehozása. Időnként azonban azt szeretné, hogy a vezérlők tartalomtól függetlenül megtartsák az adott méretet. Ha például "OK", "Mégse" és "Tallózás" gombokkal rendelkezik, akkor valószínűleg nem szeretné, hogy a gombok mérete a tartalomhoz igazodjon. Ebben az esetben a Grid.IsSharedSizeScope csatolt tulajdonság akkor hasznos, ha ugyanazt a méretezést több rácselem között osztja meg. Az alábbi példa bemutatja, hogyan oszthat meg oszlop- és sorméretezést több Grid elem között.

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

Megjegyzés:

A teljes kódmintát lásd: Méretezési tulajdonságok megosztása rácsok között.

Lásd még

Visszajelzés

Hasznosnak találta ezt az oldalt?

Last updated on 2025-05-07