Freigeben über

Gewusst wie: Verwenden eines Rasters für automatisches Layout

  • Artikel

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

Die Lokalisierung einer user interface (UI) kann sehr viel Zeit in Anspruch nehmen. Neben der Übersetzung von Text müssen Lokalisierer häufig die Größe von Elementen ändern und sie neu positionieren. In der Vergangenheit musste jede Sprache, für die eine UI erstellt wurde, angepasst werden. Mit den Funktionen von Windows Presentation Foundation (WPF) können Sie jetzt Elemente entwerfen, die den Anpassungsaufwand reduzieren. Der Ansatz, Anwendungen zu schreiben, bei denen Größenänderungen und Neupositionierungen einfacher ausgeführt werden können, wird als auto layout bezeichnet.

Im folgenden Extensible Application Markup Language (XAML)-Beispiel wird veranschaulicht, wie mit einem Raster einige Schaltflächen und Text neu 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. Da die Größe des Grid-Elements an seinen Inhalt angepasst werden kann, kann dies beim Verwenden des automatischen Layoutansatzes zum Entwerfen von lokalisierbaren Anwendungen hilfreich sein.

Beispiel

Das folgende Beispiel veranschaulicht die Verwendung eines Rasters.

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

Raster

Rasterbeispiel

Siehe auch

Aufgaben

Gewusst wie: Verwenden des automatischen Layouts zum Erstellen einer Schaltfläche

Konzepte

Übersicht über die Verwendung eines automatischen Layouts