Übersicht über die Verwendung eines automatischen Layouts

Artikel
08/20/2008

Aktualisiert: November 2007

Dieses Thema enthält Richtlinien für Entwickler zum Schreiben von Anwendungen in Windows Presentation Foundation (WPF) mit lokalisierbaren Benutzeroberflächen (user interfaces, UIs). In der Vergangenheit nahm die Lokalisierung einer Benutzeroberfläche sehr viel Zeit in Anspruch. Für jede Sprache, für die eine Benutzeroberfläche-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 wird 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.

Benutzeroberfläche 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.
Benutzeroberfläche-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

Tipp

Das vollständige Beispiel, aus dem die vorhergehenden Beispiele stammen, finden Sie unter Beispiel zu automatischem Layout für lokalisierbare Anwendungen.

Automatisches Layout und Codierungsstandards

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

Codierungsstandards	Beschreibung
Verwenden Sie keine absoluten Positionen.	Verwenden Sie nicht Canvas, 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 SizeToContent. Beispiel: `<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 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 die XmlLang-Eigenschaft im Benutzeroberfläche-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 Platz auf seine untergeordneten Elemente, die in Spalten und Zeilen angeordnet sind, verteilen und platziert Benutzeroberfläche-Elemente in die jeweiligen Zellen. Die Benutzeroberfläche-Elemente können sich über mehrere Zellen erstrecken und verschachtelte Raster aufweisen. Raster sind sehr hilfreich, da Sie mit deren Hilfe eine komplexe Benutzeroberfläche 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

Tipp

Das vollständige Codebeispiel finden Sie unter Beispiel zu Rastern für lokalisierbare Anwendungen.

Automatisches Layout und Raster mit der IsSharedSizeScope-Eigenschaft

Raster sind 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 dem Grid-Element angehängte Eigenschaft 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.