---

1.1 Koncepcja działania .NET MAUI

.NET MAUI (Multi-platform App UI) to framework stworzony przez Microsoft.

Najważniejsza jego cecha: jeden program = wiele systemów i urządzeń.

• Piszesz jedną aplikację w C# i XAML.
• Możesz ją uruchomić:
  • na telefonie z Androidem,
  • na iPhonie z iOS,
  • na komputerze z Windows,
  • na MacBooku z MacOS.
• Dzięki temu nie musisz pisać osobnych aplikacji dla każdego systemu.

Typy aplikacji, jakie można tworzyć w MAUI:

• Mobilne – działające na Androidzie i iOS (np. kalkulator, notatnik, organizer).
• Desktopowe – działające na Windows i MacOS (np. aplikacja biurowa, gra edukacyjna).
• Hybrydowe – jeden projekt, który możesz uruchomić i na komputerze, i na telefonie.

1.2 Środowisko pracy

Do pracy używamy:

• Visual Studio 2022 (najlepiej wersja Community – darmowa),
• pakiety do .NET MAUI (instalujemy przy instalacji VS),
• emulator Androida albo własny telefon podłączony kablem USB.

---

1.3 Tworzymy pierwszy projekt

1. Otwórz Visual Studio 2022.
2. Kliknij Nowy projekt.
3. Wyszukaj .NET MAUI App i wybierz go.
4. Nadaj nazwę projektu, np. PierwszaAplikacjaMaui.
5. Kliknij Utwórz.

Po chwili zobaczysz gotowy szablon aplikacji.

1.4 Struktura projektu w .NET MAUI (uzupełniona)

Po utworzeniu nowego projektu w Visual Studio widzimy kilka ważnych plików i folderów:

• Program.cs – punkt startowy aplikacji. To tutaj zaczyna się uruchamianie programu. Zawiera kod konfiguracji aplikacji i tworzy główne okno.
• App.xaml – plik XAML z zasobami globalnymi (np. style dla całej aplikacji).
• App.xaml.cs – logika startowa aplikacji (np. która strona ma się pokazać jako pierwsza).
• AppShell.xaml – plik XAML odpowiedzialny za nawigację między stronami aplikacji. W MAUI najczęściej korzysta się z Shell Navigation – dzięki temu można łatwo przełączać się między ekranami (np. Strona Główna, Ustawienia, Profil).
• AppShell.xaml.cs – logika nawigacji i ustawienia powiązane z AppShell.
• MainPage.xaml – interfejs głównej strony aplikacji (XAML).
• MainPage.xaml.cs – logika strony (C#).
• Resources – katalog z zasobami (obrazki, czcionki, style, kolory).
  • Resources/Fonts – własne czcionki do aplikacji.
  • Resources/Images – grafiki i ikonki.
  • Resources/Styles – pliki stylów XAML.
  • Resources/Raw – pliki specjalne (np. JSON, które chcemy dołączyć w oryginalnej formie).
• Platforms – kod specyficzny dla danego systemu (np. Android, iOS). Na egzaminie zazwyczaj tu nic nie zmieniamy.

Rola AppShell**

• AppShell działa jak „mapa aplikacji” – mówi, jakie strony są w aplikacji i jak można się między nimi poruszać.
• Dzięki temu nie trzeba ręcznie pisać skomplikowanej nawigacji – wystarczy zdefiniować strony w AppShell i odwoływać się do nich po nazwie.
• Przykład prostego AppShell.xaml:

<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       x:Class="PierwszaAplikacjaMaui.AppShell">

    <!-- Definicja stron w aplikacji -->
    <ShellContent Title="Strona główna" ContentTemplate="{DataTemplate local:MainPage}" />

</Shell>

1.5 Pierwszy program w XAML

<!-- ContentPage to główna strona aplikacji -->
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="PierwszaAplikacjaMaui.MainPage">

    <!-- VerticalStackLayout ustawia elementy jeden pod drugim -->
    <VerticalStackLayout Padding="30" Spacing="20">

        <!-- Etykieta (tekst statyczny) -->
        <Label Text="Witaj w .NET MAUI!"
               FontSize="26"
               HorizontalOptions="Center" />

        <!-- Pole tekstowe, do wpisania danych -->
        <Entry x:Name="poleTekstowe"
               Placeholder="Wpisz swoje imię"
               FontSize="18" />

        <!-- Przycisk, po kliknięciu uruchomi metodę w C# -->
        <Button Text="Kliknij mnie"
                Clicked="OnButtonClicked" />

        <!-- Etykieta, w której pokaże się wynik działania programu -->
        <Label x:Name="etykietaWynik"
               FontSize="22"
               TextColor="DarkBlue"
               HorizontalOptions="Center" />

    </VerticalStackLayout>
</ContentPage>

1.6 Kod w C# 

namespace PierwszaAplikacjaMaui;

// 'partial class' oznacza, że klasa jest podzielona na dwie części:
// 1. część w pliku XAML (MainPage.xaml),
// 2. część w pliku C# (MainPage.xaml.cs).
// Obie razem tworzą jedną klasę MainPage.

public partial class MainPage : ContentPage
{
    // Konstruktor klasy MainPage.
    // Wywoływana jest metoda InitializeComponent(), która:
    // - odczytuje kod XAML,
    // - tworzy wszystkie kontrolki (Label, Button, Entry),
    // - łączy je z logiką w C#.

    public MainPage()
    {
        InitializeComponent();
    }

    // Metoda obsługująca kliknięcie przycisku.
    // 'object sender' to element, który wywołał zdarzenie (np. Button),
    // 'EventArgs e' to dodatkowe informacje o zdarzeniu.

    private void OnButtonClicked(object sender, EventArgs e)
    {
        // Odczytanie tekstu wpisanego w polu Entry.

        string imie = poleTekstowe.Text;

        // Ustawienie nowej treści w etykiecie (Label).

        etykietaWynik.Text = $"Witaj, {imie}!";
    }
}

PODSUMOWANIE:

Na tej lekcji nauczyliśmy się:

• czym jest .NET MAUI i dlaczego umożliwia tworzenie aplikacji na wiele systemów jednocześnie,
• jak wygląda środowisko pracy w Visual Studio,
• jak utworzyć pierwszy projekt MAUI,
• jaka jest struktura projektu (Program.cs, App.xaml, AppShell, MainPage, Resources),
• jak napisać pierwszy widok w XAML,
• jak połączyć interfejs z logiką w C# (partial class, InitializeComponent, obsługa zdarzenia).

To są absolutne podstawy, które trzeba znać, żeby później przejść do budowania bardziej rozbudowanych aplikacji z bazą danych, plikami i wieloma ekranami.

Zadania końcowe – Lekcja 1

Zadanie 1 – Powitanie z imieniem

Zmodyfikuj program tak, aby po kliknięciu przycisku aplikacja wyświetlała komunikat:

„Miło Cię poznać, [imię]” zamiast „Witaj, [imię]!”.

---

Zadanie 2 – Przycisk „Wyczyść”

Dodaj drugi przycisk o nazwie „Wyczyść”, który:

• usuwa tekst z pola Entry,
• czyści etykietę (wynik).

---

Zadanie 3 – Zmiana koloru napisu

Dodaj do etykiety z wynikiem właściwość TextColor, tak aby napis powitania miał inny kolor (np. czerwony lub zielony).

---

Zadanie 4 – Więcej pól tekstowych

Dodaj drugie pole Entry o nazwie poleNazwisko i zmień kod tak, aby po kliknięciu przycisku program wyświetlał pełne powitanie w formie:

„Witaj, [imię] [nazwisko]!”.

---

Zadanie 5 – Własna wersja

Samodzielnie wymyśl i dodaj trzeci przycisk, który robi coś według Twojego pomysłu (np. zmienia kolor tła strony, zmienia rozmiar czcionki etykiety, pokazuje dodatkowy tekst).