Skip to content

20. Juli 2010

Die verschiedenen Panel-Elemente in WPF: Das Grid

In WPF gibt es einige Panel-Elemente mit kleinen Unterschieden, die aber in der Praxis von hoher bedeutung sein können. Daher werde ich in nächster Zeit jedes Element einmal kurz vorstellen, und ein kleines Beispiel dazu zeigen.

  • Grid
  • StackPanel
  • DockPanel
  • Canvas
  • WrapPanel
  • ViewBox


Gleich zu Anfang kommt heute…

1.Das Grid

Das Grid ist wahrscheinlich jedem bekannt, der schon einmal mit WPF gearbeitet hat, denn es ist das Standardpanel in einem neuen Fenster oder Steuerelement. Hier mal ein Beispiel zu einem Grid mit 4 Reihen und 2 Spalten:

<Grid>
 <Grid.RowDefinitions>
 <RowDefinition Height="Auto" />
 <RowDefinition Height="Auto" />
 <RowDefinition Height="*" />
 <RowDefinition Height="28" />
 </Grid.RowDefinitions>
 <Grid.ColumnDefinitions>
 <ColumnDefinition Width="Auto" />
 <ColumnDefinition Width="200" />
 </Grid.ColumnDefinitions>
 <Label Grid.Row="0" Grid.Column="0" Content="Name:"/>
 <Label Grid.Row="1" Grid.Column="0" Content="E-Mail:"/>
 <Label Grid.Row="2" Grid.Column="0" Content="Comment:"/>
 <TextBox Grid.Column="1" Grid.Row="0" Margin="3" />
 <TextBox Grid.Column="1" Grid.Row="1" Margin="3" />
 <TextBox Grid.Column="1" Grid.Row="2" Margin="3" />
 <Button Grid.Column="1" Grid.Row="3" HorizontalAlignment="Right"
 MinWidth="80" Margin="3" Content="Send"  />
</Grid>

So siehts aus:

Ein einfaches Grid in WPF

WPF Grid

In den Zeilen 1 bis 9 werden die Reihen und Spalten ds Grids definiert. Man kann sich das ungefähr so vorstellen, wie eine Tablelle. Eine <RowDefinition /> definiert dabei eine Reihe, eine <ColumDefinition />  eine Spalte. Bei den Width bzw. Height Angaben gibt es drei Möglichkeiten: Eine Zahl, Auto oder ein * (eine Zahl und ein Stern ist auch möglich z.B. 9*). Dies hat folgende Auswirkungen:

  • Zahl: gibt die absolute Breite bzw. Höhe in Pixeln an. Der Nachteil: Keine Dynamik in der Tabelle, daher auch keine Anpassung an den Inhalt.
  • Auto: Die Reihe bzw. Spalte wird so groß, dass der Inhalt hineinpasst. Der Nachteil: bei großen Inhalten wird die Tabelle sehr groß.
  • Stern: Gibt einen prozentualen Größenwert an. 100% sind dabei alle Spalten/ Reihen mit einem Stern. Definiert man eine Reihe mit 2* und eine andere mit *, so hat die erste 20%, die andere die verbleibenden 80%.

Die Kind-Elemente des Grids kann man mit den Angaben Grid.Row und Grid.Column in eine Spalte und Reihe einordnen, wobei die Zählung wie üblich bei Null beginnt, Grid.Row=“0″ ist daher die erste Reihe. Mit den Attributen Grid.ColumnSpan und Grid.RowSpan kann man die Elemente dazu bringen, sich über mehrere Spalten bzw. Reihen zu erstrecken.

Bsp:

<Label Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" />

erzeugt ein Label, welches in der Ersten Reihe anfängt und sich über Zwei Reihen erstreckt.

Mit dem Attribut ShowGridLines=“true“ im <Grid> Tag kann man sich die Linien, die Spalten und Reihen trennen anzeigen lassen. Wenn man mehrere Grids ineinander verschachtelt, so besiehen sich die Angaben Grid.Row und Grid.Column immer auf das nächste übergeordnete Grid.

Kommentar verfassen