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

Wracając do tematu kontenerów na nasze kontrolki, zanim opisze jeszcze inne, kilka aspektów Grida o których jeszcze nie wspominałem.

Elementy które tworzymy w Gridzie możemy przykładowo rozciągnąć na kilka komórek czy kolumn. Przykładowo utworzony przycisk:

    5     <Grid>

    6         <Grid.RowDefinitions>

    7             <RowDefinition></RowDefinition>

    8             <RowDefinition></RowDefinition>

    9             <RowDefinition></RowDefinition>

   10             <RowDefinition></RowDefinition>

   11             <RowDefinition></RowDefinition>

   12             <RowDefinition></RowDefinition>

   13             <RowDefinition></RowDefinition>

   14         </Grid.RowDefinitions>

   15         <Grid.ColumnDefinitions>

   16             <ColumnDefinition></ColumnDefinition>

   17             <ColumnDefinition></ColumnDefinition>

   18             <ColumnDefinition></ColumnDefinition>

   19             <ColumnDefinition></ColumnDefinition>

   20             <ColumnDefinition></ColumnDefinition>

   21         </Grid.ColumnDefinitions>

   22         <Button Grid.Row="1" Grid.Column="1" Content="Klik"></Button>

   23     </Grid>

Możemy rozciągnąć na sąsiadującą komórkę i kolejny wiersz:

    5     <Grid>

    6         <Grid.RowDefinitions>

    7             <RowDefinition></RowDefinition>

    8             <RowDefinition></RowDefinition>

    9             <RowDefinition></RowDefinition>

   10             <RowDefinition></RowDefinition>

   11             <RowDefinition></RowDefinition>

   12             <RowDefinition></RowDefinition>

   13             <RowDefinition></RowDefinition>

   14         </Grid.RowDefinitions>

   15         <Grid.ColumnDefinitions>

   16             <ColumnDefinition></ColumnDefinition>

   17             <ColumnDefinition></ColumnDefinition>

   18             <ColumnDefinition></ColumnDefinition>

   19             <ColumnDefinition></ColumnDefinition>

   20             <ColumnDefinition></ColumnDefinition>

   21         </Grid.ColumnDefinitions>

   22         <Button Grid.Row="1" Grid.Column="1" Content="Klik" Grid.ColumnSpan="2" Grid.RowSpan="2"></Button>

   23     </Grid>

Grid posiada tzw. GridSplitter. Dzięki niemu w łatwy sposób jesteśmy w stanie podzielić okno na części i powiększać/zmniejszać je. Używanie GridSplittera może okazać się na początku mało intuicyjne, jednak nic mylnego. GridSplittera możemy umieścić w komórce razem z inną zawartością, jednak w większości przypadków rezerwuje się dla niego osobną kolumnę lub wiersz z wysokością lub szerokością ustawioną na Auto. Podczas zmiany szerokości/wysokości zmieniamy szerokość/wysokość nie pojedynczej komórki, a całej kolumny/wiersza. Należy też nadać jakąś szerokość/wysokość GridSplitterowi, gdyż w przeciwnym razie będzie niezwykle mały i nie poręczny. W zależności od tego jaki chcemy uzyskać efekt przy zmianie wartości szerokości czy też wysokości wierszy, należy odpowiednio ustawić VerticalAligment lub HorizontalAligment na jedną z wartości (jeśli ustawimy Center to mamy możliwość zmniejszania/zwiększania w obie strony).

To tyle jeżeli chodzi o Grid. Jest to jedna z najbardziej rozbudowanych i uniwersalnych kontrolek w WPF.

Canvas
Canas jest jedynym kontenerem który przechowuje położone na nim elementy zapamiętując ich położenie względem lewej i górnej krawędzi (alternatywnie można zapamiętywać prawą i dolną krawędź). Nie jest to najlepsze rozwiązanie jeżeli chodzi o wszechstronność aplikacji.

InkCanvas
Podobnie jak Canvas kontrolki położone na InkCanvas zapamiętywane są na formatce poprzez koordynaty. Zasada działania tego kontenera jest podobna jest do używania tabletu graficznego. W zależności od wybranego trybu możemy malować po nim lub przeciągać elementy.
Najpopularniejsze wykorzystanie, czyli jako podkład do malowania został przedstawiony na poniższym screenie:

Kod:

    1     <InkCanvas EditingMode="Ink">

    2

    3     </InkCanvas>

Zmieniając właściwość EditingMode można uzyskać inne efety:
Ink - domyślny tryb, pozwala na malowanie
GestureOnly - pozwala wykorzytsać gesty myszy (pełen spis znaleźć można w typie wyliczeniowym System.Windows.Ink.ApplicationGesture)
InkAndGesture - połączenie trybu Ink i GestureOnly
EraseByStroke - wymazywanie narysowanego całego kształtu (wymazuje kształt narysowany "jednym pociągnięciem)
EraseByPoint - wymazuje konkretny punkt
Select - pozwala na zaznaczanie elementów przechowywanych w InkCanvas. Zaznaczanie odbywa się poprzez zarzucenie "lassa" na wybrany element (podobnie jak w paincie). Zaznaczony element można zmniejszać/zwiększać, przesuwać, usunąć.
None - zmienia InkCanvas w zwyczajny Canvas


Tyle jeśli chodzi o kontenery mogące przechowywać kontrolki w WPF. W następnej części przyjrzymy się zawartości kontrolek.