Układanie elementów w XAMLu

Typy kontrolek-kontenerów

Piotr Wandycz

Nie ma dla mnie przyjemniejszego sposobu tworzenia widoczków niż pisanie w XAMLu (czyt. zamlu). Swoją przygodę z programowaniem zaczynałem od Windows Phone 7, robiłem aplikacje natywne na Windows 8.1 czy na desktop w WPF. Wszystkie te technologie były oparte o XAML i zawsze dobrze mi się z nimi pracowało. W przeciwieństwie do wiecznie rozjeżdżającego się HTML’a 🙂

W teorii istnieje sześć typów kontrolek, umożliwiających układanie elementów, ale w praktyce wystarczy nauczyć się dwóch – Grida i StackPanelu. A reguła jest prosta: potrzebujesz umieścić rzeczy obok siebie lub pod sobą – StackPanel, w innym wypadku Grid.

StackPanel umożliwia grupowanie kontrolek w pionie (domyślnie) lub w poziomie. Kontrolka ta ma dwie alternatywne wersje. WrapPanel – elementy niemieszczące się zostaną zawinięte do następnej kolumny / wiersza. Ani razu w życiu nie miałem potrzeby skorzystania z tego komponentu. DockPanel – umożliwia przypięcie elementu/-ów do wskazanej przez nas części ekranu, np. prawej strony okna. Tej kontrolki użyłem jeden raz, ale już nie pamiętam do czego. Przykładowy kod:

Grid jest zdecydowanie potężniejszym narzędziem. Pozwala na definicję wierszy i kolumn, a następnie wskazanie elementom, jakie jest ich dokładne położenie. Istnieją trzy jednostki, jakimi się posługujemy przy definiowaniu siatki: liczba, gwiazdka i Auto. Auto oznacza, że wiersz zajmie tyle miejsca, ile największy element w nim się znajdujący. Liczba to po prostu ilość pikseli. Najciekawszą opcją są gwiazdki, bo jest to ustawianie pozostałej części ekranu proporcjonalnie. Jeśli mamy trzy kolumny, o wysokości: 50, 2* i 3*, to aplikacja utworzy kolumnę na 50 pikseli, a pozostałą część ekranu podzieli na dwie kolumny w stosunku do siebie 2 do 3. Elementy siatki mogą dostać też właściwość RowSpan / ColumnSpan, jeśli chcemy rozciągnąć ich wielkość poza domyślną jedną. Np. element w zerowym wierszu, w pierwszej kolumnie, oraz ma szerokość dwóch kolumn (widoczne na obrazku poniżej).

Grid jest domyślnym kontenerem, widocznym po utworzeniu projektu WPF. Przeważnie wystarcza jeden na stronę, choć nie ma żadnego problemu z zagnieżdżaniem w sobie następnych. Po 10 latach od napisania pierwszej aplikacji na Windows Phone uparcie będę twierdził, że Grid + StackPanel wystarczą do wszystkiego, co sobie wymyślimy. Z nadejściem WebAssembly (WASM) pojawiła się nadzieja, że będzie można robić widoczki do aplikacji internetowych, przy użyciu XAMLa. Bardzo interesująco wygląda platform.uno.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="100" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <TextBlock Grid.Row="0" Grid.Column="0" Text="Bla bla"/>
    <StackPanel Grid.Row="1" Grid.Column="1" Orientation="Horizontal" VerticalAlignment="Center">
        <TextBlock Text="Cza " />
        <TextBlock Text="cza " />
        <TextBlock Text="cza" />
    </StackPanel>
</Grid>

Istnieje też kontrolka Canvas, gdzie ustawiamy elementy “pixel perfect”. Wskazujemy o ile pikseli są oddalone, np. od lewej i od góry. Jest to chyba ukłon w stronę programistów WinForms. Ten sam efekt możemy osiągnąć, stosując Grid i właściwość Margin. Zwłaszcza że tylko niewielki procent musi być tak doprecyzowany, a reszta musi być responsywna.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *