Układ elementów na formie - część 1

Aby kontrolki które położymy na naszej formie znajdowały się dokładnie tam gdzie chcemy, WPF daje nam do dyspozycji szereg komponentów dziedziczących po klasie Panel. Najważniejszymi z nich są:
StackPanel – działa podobnie jak stos znany nam z struktur danych – pozwala na układanie kontrolek w pionie lub poziomie. Przeważnie używany dla małych sekcji bardziej skomplikowanych okien.
Przykłady:

Aby zmienić układ kontrolek na tym rodzaju panelu należy zmienić opcję Orientation.

WrapPanel - pozwala na ułożenie kontrolek jedna za drugą, w przypadku braku miejsca zawija i ustawia w nowym wierszu/kolumnie. Przykład:

Tak jak poprzednio aby zmienić sposób umieszczania elementów zmieniamy atrybut Orientation.

DockPanel - rozciąga kontrolki względem jednego z brzegów. Osiągamy to za pomocą właściwości DockPanel.Dock. Przykład:

W przypadku tego kontenera kolejność dokowania ma znaczenie.

Grid - najbardziej rozbudowany kontener w WPF. To co można osiągnąć w poprzednich kontenerach, można także uzyskać w nim. Grid przechowuje dodane kontrolki w niewidzialnej siatce (aby ją zobaczyć należy ustawić właściwość ShowGridLines na true). Tworzenie wyglądu aplikacji za pomocą Grida można podzielić na 2 części: utworzenie wierszy i kolumn a następnie przypisywanie do odpowiednich komórek elementów tworzących interfejs:

    5 <Grid ShowGridLines="True">

    6         <Grid.ColumnDefinitions>

    7             <ColumnDefinition></ColumnDefinition>

    8             <ColumnDefinition></ColumnDefinition>

    9             <ColumnDefinition></ColumnDefinition>

   10         </Grid.ColumnDefinitions>

   11         <Grid.RowDefinitions>

   12             <RowDefinition></RowDefinition>

   13             <RowDefinition></RowDefinition>

   14             <RowDefinition></RowDefinition>

   15             <RowDefinition></RowDefinition>

   16         </Grid.RowDefinitions>

   17         <Button Grid.Column="1" Grid.Row="2">Jakis przycisk</Button>

   18     </Grid>

Przy domyślnych ustawieniach każdy wiersz i kolumna ma taki sam rozmiar. Jeśli dodamy nowy element (np. Button) a nie sprecyzujemy jego położenia, Grid przyjmie domyślnie 0 dla kolumny i wiersza. Oznacza to też, że w jednej komórce można zamieścić więcej niż jeden element (chociaż na ogół tego się nie stosuje).

Jeśli korzystamy z designera Visuala i dodajemy elementy ręcznie możemy napotkać na kilka problemów.
Visual podczas dodawania nowych elementów do Grida nie tworzy nowych komórek. Umieszcza wszystkie elementy w jednej (0,0). Następnym problemem jest to że podczas umieszczania elementu Visual automatycznie ustawia właściwość Margin. Ustawia go w zależności od bliskości danegowierzchołka Grida. Może to doprowadzić do pewnych nieprawidłowości. Wyobraźmy sobie, że mamy sytuację w której w dwóch ListView chcemy wyświetlić jakieś dane:

    5     <Grid>

    6         <ListView Height="102" Margin="12,12,8,0" Name="listView1" VerticalAlignment="Top" Background="Bisque"/>

    7         <ListView Margin="11,128,7,19" Name="listView2" Background="CadetBlue"/>

    8     </Grid>

Mogłoby się wydawać, że wszystko jest w jak najlepszym porządku. Gdyby jednak użytkownik zechciał rozciągnąć okno aplikacji dostałby następujący wynik:

Raczej na miejscu tego użytkownika nie byłbym zadowolony :)
Jeśli jednak zmodyfikujemy lekko nasz kod:

    5     <Grid>

    6         <Grid.RowDefinitions>

    7             <RowDefinition></RowDefinition>

    8             <RowDefinition></RowDefinition>

    9         </Grid.RowDefinitions>

   10         <ListView Grid.Column="0" Grid.Row="0" Background="Bisque"></ListView>

   11         <ListView Grid.Column="0" Grid.Row="1" Background="CadetBlue"></ListView>

   12     </Grid>

Otrzymamy oto taki efekt:

Szerokość kolumn i wysokość wierszy możemy dostosować w zależności od potrzeb. Dostępne są trzy tryby:
Absolute sizes -  ustawiamy szerokość (wysokość) na dogodną nam wielkość:

    7 <ColumnDefinition Width="100"></ColumnDefinition>

Automatic sizes - wiersze (kolumny) zajmują dokładnie tyle miejsca ile potrzebują:

    7 <ColumnDefinition Width="Auto"></ColumnDefinition>

Proportional sizes - domyślne zachowanie kolumn i wierszy - przestrzeń jest dzielona na równe obszary dla każdej komórki:

    7 <ColumnDefinition Width="*"></ColumnDefinition>

Przestrzeń można także dzielić według własnych proporcji. Przykładowo jeżeli chcielibyśmy aby drugi wiersz miał wysokość 3 razy większą od pierwszego możemy zastosować następującą konstrukcję:

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

    8             <RowDefinition Height="3*"></RowDefinition>

Tyle w części 1. Pozostałe aspekty kontenerów zostaną omówione w części 2.