Freigeben über

Vorgehensweise: Verwenden eines Rasters für das automatische Layout

In diesem Beispiel wird beschrieben, wie Sie ein Raster im automatischen Layoutansatz verwenden, um eine lokalisierbare Anwendung zu erstellen.

Die Lokalisierung einer Benutzeroberfläche kann ein zeitaufwendiger Prozess sein. Lokalisierungsexperten müssen häufig zusätzlich zum Übersetzen von Text Elemente neu anordnen und neu positionieren. In der Vergangenheit musste jede Sprache angepasst werden, für die eine Benutzeroberfläche angepasst wurde. Jetzt können Sie mit den Funktionen von Windows Presentation Foundation (WPF) Elemente entwerfen, die den Anpassungsbedarf verringern. Der Ansatz zum Schreiben von Anwendungen, die einfacher in ihrer Größe verändert und umpositioniert werden können, wird als auto layoutbezeichnet.

Das folgende Xaml-Beispiel (Extensible Application Markup Language) veranschaulicht die Verwendung eines Rasters, 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. Da das Grid-Element an seinen Inhalt angepasst werden kann, kann es nützlich sein, wenn der automatische Layoutansatz zum Entwerfen von Anwendungen verwendet wird, die lokalisiert werden können.

Beispiel

Das folgende Beispiel zeigt, wie man ein Raster verwendet.

<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 die Ausgabe des Codebeispiels.

Grid-Beispiel
Raster

Siehe auch