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

Otwórz Visual Studio 2022.
Kliknij Nowy projekt.
Wyszukaj .NET MAUI App i wybierz go.
Nadaj nazwę projektu, np. PierwszaAplikacjaMaui.
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).

BITEDU.PL

Wprowadzenie do .NET MAUI i pierwszy projekt