Mit WPF wird ein komplett neues LayoutSystem für Windows eingeführt. Neu handelt es sich um ein „Flow-Based“ Layout, wie man es bisher z.B. von HTML her kennt. Das Koordinatenbasierte Layout wird nur rudimentär unterstützt. Der Vorteil im Flow-Layout liegt in der Auflösungs-Unabhängigen GUI Entwicklung. Unabhängig von der Grösse der Monitorauflösung, passt sich das Layout automatisch an.

Dieses System bedeutet, dass die Angaben von Height und Width eines Controls nicht mit der tatsächlichen Grösse übereinstimmen müssen. Um die aktuelle, tatsächliche Grösse festzustellen, müssen die zwei Properties ActualHeight und ActualWidth verwendet werden.

Layout Prozess

Zwei wichtige Prozesse werden nacheinander ausgeführt:

measure
arrange

Beim measure Prozess prüft der Container all seine Childs und prüft deren bevorzugte Grösse. Im arrange Prozess werden diese Childs im Container in der geeigneten Position arrangiert.

Core Layout Controls

StackPanel
WrapPanel
DockPanel
Grid
UniformGrid
Canvas

StackPanel

Der einfachste aller Container arrangiert seine Kinder entweder in horizontaler, oder vertikaler Richtung. Die Child-controls werden auf den Vorhandenen Platz gedehnt. Vertikal, oder Horizontal – je nach Orientation des StackPanels.

WrapPanel

Das WrapPanel platziert seine Controls innerhalb des vorhanden Platzes entweder horizontal oder vertikal. Ist der verfügbare Platz zu klein, werden die Controls auf eine neue Zeile/Spalte umgebrochen.

DockPanel

Dieser Container dehnt seine Controls bis zu seiner eignen Grösse.

Child Dock Optionen:

Top
Bottom
Left
Right

Das DockPanel selbst kann noch die Option LastChildFill gesetzt bekommen.

<DockPanel LastChildFill="True"> 
  <Button DockPanel.Dock="Top">A Stretched Top Button</Button> 
  <Button DockPanel.Dock="Top" HorizontalAlignment="Center"> 
   A Centered Top Button</Button> 
  <Button DockPanel.Dock="Top" HorizontalAlignment="Left"> 
   A Left-Aligned Top Button</Button> 
  <Button DockPanel.Dock="Bottom">Bottom Button</Button> 
  <Button DockPanel.Dock="Left">Left Button</Button> 
  <Button DockPanel.Dock="Right">Right Button</Button> 
  <Button>Remaining Space</Button> 
</DockPanel>

Grid

Das Grid entspricht im Grunde einer Tabelle mit Zeilen und Spalten. Die Zellen können wei bei einer Tabelle mit span auch verbunden werden. Ein Grid wird immer vordefiniert mit RowDefinitions und ColumnDefinitions.

Im Gegensatz zum StackPanel und WrapPanel werden die Controls innerhalb einer Zelle eingepasst. Es werden keine impliziten Zeilen oder Spalten erzeugt wie beim StackPanel oder WrapPanel.

Grösseneinstellungen von Rows und Columns

Es gibt drei Möglichkeiten:

Absolute Grösse : Width=“100″
Automatische Grösse : Width =“Auto“
Proportionale Grösse : Width = „*“ / Width=“2*“

Bei den Proportionalen Grössen ist die Zahl der Faktor.

<RowDefinition Height="*"></RowDefinition> 
<RowDefinition Height="2*"></RowDefinition>

Bei diesem Beispiel wird die zweite Zeile immer doppelt so gross wie die erste Zeile gerendert.

Werden keine Grössen angegeben, dann werden immer proportional gleich grosse Zellen erzeugt. Die Auto-Angabe reduziert oder vergrössert u.U die Grösse auf Grund des Inhaltes.

Layout Rounding

Durch die Auflösungs-Unabhängigkeit von WPF kann es Probleme mit Grössen mit Kommastellen wie z.B. 23.4 Pixel geben. Dieser Umstand kann bewirken, dass unschärfen bei der Darstellung (Antialiasing) entstehen kann. Die Option UseLayoutRounding kann diesem Problem begegnen und erzwingt, dass die Grössenwerte auf ganze Pixelzahlen gerundet werden.

Layout