WPF oferuje kilka pojemników, które pomagają przy tworzeniu wyglądu naszego okna. W tym poście omówimy je sobie. Zaczynajmy.

Canvas

To podstawowy pojemnik na kontrolki. Udostępnia cztery attached properties za pomocą, których możemy ustawić pozycję kontrolki. Canvas.Left, Canvas.Top, Canvas.Right, Canvas.Bottom. Left, Top mają pierwszeństwo nad Bottom, Right.Używa się tego tak:

<Canvas>                       

    <Button Content=”Przycisk” Canvas.Bottom=”100″ Canvas.Right=”90″/>

    <Button Content=”Przycisk” Canvas.Left=”100″ Canvas.Bottom=”90″/>

Canvas>

Dodatkowo Canvas definiuje właściwość ZIndex, za pomocą, której możemy ustawić kolejność kontrolek na osi Z.

StackPanel

StackPanel pozwala w łatwy sposób ułożyć kontrolki w stos. Wspiera zarówno stos pionowy (domyślnie) jak i poziomy. Tryb zmieniamy za pomocą właściwości Orientation.

<StackPanel>                       

    <Button Content=”Przycisk 1″ />

    <Button Content=”Przycisk 2″ />

    <Button Content=”Przycisk 3″ />

    <Button Content=”Przycisk 4″ />

StackPanel>

Jeśli zmienimy Orientation na Horizontal będzie to wyglądało tak:

WrapPanel

WrapPanel pozwala na ułożenie kontrolek kolejno jedna za drugą a dodatkowo w przypadku, gdy ilość kontrolek jest większa niż może pomieścić pojemnik w jednym rzędzie, “zawija je” i są one układane w kolejnym wierszu. Wygląda to tak:

<WrapPanel>                       

    <Button Content=”Przycisk 1″ />

    <Button Content=”Przycisk 2″ />

    <Button Content=”Przycisk 3″ />

    <Button Content=”Przycisk 4″ />

    <Button Content=”Przycisk 5″ />

    <Button Content=”Przycisk 6″ />

WrapPanel>

Elementy układane są standardowo od lewej do prawej. Można to zmienić właściwością Orientation i mieć je ułożone od góry do dołu. Jeśli ustawimy FlowDirection na RightToLeft, kontrolki są układane od prawej do lewej.

DockPanel

Ten pojemnik umożliwia “przyczepienie” kontrolki, do jednej z czterech stron. Udostępnia on właściwość DockPanel.Dock za pomocą, której definiujemy do które ze stron kontrolka ma być przyczepiona.

<DockPanel>                       

    <Button Content=”Przycisk 1″ DockPanel.Dock=”Top” />

    <Button Content=”Przycisk 2″ DockPanel.Dock=”Left”/>       

    <Button Content=”Przycisk 4″ DockPanel.Dock=”Right” />       

    <Button Content=”Przycisk 6″ DockPanel.Dock=”Bottom”/>

    <Button Content=”Przycisk 5″ />

DockPanel>

Widzimy, że żadna z kontrolek nie ma ustawionej wartości na Fill a jest wypełniona cała przestrzeń. Domyślnie ostatnio dodana kontrolka wypełnia całą pozostałą przestrzeń. Możemy to zachowanie zmienić poprzez ustawienie false dla właściwości LastChildFill.

Grid’a ze względu na rozległość tematu omówię w oddzielnym odcinku.