XAML

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.

1. 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!

2. 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!

3. 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!

Grid – Układ Siatkowy

Opis

• Dzieli ekran na wiersze i kolumny.

• Idealny do bardziej złożonych interfejsów np. układu aplikacji Netflixa.

• Precyzyjna kontrola nad rozmieszczeniem elementów.

<Grid>

    <!-- Definiujemy 2 kolumny i 2 wiersze -->

    <Grid.ColumnDefinitions>

        <ColumnDefinition Width="Auto"/>

        <ColumnDefinition Width="*"/>

    </Grid.ColumnDefinitions>

    <Grid.RowDefinitions>

        <RowDefinition Height="Auto"/>

        <RowDefinition Height="*"/>

    </Grid.RowDefinitions>

    <!-- Obrazek (1. kolumna, 1. wiersz) -->

    <Image Source="user_icon.png" Grid.Row="0" Grid.Column="0"/>

    <!-- Pole E-mail (2. kolumna, 1. wiersz) -->

    <Entry Placeholder="Wpisz e-mail" Grid.Row="0" Grid.Column="1"/>

    <!-- Przycisk (rozciąga się na cały wiersz 2) -->

    <Button Text="Zaloguj się" Grid.Row="1" Grid.ColumnSpan="2"/>

</Grid>

✔️ Dzieli ekran na wiersze i kolumny → lepsza organizacja UI.

✔️ Width="*" – druga kolumna zajmuje całą szerokość.

✔️ Idealny do responsywnych układów np. ekranów logowania.

FlexLayout – Układ Elastyczny

Opis

• Pozwala na elastyczne rozmieszczanie elementów.

• Można używać wyrównania podobnego do CSS Flexbox.

• Dobrze działa dla responsywnych aplikacji.

<FlexLayout Direction="Row" JustifyContent="SpaceAround">

    <Button Text="Opcja 1"/>

    <Button Text="Opcja 2"/>

    <Button Text="Opcja 3"/>

</FlexLayout>

Przykład FlexLayout w .NET MAUI, który zawiera:

✅ 2 przyciski

✅ 3 pola Entry

✅ 3 etykiety (Label)

✅ Czerwoną linię (BoxView)

✅ Adres e-mail pod linią

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

             x:Class="FlexApp.MainPage"

             BackgroundColor="Black">

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

        <!-- Trzy etykiety -->

        <Label Text="Imię" TextColor="White"/>

        <Entry Placeholder="Wpisz imię" TextColor="White" BackgroundColor="Transparent"/>

        <Label Text="Nazwisko" TextColor="White"/>

        <Entry Placeholder="Wpisz nazwisko" TextColor="White" BackgroundColor="Transparent"/>

        <Label Text="Hasło" TextColor="White"/>

        <Entry Placeholder="Wpisz hasło" IsPassword="True" TextColor="White" BackgroundColor="Transparent"/>

        <!-- Przestrzeń między polami a przyciskami -->

        <BoxView HeightRequest="20" Color="Transparent"/>

        <!-- Poziomy układ przycisków -->

        <FlexLayout Direction="Row" JustifyContent="SpaceBetween">

            <Button Text="Anuluj" BackgroundColor="Gray" TextColor="White" WidthRequest="120"/>

            <Button Text="Zarejestruj" BackgroundColor="Red" TextColor="White" WidthRequest="120"/>

        </FlexLayout>

        <!-- Linia oddzielająca -->

        <BoxView HeightRequest="2" BackgroundColor="Red" Margin="0,20,0,0"/>

        <!-- Adres e-mail pod linią -->

        <Label Text="kontakt@przyklad.com" TextColor="Gray" FontSize="14" HorizontalOptions="Center"/>

    </VerticalStackLayout>

</ContentPage>

✅ VerticalStackLayout → Ustawia wszystkie elementy pionowo.

✅ FlexLayout (Direction=“Row”) → Umieszcza przyciski obok siebie.

✅ JustifyContent="SpaceBetween" → Rozsuwa przyciski na boki.

✅ BoxView → Czerwona linia oddzielająca formularz od e-maila.

✅ Styl Netflixa – czarne tło, czerwone akcenty, nowoczesny wygląd.

 <!-- Pole tekstowe -->

Entry w .NET MAUI to kontrolka służąca do wprowadzania tekstu, np. w formularzach logowania, rejestracji czy wyszukiwania.

        <Entry x:Name="MyEntry"

               Placeholder="Wpisz tekst tutaj..."

               FontSize="16"/>

Najczęściej używanych właściwości i metod, wraz z wyjaśnieniem i przykładem.

1️ Placeholder

➡️ Tekst podpowiedzi, widoczny gdy pole jest puste.

<Entry Placeholder="Wpisz e-mail"/>

2️ Text

➡️ Zawartość pola Entry – użytkownik wpisuje tu tekst.

<Entry x:Name="EmailEntry"/>

3️ IsPassword

➡️ Ukrywa wpisywany tekst (np. do haseł).

<Entry IsPassword="True" Placeholder="Wpisz hasło"/>

4 TextColor

➡️ Zmienia kolor tekstu.

<Entry TextColor="Red" Placeholder="Błąd!"/>

5 BackgroundColor

➡️ Zmienia kolor tła Entry.

<Entry BackgroundColor="LightGray" Placeholder="Wpisz coś..."/>

6. IsReadOnly

➡️ Pole tylko do odczytu – użytkownik nie może wpisać niczego.

<Entry Text="To jest tylko do odczytu" IsReadOnly="True"/>

 <!-- Etykieta -->

Label w .NET MAUI to kontrolka do wyświetlania tekstu. Można nią formatować, kolorować, animować i dynamicznie zmieniać treść.

        <Label x:Name="MyLabel" 

               Text="To jest Label"

               FontSize="18"

               Padding="5"/>

1. Text 

➡️ Określa tekst wyświetlany w kontrolce Label.

<Label Text="Witaj w aplikacji!"/>

2.  FontSize

➡️ Określa wielkość czcionki.

<Label Text="Duży tekst" FontSize="24"/>

3. FontAttributes

➡️ Ustawia styl czcionki (Bold, Italic, None).

<Label Text="Pogrubiony tekst" FontAttributes="Bold"/>

4. TextColor

➡️ Zmienia kolor tekstu.

<Label Text="Czerwony tekst" TextColor="Red"/>

5. BackgroundColor

➡️ Zmienia tło etykiety.

<Label Text="Tekst na żółtym tle" BackgroundColor="Yellow"/>

6. HorizontalTextAlignment & VerticalTextAlignment

➡️ Zmienia wyrównanie tekstu (Start, Center, End).

<Label Text="Wyśrodkowany" HorizontalTextAlignment="Center"/>

7. Padding & Margin

➡️ Dodaje odstępy wewnętrzne i zewnętrzne.

  <Label Text="Tekst z paddingiem" Padding="10"/>

 <Label Text="Tekst z marginesem" Margin="20"/>

8.  MaxLines

➡️ Określa maksymalną liczbę linii tekstu.

 <Label Text="Tekst, który nie przekroczy 2 linii" MaxLines="2"/>

<!-- Przycisk -->

        <Button x:Name="MyButton" 

                Text="Kliknij mnie" 

                Clicked="MyButton_Click" />

        <!-- Przycisk do załadowania obrazka -->

        <Button Text="Załaduj obrazek"

                Clicked="LoadImage_Click"/>

<!-- Obrazek -->

        <Image x:Name="MyImage"

               HeightRequest="150"

               WidthRequest="150"

               Aspect="AspectFit"/>

BoxView – linia pod polem tekstowym (jak w nowoczesnych aplikacjach)

<BoxView HeightRequest="1" BackgroundColor="Red"/>