Übersicht über die Verwendung eines automatischen Layouts

2025-05-07

In diesem Thema werden Richtlinien für Entwickler vorgestellt, wie Sie Windows Presentation Foundation (WPF)-Anwendungen mit lokalisierbaren Benutzeroberflächen (UIs) schreiben. In der Vergangenheit war die Lokalisierung einer Benutzeroberfläche ein zeitaufwendiger Prozess. Jede Sprache, für die die Benutzeroberfläche angepasst wurde, erforderte eine Anpassung pixelgenau. Mit dem richtigen Entwurfs- und Codierungsstandards können Benutzeroberflächen heutzutage so konstruiert werden, dass bei der Lokalisierung weniger Arbeit für die Größenänderung und die Neupositionierung aufgewendet werden muss. Der Ansatz zum Schreiben von Anwendungen, die einfacher größenveränderbar und neu positionierbar sind, wird als automatisches Layout bezeichnet und kann mithilfe des WPF-Anwendungsentwurfs erreicht werden.

Vorteile der Verwendung des automatischen Layouts

Da das WPF-Präsentationssystem leistungsfähig und flexibel ist, bietet es die Möglichkeit, Layoutelemente in einer Anwendung zu layouten, die an die Anforderungen verschiedener Sprachen angepasst werden können. In der folgenden Liste werden einige der Vorteile des automatischen Layouts aufgeführt.

Die Benutzeroberfläche wird in jeder beliebigen Sprache gut angezeigt.
Reduziert die Notwendigkeit, die Position und Größe von Steuerelementen nach der Übersetzung von Text neu zu ändern.
Reduziert die Notwendigkeit, die Fenstergröße neu zu ändern.
Das Benutzeroberflächen-Layout kann in jeder beliebige Sprache korrekt gerendert werden.
Die Lokalisierung kann auf das Maß reduziert werden, dass sie kaum mehr als eine einfache Zeichenfolgenübersetzung ist.

Automatisches Layout und Steuerungen

Mit dem automatischen Layout kann eine Anwendung die Größe eines Steuerelements automatisch anpassen. Beispielsweise kann ein Steuerelement so geändert werden, dass es zur Länge einer Zeichenfolge passt. Mit dieser Funktion können Lokalisierer die Zeichenfolge übersetzen; sie müssen die Größe des Steuerelements nicht mehr ändern, um den übersetzten Text anzupassen. Im folgenden Beispiel wird eine Schaltfläche mit englischem Inhalt erstellt.

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

Im Beispiel müssen Sie nur den Text ändern, um eine spanische Schaltfläche zu erstellen. Beispiel:

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

Die folgende Grafik zeigt die Ausgabe der Codebeispiele:

Automatische Layout- und Codierungsstandards

Die Verwendung des automatischen Layoutansatzes erfordert eine Reihe von Codierungs- und Entwurfsstandards und Regeln, um eine vollständig lokalisierbare Benutzeroberfläche zu erzeugen. Die folgenden Richtlinien werden Ihnen bei der automatischen Layoutcodierung helfen.

Verwenden Sie keine absoluten Positionen.

Verwenden Sie Canvas nicht, da sie Elemente absolut positioniert.
Verwenden Sie DockPanel, StackPanelund Grid, um Steuerelemente zu positionieren.

Eine Erläuterung zu verschiedenen Arten von Paneln finden Sie unter Übersicht über Panel-Elemente.

Keine feste Größe für ein Fenster festlegen

Verwenden Sie Window.SizeToContent. Beispiel:


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

Fügen Sie eine FlowDirection hinzu

Fügen Sie dem Stammelement Ihrer Anwendung FlowDirection hinzu.

WPF bietet eine bequeme Möglichkeit, horizontale, bidirektionale und vertikale Layouts zu unterstützen. Im Präsentationsframework kann die FlowDirection-Eigenschaft zum Definieren des Layouts verwendet werden. Die Muster der Flussrichtung sind:
- FlowDirection.LeftToRight (LrTb) – Horizontales Layout für Latein, Ostasiatisch usw.
- FlowDirection.RightToLeft (RlTb) – Bidirektional für Arabisch, Hebräisch usw.

Verwenden zusammengesetzter Schriftarten anstelle von physischen Schriftarten

Bei zusammengesetzten Schriftarten muss die eigenschaft FontFamily nicht lokalisiert werden.
Entwickler können eine der folgenden Schriftarten verwenden oder eigene Schriftarten erstellen.
- Globale Benutzeroberfläche
- Global ohne Serifen
- Global mit Serifen

Fügen Sie xml:lang hinzu.

Fügen Sie das attribut xml:lang im Stammelement der Benutzeroberfläche hinzu, z. B. xml:lang="en-US" für eine englische Anwendung.
Da zusammengesetzte Schriftarten xml:lang verwenden, um zu bestimmen, welche Schriftart verwendet werden soll, legen Sie diese Eigenschaft fest, um mehrsprachige Szenarien zu unterstützen.

Automatisches Layout und Raster

Das Grid-Element ist für das automatische Layout nützlich, da ein Entwickler Elemente positionieren kann. Ein Grid-Steuerelement kann den verfügbaren Platz mit einer Spalten- und Zeilenanordnung auf seine untergeordneten Elemente verteilen. Die UI-Elemente können mehrere Zellen umfassen, und es ist möglich, Raster innerhalb von Rastern zu haben. Raster sind nützlich, da sie es Ihnen ermöglichen, komplexe UI-Elemente zu erstellen und zu positionieren. Im folgenden Beispiel wird die Verwendung eines Rasters veranschaulicht, um einige Schaltflächen und Text zu positionieren. Beachten Sie, dass die Höhe und Breite der Zellen auf Autofestgelegt sind; Daher passt sich die Zelle, die die Schaltfläche mit einem Bild enthält, an das Bild an.

<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 Raster, das durch den vorherigen Code erzeugt wurde.

Grid-Beispiel Grid

Automatisches Layout und Raster mit der IsSharedSizeScope-Eigenschaft

Ein Grid-Element ist in lokalisierbaren Anwendungen nützlich, um Steuerelemente zu erstellen, die an Inhalte angepasst werden. Zu zeiten möchten Sie jedoch, dass Steuerelemente unabhängig vom Inhalt eine bestimmte Größe beibehalten. Wenn Sie zum Beispiel die Schaltflächen "OK", "Abbrechen" und "Durchsuchen" haben, möchten Sie wahrscheinlich nicht, dass die Größe der Schaltflächen an den Inhalt angepasst wird. In diesem Fall kann die angefügte Eigenschaft Grid.IsSharedSizeScope dabei hilfreich sein, dieselbe Größe in mehreren Rasterelementen zu verwenden. Im folgenden Beispiel wird veranschaulicht, wie dieselbe Spalten- und Zeilengröße zwischen 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 Freigeben von Größeneigenschaften zwischen Rastern.

Freigeben über