BITEDU.PL

XAML I Layouty

2.1 Czym jest XAML?

XAML (czytaj: „zamel”) to język znaczników, który służy do opisywania wyglądu aplikacji – czyli tego, co użytkownik widzi na ekranie: przyciski, pola tekstowe, obrazy, układ stron.
W .NET MAUI XAML jest używany zarówno w aplikacjach mobilnych (Android, iOS), jak i desktopowych (Windows, macOS).
Najważniejsze: ten sam kod XAML działa na różnych platformach, choć czasem trzeba go lekko dostosować do konkretnego urządzenia.

2.2 Porównanie do HTML i CSS

HTML/CSSXAML (.NET MAUI)
HTML opisuje strukturę stronyXAML opisuje strukturę aplikacji
CSS nadaje stylW XAML styl i układ są wbudowane w kontrolki lub definiowane w stylach
<button>Kliknij</button><Button Text=”Kliknij”/>


2.3 Struktura dokumentu XAML Visual Studio 2022

<strong><?xml version="1.0" encoding="utf-8" ?></strong>
<strong><ContentPage</strong>
    <strong>xmlns="http://schemas.microsoft.com/dotnet/2021/maui"</strong>
   <strong> xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"</strong>
    <strong>x:Class="obrazy.MainPage"></strong>

Rozbicie kodu:

  • <?xml version=”1.0″ encoding=”utf-8″ ?>:
    • To deklaracja XML, która informuje kompilator, że plik jest dokumentem XML w wersji 1.0 i kodowanie znaków to UTF-8.
  • <ContentPage xmlns=”http://schemas.microsoft.com/dotnet/2021/maui” …>:
    • To tag otwierający element ContentPage.
    • ContentPage jest podstawowym typem strony w .NET MAUI, który będzie służył jako główny kontener dla Twojego interfejsu użytkownika.
  • xmlns=”http://schemas.microsoft.com/winfx/2009/xaml”:
    • Definiuje przestrzeń nazw dla elementów i właściwości XAML.
    • Ta przestrzeń nazw zawiera podstawowe elementy używane do tworzenia interfejsu użytkownika, takie jak StackLayout, Grid, Button, Label itp.
  • x:Class=”obrazy.MainPage”:
    • Definiuje klasę C#, która odpowiada temu plikowi XAML.
    • W tym przypadku klasa nazywa się MainPage i znajduje się w przestrzeni nazw obrazy.
    • Kod C# tej klasy będzie obsługiwał logikę aplikacji i interakcję z elementami interfejsu użytkownika zdefiniowanymi w pliku XAML.

W skrócie:

Te linijki kodu mówią kompilatorowi, że plik jest dokumentem XAML, definiują główny kontener aplikacji (ContentPage) i określają przestrzenie nazw dla elementów i klas, które będą używane w Twojej aplikacji.

2.4 Jak pracować z XAML w Visual Studio 2022?

  • Możesz pisać kod ręcznie w pliku .xaml.
  • Możesz też skorzystać z przybornika (Toolbox) → przeciągnąć i upuścić kontrolkę na stronę.
  • Właściwości kontrolki ustawisz w oknie Właściwości (Properties) – np. tekst przycisku, kolor, rozmiar.
  • Visual Studio automatycznie dopisze odpowiedni kod XAML.

W egzaminie INF.04 często trzeba pisać ręcznie, więc dobrze umieć oba sposoby.

2.5 Layouty – czyli układy ekranu

Layout to kontener, który decyduje, jak mają być rozmieszczone kontrolki.

2.5.1 StackLayout – Układ Stosowy

Opis
• Układa elementy w jednej linii – pionowo (domyślnie) lub poziomo.
• Dobre dla prostych interfejsów np. formularzy, listy przycisków.
• Może spowodować problemy z wydajnością przy dużej liczbie elementów.

VerticalStackLayout – układa elementy jeden pod drugim. 
Idealny do formularzy, list, ekranów logowania.

<VerticalStackLayout Padding="20" Spacing="10">

    <Label Text="Zaloguj się" FontSize="24" FontAttributes="Bold" HorizontalOptions="Center"/>
    <Entry Placeholder="E-mail" WidthRequest="250"/>
    <Entry Placeholder="Hasło" IsPassword="True" WidthRequest="250"/>
    <Button Text="Zaloguj" BackgroundColor="Red" TextColor="White"/>

</VerticalStackLayout>

✅ Elementy są ułożone w pionie – jeden pod drugim.
✅ Padding=”20″ – odstęp od krawędzi ekranu.
✅ Spacing=”10″ – odstęp między elementami.
✅ Dobrze sprawdza się w formularzach!

HorizontalStackLayout (Układ poziomy) – układa elementy obok siebie (poziomo). Idealny do przycisków, ikon, paska nawigacji.

<HorizontalStackLayout Padding="10" Spacing="15" HorizontalOptions="Center">

    <Button Text="Strona Główna" BackgroundColor="Gray" TextColor="White"/>
    <Button Text="O nas" BackgroundColor="Gray" TextColor="White"/>
    <Button Text="Kontakt" BackgroundColor="Gray" TextColor="White"/>

</HorizontalStackLayout>

✅ Elementy są ułożone w poziomie – obok siebie.
✅ Spacing=”15″ – większy odstęp między przyciskami.
✅ Idealny do przycisków nawigacyjnych!

VerticalStackLayout + HorizontalStackLayout (Łączenie)
Możemy łączyć oba układy, np. pionowy layout z poziomym układem przycisków.


Formularz rejestracji z przyciskami akcji

<VerticalStackLayout Padding="20" Spacing="15">

    <Label Text="Rejestracja" FontSize="24" FontAttributes="Bold" HorizontalOptions="Center"/>
    <Entry Placeholder="E-mail"/>
    <Entry Placeholder="Hasło" IsPassword="True"/>

    <!-- Poziome przyciski -->

    <HorizontalStackLayout Spacing="10">

        <Button Text="Anuluj" BackgroundColor="Gray" TextColor="White" WidthRequest="100"/>
        <Button Text="Zarejestruj" BackgroundColor="Red" TextColor="White" WidthRequest="100"/>

    </HorizontalStackLayout>

</VerticalStackLayout>

✅ Formularz rejestracyjny (VerticalStackLayout).
✅ Przyciski są w jednej linii (HorizontalStackLayout).
✅ Dobrze sprawdza się w formularzach i dialogach!

2.5.2 Grid – układ w siatce (wiersze/kolumny)

Opis

  • Najbardziej precyzyjny układ: definiujesz wiersze i kolumny, a potem ustawiasz, w której „komórce” ląduje kontrolka.
  • Idealny do formularzy, kart, paneli z ikoną i opisem.

Formularz logowania w Grid (2 kolumny, 2 wiersze + przycisk przez całą szerokość)

<Grid Padding="20">
    <!-- Definicja układu: 2 wiersze, 2 kolumny -->
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>

    <Label Text="E-mail:" Grid.Row="0" Grid.Column="0" VerticalTextAlignment="Center"/>
    <Entry Placeholder="podaj e-mail" Grid.Row="0" Grid.Column="1"/>

    <Label Text="Hasło:" Grid.Row="1" Grid.Column="0" VerticalTextAlignment="Center"/>
    <Entry IsPassword="True" Placeholder="********" Grid.Row="1" Grid.Column="1"/>

    <Button Text="Zaloguj"
            Grid.Row="2" Grid.ColumnSpan="2"
            BackgroundColor="Red" TextColor="White" Margin="0,10,0,0"/>
</Grid>

✅ RowDefinitions/ColumnDefinitions – ustawiasz szkielet siatki
✅ Auto – tyle miejsca, ile potrzebuje zawartość
✅ * – elastycznie wypełnij resztę (może być też 2*, 3*)
✅ Grid.Row, Grid.Column, Grid.ColumnSpan – pozycjonowanie elementów

Tip INF.04: Grid to najczęstszy wybór w zadaniach egzaminacyjnych z formularzami.

2.5.3 FlexLayout – elastyczny jak CSS Flexbox

Opis

  • Układa elementy w wierszu lub kolumnie, z kontrolą rozmieszczenia i wyrównania.
  • Świetny do pasków przycisków, „kart” i responsywnych paneli.

Pasek akcji (trzy przyciski w jednym rzędzie, równo rozstawione)

<FlexLayout Direction="Row"
            JustifyContent="SpaceBetween"
            AlignItems="Center"
            Padding="16">
    <Button Text="Anuluj"    WidthRequest="110"/>
    <Button Text="Zapisz"    WidthRequest="110"/>
    <Button Text="Wyślij"    WidthRequest="110"/>
</FlexLayout>

✅ Direction=”Row” albo „Column”
✅ JustifyContent (Start, Center, SpaceBetween, SpaceAround) – rozmieszczenie w osi głównej
✅ AlignItems (Start, Center, End, Stretch) – wyrównanie w osi poprzecznej


Karta z obrazkiem i opisem (Row + zawijanie)

<FlexLayout Direction="Row" Wrap="Wrap" AlignItems="Center">
    <Image Source="avatar.png" WidthRequest="64" HeightRequest="64" Margin="0,0,12,0"/>
    <Label Text="Jan Kowalski – krótki opis użytkownika" WidthRequest="220" Margin="0,0,12,0"/>
    <Button Text="Profil"/>
</FlexLayout>

✅ Wrap=”Wrap” – gdy zabraknie miejsca, elementy zawijają do nowej linii
✅ Idealny do „pływających” układów

2.5.4 AbsoluteLayout – pozycje „na sztywno” lub procentowo

Opis

  • Umożliwia ustawianie elementów w konkretnych współrzędnych lub proporcjonalnie do rozmiaru.

Nagłówek na górze + napis wyśrodkowany procentowo

<AbsoluteLayout>
    <!-- Pasek nagłówka (20% wysokości, pełna szerokość) -->
    <BoxView Color="#222"
             AbsoluteLayout.LayoutBounds="0,0,1,0.2"
             AbsoluteLayout.LayoutFlags="All"/>

    <!-- Tytuł wycentrowany (pozycja 50%/10%) -->
    <Label Text="Panel ustawień" TextColor="White" FontSize="24"
             
         AbsoluteLayout.LayoutBounds="0.5,0.1,AutoSize,AutoSize"
         AbsoluteLayout.LayoutFlags="PositionProportional"
</AbsoluteLayout>

✅ LayoutBounds=”x,y,width,height” + LayoutFlags (All / PositionProportional / SizeProportional)
✅ Używaj rozsądnie – trudniej utrzymać responsywność niż w Grid/Flex

2.5.5 ScrollView – zawartość przewijalna

Opis

  • Zawija jeden element potomny, który zwykle jest layoutem z wieloma kontrolkami.
  • Gdy formularz jest długi → must have na telefonie.
<ScrollView>
    <VerticalStackLayout Padding="20" Spacing="12">
        <Label Text="Długi formularz" FontAttributes="Bold" FontSize="22"/>
        <!-- …dużo pól… -->
        <Entry Placeholder="Adres e-mail"/>
        <Entry Placeholder="Telefon"/>
        <Entry Placeholder="Ulica i numer"/>
        <Entry Placeholder="Miasto"/>
        <Entry Placeholder="Kod pocztowy"/>
        <!-- …itd. -->
        <Button Text="Zapisz" BackgroundColor="Red" TextColor="White"/>
    </VerticalStackLayout>
</ScrollView>

✅ Tylko jeden bezpośredni „dziecko” – w środku daj VerticalStackLayout/Grid
✅ Dzięki temu zawartość przewija się, zamiast „ucinać” na małym ekranie

2.5.6 ContentView – prosty kontener / blok wielokrotnego użytku

Opis

  • Opakowanie na fragment interfejsu, który chcesz wydzielić lub wielokrotnie użyć.
<ContentView Padding="12" BackgroundColor="#EEF6FF">
    <HorizontalStackLayout Spacing="10">
        <Image Source="info.png" WidthRequest="20" HeightRequest="20"/>
        <Label Text="Twoje zmiany zostały zapisane." TextColor="#0A3D91"/>
    </HorizontalStackLayout>
</ContentView>

✅ Dobre do „paneli informacyjnych”, kart, sekcji, które pojawiają się w kilku miejscach

2.5.7 „Canvas” w MAUI → 

GraphicsView  (rysowanie)

Opis

  • W MAUI nie ma klasycznego „Canvas layout” jak w WPF; odpowiednikiem do rysowania 2D jest GraphicsView.
  • Służy do rysowania kształtów, linii, wykresów, animacji – nie do układania typowych formularzy.
  • Na INF.04 pojawia się bardzo rzadko – traktuj jako ciekawostkę.
<GraphicsView x:Name="rysunek" HeightRequest="200" WidthRequest="200"/>

Żeby coś się narysowało, przypisujesz Drawable w C# i rysujesz w metodzie Draw.

Do układów typowo egzaminowych wybieraj Grid/Flex/Stack.

2.5.8 Kiedy którego użyć? (ściąga pod INF.04)

  • Grid – formularze, układ „etykieta + pole”, panele 2–3 kolumnowe.
  • Vertical/HorizontalStackLayout – szybkie układy liniowe: formularze, paski przycisków.
  • FlexLayout – elastyczne paski akcji, „kafelki”, zawijanie elementów.
  • AbsoluteLayout – rzadko; gdy naprawdę musisz „przykleić” coś w konkretne miejsce.
  • ScrollView – długie formularze na telefonie (koniecznie!).
  • ContentView – gdy chcesz wydzielić powtarzalny fragment UI.
  • GraphicsView (Canvas) – rysowanie, wykresy, graficzne bajery (poza typowym zakresem INF.04).

Drobna checklista dla uczniów

  • Ustal główny layout strony (zwykle Grid albo VerticalStackLayout).
  • Dodaj Spacing/Padding – od razu wygląda lepiej.
  • Na telefonie zawsze przetestuj, czy nie potrzebujesz ScrollView.
  • W Grid pamiętaj o Auto vs. * i o ColumnSpan/RowSpan.
  • W Flex baw się JustifyContent/AlignItems, żeby uzyskać ładne rozłożenie.