Delen via

Overzicht van automatische indeling gebruiken

In dit onderwerp worden richtlijnen geïntroduceerd voor ontwikkelaars over het schrijven van WPF-toepassingen (Windows Presentation Foundation) met lokaliseerbare gebruikersinterfaces (UIS's). In het verleden was lokalisatie van een gebruikersinterface een tijdrovend proces. Elke taal waarvoor de gebruikersinterface is aangepast, vereiste een pixel-per-pixelaanpassing. Tegenwoordig kunnen gebruikersinterfaces met de juiste ontwerp- en coderingsstandaarden worden opgebouwd, zodat localizers minder opnieuw te hoeven aanpassen. De methode voor het schrijven van toepassingen die gemakkelijker kunnen worden aangepast en verplaatst, wordt automatische indeling genoemd en kan worden bereikt met behulp van WPF-toepassingsontwerp.

Voordelen van het gebruik van automatische indeling

Omdat het WPF-presentatiesysteem krachtig en flexibel is, biedt het de mogelijkheid om elementen in een toepassing in te delen die kunnen worden aangepast aan de vereisten van verschillende talen. De volgende lijst wijst op enkele voordelen van automatische indeling.

  • De gebruikersinterface wordt goed weergegeven in elke taal.

  • Vermindert de noodzaak om de positie en grootte van besturingselementen te wijzigen nadat tekst is vertaald.

  • Vermindert de noodzaak om de grootte van het venster aan te passen.

  • De indeling van de gebruikersinterface wordt correct weergegeven in elke taal.

  • Lokalisatie kan worden verkleind tot het punt dat het weinig meer is dan tekenreeksomzetting.

Automatische indeling en bedieningselementen

Met automatische indeling kan een toepassing de grootte van een controle automatisch aanpassen. Een besturingselement kan bijvoorbeeld worden gewijzigd om de lengte van een tekenreeks aan te passen. Door deze functie kunnen lokalisatoren de tekenreeks vertalen; ze hoeven het formaat van het besturingselement niet meer aan te passen aan de vertaalde tekst. In het volgende voorbeeld wordt een knop gemaakt met Engelse inhoud.

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

In het voorbeeld hoeft u alleen maar een Spaanse knop te maken om de tekst te wijzigen. Bijvoorbeeld

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

In de volgende afbeelding ziet u de uitvoer van de codevoorbeelden:

Dezelfde knop met tekst in verschillende talen

Standaarden voor automatische indeling en codering

Voor het gebruik van de automatische lay-outbenadering is een set coderings- en ontwerpstandaarden en -regels vereist om een volledig lokaliseerbare gebruikersinterface te produceren. De volgende richtlijnen helpen bij het automatisch coderen van indelingen.

Geen absolute posities gebruiken

Zie Paneloverzicht voor een discussie over verschillende typen panelen.

Geen vaste grootte instellen voor een venster

  • Gebruik Window.SizeToContent. Voorbeeld:

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

Een toevoegen FlowDirection

  • Voeg een FlowDirection toe aan het hoofdelement van uw toepassing.

    WPF biedt een handige manier om horizontale, bidirectionele en verticale indelingen te ondersteunen. In het presentatieframework kan de eigenschap worden gebruikt om de FlowDirection indeling te definiëren. De stroomrichtingspatronen zijn:

Samengestelde lettertypen gebruiken in plaats van fysieke lettertypen

  • Met samengestelde lettertypen hoeft de FontFamily eigenschap niet te worden gelokaliseerd.

  • Ontwikkelaars kunnen een van de volgende lettertypen gebruiken of hun eigen lettertypen maken.

    • Globale gebruikersinterface
    • Global San Serif
    • Global Serif

Xml:lang toevoegen

  • Voeg het xml:lang kenmerk toe aan het hoofdelement van uw gebruikersinterface, zoals xml:lang="en-US" voor een Engelse toepassing.

  • Omdat samengestelde lettertypen gebruiken xml:lang om te bepalen welk lettertype moet worden gebruikt, stelt u deze eigenschap in om meertalige scenario's te ondersteunen.

Automatische indeling en rasters

Het Grid element is handig voor automatische indeling omdat een ontwikkelaar elementen kan positioneren. Een Grid besturingselement kan de beschikbare ruimte verdelen onder zijn kindelementen door gebruik te maken van een kolom- en rijopstelling. De elementen van de gebruikersinterface kunnen meerdere cellen omvatten en het is mogelijk om rasters binnen rasters te hebben. Rasters zijn handig omdat u hiermee complexe gebruikersinterface kunt maken en positioneren. In het volgende voorbeeld ziet u hoe u een raster gebruikt om enkele knoppen en tekst te plaatsen. U ziet dat de hoogte en breedte van de cellen zijn ingesteld op Auto; daarom wordt de cel met de knop met een afbeelding aangepast aan de afbeelding.

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

In de volgende afbeelding ziet u het raster dat door de vorige code is geproduceerd.

Rastervoorbeeld Grid

Automatische indeling en rasters met behulp van de eigenschap IsSharedSizeScope

Een Grid element is handig in lokaliseerbare toepassingen om besturingselementen te maken die worden aangepast aan de inhoud. Soms wilt u echter dat besturingselementen een bepaalde grootte behouden, ongeacht de inhoud. Als u bijvoorbeeld de knoppen 'OK', 'Annuleren' en 'Bladeren' hebt, wilt u waarschijnlijk niet dat de knoppen worden aangepast aan de inhoud. In dit geval is de Grid.IsSharedSizeScope gekoppelde eigenschap handig voor het delen van dezelfde grootte tussen meerdere rasterelementen. In het volgende voorbeeld ziet u hoe u gegevens voor kolom- en rijgrootte tussen meerdere Grid elementen kunt delen.

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

Opmerking

Zie Eigenschappen van grootte tussen rasters delen voor het volledige codevoorbeeld.

Zie ook

  • Last updated on