StackLayout w XAML

Słownik kwalifikacji INF.04 - Projektowanie, programowanie i testowanie aplikacji

StackLayout to kontener układu w XAML, często używany w aplikacjach Xamarin.Forms / .NET MAUI. Jego zadaniem jest rozmieszczanie elementów potomnych jeden po drugim: pionowo albo poziomo.

Domyślne działanie

Jeżeli nie podano właściwości Orientation, StackLayout układa elementy pionowo, czyli jeden pod drugim.

<StackLayout>
    <Label Text="Imię:" />
    <Entry />
    <Button Text="Zapisz" />
</StackLayout>

Efekt: etykieta, pole tekstowe i przycisk zostaną wyświetlone w jednej kolumnie.

Orientation

Najważniejszą właściwością jest Orientation:

  • Vertical - elementy są ułożone od góry do dołu,
  • Horizontal - elementy są ułożone od lewej do prawej.

Przykład układu poziomego:

<StackLayout Orientation="Horizontal">
    <Label Text="Zgoda RODO" />
    <Switch IsToggled="True" />
</StackLayout>

W takim przypadku napis i przełącznik pojawią się w jednym wierszu.

Zagnieżdżanie StackLayout

StackLayout może zawierać inne StackLayout. Pozwala to tworzyć bardziej złożone widoki, np. formularz pionowy, w którym jeden fragment jest ułożony poziomo.

<StackLayout>
    <Entry Placeholder="Imię:" />
    <Entry Placeholder="Nazwisko:" />

    <StackLayout Orientation="Horizontal">
        <Label Text="Zgoda RODO" />
        <Switch IsToggled="True" />
    </StackLayout>

    <Slider Value="0.5" />
    <Button Text="Zapisz" />
</StackLayout>

Znaczenie w zadaniach egzaminacyjnych

W pytaniach z XAML często trzeba przewidzieć wygląd interfejsu na podstawie kodu. Należy zwracać uwagę na:

  • kolejność elementów w kodzie,
  • orientację kontenera,
  • zagnieżdżone układy,
  • wartości właściwości, np. Text, Placeholder, IsToggled, Value.

W analizowanym kodzie główny StackLayout układa elementy pionowo, a wewnętrzny StackLayout Orientation="Horizontal" ustawia obok siebie etykietę „Zgoda RODO” oraz przełącznik.