Bryan Albrecht

Grid und StackPanel

In XAML gibt es verschieden Möglichkeiten ein Layout für ein UserControl zu erstellen.

Zwei verschiedene Controls, welche das Layouten ermöglichen sind das StackPanel und das Grid.

Mit beiden ist es mehr oder weniger einfach möglich eine Struktur ins Layout zu bringen.
Dabei ist aber darauf zu achten, dass je nach Problemstellung das Eine oder das Andere bevorzug wird.

Im folgenden Code sieht man den Aufbau der beiden Controlls.

Code Grid:

  1. <Grid x:Name="LayoutRoot" Height="108">
  2. <Grid.RowDefinitions>
  3. <RowDefinition Height="Auto" />
  4. <RowDefinition Height="Auto" />
  5. </Grid.RowDefinitions>
  6.  
  7. <Grid.ColumnDefinitions>
  8. <ColumnDefinition Width="Auto" />
  9. <ColumnDefinition Width="Auto" />
  10. <ColumnDefinition Width="Auto" />
  11. </Grid.ColumnDefinitions>
  12.  
  13. <Rectangle Grid.RowSpan="2" Grid.Row="0" Grid.Column="0" Height="108" Width="54" Fill="Orange"/>
  14. <TextBlock Grid.Row="0" Grid.Column="1" Text="This is the first Column" />
  15. <TextBlock Grid.Row="1" Grid.Column="1" Text="This is the second Column"/>
  16. <Rectangle Grid.RowSpan="2" Grid.Row="0" Grid.Column="2" Height="108" Width="54" Fill="Orange"/>
  17. </Grid>

Code StackPanel:

  1. <Grid x:Name="LayoutRoot" Height="108">
  2. <StackPanel Orientation="Horizontal">
  3. <Rectangle Height="108" Width="54" Fill="Orange"/>
  4. <StackPanel Orientation="Vertical">
  5. <TextBlock Text="This is the first Column" Height="54"/>
  6. <TextBlock Text="This is the second Column" Height="54"/>
  7. </StackPanel>
  8. <Rectangle Height="108" Width="54" Fill="Orange"/>
  9. </StackPanel>
  10. </Grid>

Die beiden oben gezeigten Beispiele zeigen am Ende genau das Gleiche an.

Grid

Wen man Grids verwendet, muss man definieren, wie viele Spalten und wie viele Zeilen es haben soll. Dies kann man für jedes Grid einzeln festlegen.

Danach kann man mit der ID von der jeweiligen Zeile/Spalte angeben, wo sich das Element befindet.
Auch möglich ist, dass man etwas über mehrere Felder gehen lässt. Dies ist mit der Option Row/Colum -span möglich.

Code:

  1. <Grid>
  2. <Grid.RowDefinitions>
  3.   <RowDefinition Height="Auto" />
  4.   <RowDefinition Height="50" />
  5. </Grid.RowDefinitions>
  6.  
  7. <Grid.ColumnDefinitions>
  8.   <ColumnDefinition Width="Auto" />
  9.   <ColumnDefinition Width="100" />
  10. </Grid.ColumnDefinitions>
  11.  
  12. <Rectangle Grid.Row="0" Grid.Column="0" Height="50" Width="50" Fill="Green"/>
  13. <Rectangle Grid.RowSpan="2" Grid.Row="0" Grid.Column="1" Height="*" Width="*" Fill="Orange"/>
  14. </Grid>

StackPanel

In einem StackPanel ist es möglich mehrere verschiedene Controls hintereinander zu reihen.
Mit der Option Orientation ist es möglich festzulegen, ob die Controls horizontal oder vertikal aneinander gereiht werden.
Es ist sogar möglich, dass ein StackPanel in einem Stackpanel verschachtelt wird.

Code:

  1. <StackPanel Orientation="Horizontal">
  2. <TextBlock Text="FirstText"/>
  3. <TextBlock Text="SecontText"/>
  4. <StackPanel Orientation="Vertical">
  5. <TextBlock Text="ThirdText"/>
  6. <TextBlock Text="FourthText"/>
  7. </StackPanel>
  8. </StackPanel>

Im gezeigten Beispiel wird ein vertikales StackPanel in ein horizontales verschachtelt.

Wie bei einem Text kann man ein Alignment angeben. Dabei kann man ein horizontales so wie ein vertikales Alignment angegeben.

Code:

  1. <StackPanel Orientation="Vertical" HorizontalAlignment="Center" >
  2. <TextBlock Text="Textone"/>
  3. <TextBlock Text="Texttwo"/>
  4. </StackPanel>

Folgende Alignment sind möglich:

Center:
Alles wird in seiner wirklichen breite in die Mitte ausgerichtet.

Stretch:
Jedes Control wird auf die gesamte Länge/Höhe erweitert.

Left:
Die Controls werden links ausgerichtet.

Right:
Die Controls werden rechts ausgerichtet.