Übersicht über die Verwendung eines automatischen Layouts

Artikel
08/10/2011

Dieses Thema enthält Richtlinien für Entwickler zum Schreiben von Anwendungen in Windows Presentation Foundation (WPF) mit lokalisierbaren user interfaces (UIs). In der Vergangenheit nahm die Lokalisierung einer UI sehr viel Zeit in Anspruch. Für jede Sprache, für die eine UI-Anpassung durchgeführt wurde, musste eine Pixelanpassung vorgenommen werden. Jetzt können die UIs mit dem geeigneten Layout und den entsprechenden Codierungsstandards so aufgebaut werden, dass die Lokalisierungsspezialisten weniger Größenänderungen und Neupositionierungen durchführen müssen. Der Ansatz, Anwendungen zu schreiben, bei denen Größenänderungen und Neupositionierungen einfacher ausgeführt werden können, wird als automatisches Layout bezeichnet und mithilfe des WPF-Anwendungsentwurfs erzielt.

Dieses Thema enthält folgende Abschnitte.

Vorteile der Verwendung eines automatischen Layouts
Automatisches Layout und Steuerelemente
Automatisches Layout und Codierungsstandards
Automatisches Layout und Raster
Automatisches Layout und Raster mit der IsSharedSizeScope-Eigenschaft
Verwandte Themen

Vorteile der Verwendung eines automatischen Layouts

Mit seiner Leistungsfähigkeit und Flexibilität bietet das WPF-Präsentationssystem die Möglichkeit, die Elemente in einer Anwendung so auszulegen, dass sie entsprechend den Anforderungen der unterschiedlichen Sprachen angepasst werden können. Die folgende Auflistung enthält einige der Vorteile von automatischen Layouts.

UI kann in jeder beliebigen Sprache gut angezeigt werden.
Verringert nach der Übersetzung der textlichen Inhalte die Notwendigkeit zur erneuten Anpassung der Positionen und der Größe von Steuerelementen.
Reduziert die Notwendigkeit zur erneuten Anpassung der Fenstergröße.
UI-Layout kann in jede Sprache korrekt gerendert werden.
Die Lokalisierung kann so vereinfacht werden, dass sie nur wenig komplexer als eine Zeichenfolgenübersetzung ist.

Automatisches Layout und Steuerelemente

Ein automatisches Layout ermöglicht es einer Anwendung, die Größe eines Steuerelements automatisch einzustellen. Ein Steuerelement kann sich beispielsweise so ändern, dass es die Länge einer Zeichenfolge anzeigt. Mithilfe dieser Funktion können die Lokalisierungsspezialisten die Zeichenfolge übersetzen und müssen das Steuerelement nicht mehr entsprechend der Länge der Zeichenfolge anpassen. Im folgenden Beispiel wird eine Schaltfläche mit englischem Inhalt erstellt.

<Window
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://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>

Wenn Sie für das Beispiel eine Schaltfläche mit spanischem Inhalt erstellen möchten, müssen Sie nur noch den Textinhalt ändern. Beispiel:

<Window
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://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>

Die folgende Grafik zeigt die Ausgabe der Codebeispiele.

Automatische Anpassung der Schaltflächengröße

Die gleiche Schaltfläche mit Text in unterschiedlichen Sprachen

Automatisches Layout und Codierungsstandards

Für die Verwendung des automatischen Layoutansatzes sind Codierungs- und Entwurfsstandards sowie Regeln erforderlich, um eine völlig lokalisierbare UI zu erstellen. Die folgenden Richtlinien unterstützen die automatische Layoutcodierung.

Codierungsstandards	Beschreibungen
Verwenden Sie keine absoluten Positionen.	Verwenden Sie nicht das Canvas-Objekt, weil Elemente damit absolut positioniert werden. Verwenden Sie zur Positionierung der Steuerelemente DockPanel, StackPanel und Grid. Die verschiedenen Bereichstypen werden unter Übersicht über Panel-Elemente erläutert.
Legen Sie keine feste Größe für ein Fenster fest.	Verwenden Sie die SizeToContent-Eigenschaft. Beispiele: `<StackPanel xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" x:Class="GridLoc.Pane1" >`
Fügen Sie eine FlowDirection-Eigenschaft hinzu.	Fügen Sie dem Stammelement der Anwendung eine FlowDirection hinzu. WPF bietet eine komfortable Möglichkeit zur Unterstützung von horizontalen, bidirektionalen und vertikalen Layouts. In PresentationFramework kann die FlowDirection-Eigenschaft zur Definition des Layouts verwendet werden. Folgende Flussrichtungsmuster stehen zur Verfügung: LeftToRight (LrTb) —horizontales Layout für Lateinisch, ostasiatische Sprachen usw. RightToLeft (RlTb) — bidirektional für Arabisch, Hebräisch usw.
Verwenden Sie zusammengesetzte Schriftarten statt physischer Schriftarten.	Bei zusammengesetzten Schriftarten muss die FontFamily-Eigenschaft nicht lokalisiert werden. Entwickler können eine der folgenden Schriftarten verwenden oder ihre eigenen erstellen. Global User Interface Global Sans Serif Global Serif
Fügen Sie xml:lang hinzu.	Fügen Sie das xml:lang-Attribut im UI-Stammelement hinzu, z. B. xml:lang="en-US" für eine englische Anwendung. Da xml:lang von zusammengesetzten Schriftarten für die Bestimmung der zu verwendenden Schriftarten herangezogen wird, legen Sie diese Eigenschaft so fest, dass sie mehrsprachige Szenarien unterstützt.

Automatisches Layout und Raster

Das Grid-Element eignet sich für automatische Layouts, da es die Positionierung von Elementen ermöglicht. Ein Grid-Steuerelement kann den verfügbaren Leerraum mit einer Spalten- und Zeilenanordnung auf seine untergeordneten Elemente verteilen. Die UI-Elemente können sich über mehrere Zellen erstrecken und verschachtelte Raster aufweisen. Raster sind sehr hilfreich, da Sie mit deren Hilfe eine komplexe UI erstellen und positionieren können. Im folgenden Beispiel wird veranschaulicht, wie mit einem Raster einige Schaltflächen und Text positioniert werden. Beachten Sie, dass Höhe und Breite der Zellen auf Auto festgelegt sind. Daher wird die Größe der Zelle, die die Schaltfläche mit einem Bild enthält, an das Bild angepasst.

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

Die folgende Grafik zeigt das vom vorherigen Code erzeugte Raster.

Raster

Rasterbeispiel

Automatisches Layout und Raster mit der IsSharedSizeScope-Eigenschaft

Ein Grid-Element ist in lokalisierbaren Anwendungen sehr hilfreich, um Steuerelemente zu erstellen, die sich an den entsprechenden Inhalt anpassen. Zuweilen ist es jedoch erforderlich, dass die Steuerelemente unabhängig vom Inhalt eine bestimmte Größe beibehalten. So sollen beispielsweise die Schaltflächen "OK", "Abbrechen" und "Durchsuchen" wahrscheinlich nicht an den entsprechenden Inhalt angepasst werden. In diesem Fall kann die angehängte Eigenschaft Grid.IsSharedSizeScope verwendet werden, um dieselbe Größe in mehreren Rasterelementen zu nutzen. Im folgenden Beispiel wird veranschaulicht, wie dieselbe Spalten- und Zeilengröße in mehreren Grid-Elementen gemeinsam genutzt werden kann.

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

Hinweis: Das vollständige Codebeispiel finden Sie unter Gewusst wie: Freigeben von Größeneigenschaften zwischen Grids.