Mit WPF kann man Elemente nach Belieben in seiner Anwendung positionieren. Standardmäßig stehen einem folgende Container-Steuerelemente, oder auch Container-Klassen genannt, zur Verfügung. Die Container-Klassen können ineinander verschachtelt werden.

Canvas

Mit Canvas kann man die Elemente mit Hilfe von Koordinaten in einer absolute Positionierung anordnen und jeweils in der Größe definieren. Eigentlich nichts neues gegenüber der herkömmlicher Win32 API.

Die Eigenschaften dazu: für Top, Left, Bottom und Right =>
Canvas.Left=“n“, Canvas.Top=“n“, Canvas.Bottom=“n“, Canvas.Right=“n“
und für die Breiten und Höhenangabe =>
Width=“n“, Height=“n“

In Silverlight 2 kommen für die Größenangabe noch folgende Eigenschaften hinzu =>
MaxHeight, MaxWidth, MinHeight, MinWidth

Beispiel:

1
2
3
<Canvas Canvas.Top="100"  Canvas.Left="100" Width="100" Height="50">
 <Button Width="50" Height="20">OK</Button>
</Canvas>


StackPanel

In einem StackPanel können die Elemente horizontal (Orientation=“horizontal“) oder vertikal (default|Orientation=“vertical“ ) angeordnet (gestapelt) werden.

In meinem Beispiel habe ich das StackPanel mit einem ScrollViewer eingeschlossen und die Eigenschaft CanContentScroll=“false“ gegeben um so das StackPanel scrollen zu können.

Beispiel:

1
2
3
4
5
6
7
8
9
10
11
12
13
<ScrollViewer CanContentScroll="false">
 <StackPanel>
 <Button Height="50" Content="Button 1" />
 <Button Height="50" Content="Button 2" />
 <Button Height="50" Content="Button 3" />
 <Button Height="50" Content="Button 4" />
 <Button Height="50" Content="Button 5" />
 <Button Height="50" Content="Button 6" />
 <Button Height="50" Content="Button 7" />
 <Button Height="50" Content="Button 8" />
 <Button Height="50" Content="Button 9" />
 </StackPanel>
</ScrollViewer>

DockPanel

Das DockPanel bietet das klassische Docking. Oben, rechts, unten,links und Bereiche die gefüllt werden (fill). Diese Klasse beschreibt, wie sich die einzelner Elemente, innerhalb einer DockPanel-Klasse, relativ an/auf/zueinander „andocken“.

Beispiel:

1
2
3
4
5
<DockPanel>
  <Button Height="100" DockPanel.Dock="Top" Content="Button Top" />
  <Button Width="100" DockPanel.Dock="Left" Content="Button Left" />
  <TextBox></TextBox>
</DockPanel>

Grid

Das typische tabellarische Design. Hier im Beispiel zeige ich mit ShowGridLines die Zellen an, damit man die Gridstruktur besser erkennen kann.

ColumnDefinitions definiert die Spalten und RowDefinitions definiert die Zeilen, das Beispiel sollte eigentlich selbsterklärend sein : )

Beispiel:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<Grid ShowGridLines="true">
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="100"  />
    <ColumnDefinition Width="100" />
    <ColumnDefinition Width="100" />
  </Grid.ColumnDefinitions>
 
  <Grid.RowDefinitions>
    <RowDefinition Height="25" />
    <RowDefinition Height="25" />
    <RowDefinition Height="25" />
  </Grid.RowDefinitions>
 
  <Grid Grid.Column="0" Grid.Row="0"><Label>Spalte 1 Reihe 1</Label></Grid>
  <Grid Grid.Column="0" Grid.Row="1"><Label>Spalte 1 Reihe 2</Label></Grid>
  <Grid Grid.Column="0" Grid.Row="2"><Label>Spalte 1 Reihe 3</Label></Grid>
</Grid>


Will man diese Sachen ausprobieren um einfach etwas Gefühl für XAML zu bekommen, kann ich den kostenlosen XAML Editor von kaxaml empfehlen, wo on the fly der Code syntaktisch überprüft wird und das Ergebnis wird sofort angezeigt. Dieser Editor bring auch eine Intellisense mitbringt.

kaxaml

Wer natürlich gleich richtig loslegen möchte, und die Elemente mit Logik versehen will, kann natürlich auch gleich VS benutzen.

Dieser Artikel dient in erster Linie, mich bei dem Erlernen von WPF zu unterstützen, ich möchte damit kürzlich Erlerntes einfach nochmal auffassen und dokumentieren, was mich etwas beim lernen unterstützen soll. Wenn ich das eine oder andere falsch, ungenau oder unvollständig interpretiert habe und Du das besser weisst oder erfahrungsgemäß besser kannst, bitte ich Dich, dieses einfach zu kommentieren. Danke : )

Container-Klassen in WPF
Markiert in:        

Ein Gedanke über “Container-Klassen in WPF

Kommentare sind deaktiviert.