Zadanie egzaminacyjne (wersja uproszczona do nauki)

Temat:
Stwórz aplikację mobilną w .NET MAUI, która umożliwia wpisanie danych użytkownika w formularzu, wczytanie zdjęcia z pliku oraz wyświetlenie podsumowania w drugim oknie.

Etapy rozwiązania

1. Utwórz projekt

1. Otwórz Visual Studio 2022.
2. Wybierz: Nowy projekt → .NET MAUI App → Aplikacja MAUI (.NET MAUI App).
3. Nazwij projekt np. FormularzOsobaApp.

---

2. Dodaj model danych (klasa na dane osoby)

1. W Solution Explorer kliknij prawym na projekt.
2. Wybierz Dodaj → Nowy folder i nazwij go Modele.
3. Kliknij prawym na folder Modele → Dodaj → Klasa.
4. Nazwij klasę DaneOsoby.cs i wklej kod:

namespace FormularzOsobaApp.Modele;

public class DaneOsoby
{
    public string Imie { get; set; } = "";
    public string Nazwisko { get; set; } = "";
    public DateTime DataUrodzenia { get; set; } = DateTime.Today;
    public string Miejscowosc { get; set; } = "";
    public string? SciezkaObrazu { get; set; }
}

Po co to?
Dzięki temu wszystkie dane osoby przechowamy w jednym obiekcie, który łatwo przekażemy do drugiej strony.

3. Stwórz pierwsze okno (formularz)

Krok: Dodaj nową stronę.

1. Kliknij prawym na projekt → Dodaj → Nowy element.
2. Wybierz .NET MAUI ContentPage (XAML).
3. Nazwij stronę: FormularzOsobaPage.xaml.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="FormularzOsobaApp.FormularzOsobaPage"
             Title="Formularz osoby">

    <ScrollView>
        <VerticalStackLayout Padding="16" Spacing="12">

            <Label Text="Imię"/>
            <Entry x:Name="PoleImie"/>

            <Label Text="Nazwisko"/>
            <Entry x:Name="PoleNazwisko"/>

            <Label Text="Data urodzenia"/>
            <DatePicker x:Name="PoleData"/>

            <Label Text="Miejscowość"/>
            <Entry x:Name="PoleMiejscowosc"/>

            <Label Text="Zdjęcie"/>
            <Image x:Name="PodgladObraz" HeightRequest="200" Aspect="AspectFit"/>
            <Button Text="Wybierz zdjęcie" Clicked="WybierzZdjecie_Click"/>

            <Button Text="Dalej →" Clicked="Dalej_Click"/>
        </VerticalStackLayout>
    </ScrollView>
</ContentPage>

C#

using FormularzOsobaApp.Modele;
using Microsoft.Maui.Storage;

namespace FormularzOsobaApp;

public partial class FormularzOsobaPage : ContentPage
{
    private string? _sciezkaObrazu; // ścieżka do zdjęcia

    public FormularzOsobaPage()
    {
        InitializeComponent();
    }

    private async void WybierzZdjecie_Click(object sender, EventArgs e)
    {
        var wynik = await FilePicker.PickAsync(new PickOptions
        {
            PickerTitle = "Wybierz zdjęcie",
            FileTypes = FilePickerFileType.Images
        });

        if (wynik != null)
        {
            _sciezkaObrazu = wynik.FullPath;
            PodgladObraz.Source = _sciezkaObrazu;
        }
    }

    private async void Dalej_Click(object sender, EventArgs e)
    {
        var dane = new DaneOsoby
        {
            Imie = PoleImie.Text ?? "",
            Nazwisko = PoleNazwisko.Text ?? "",
            DataUrodzenia = PoleData.Date,
            Miejscowosc = PoleMiejscowosc.Text ?? "",
            SciezkaObrazu = _sciezkaObrazu
        };

        await Navigation.PushAsync(new PodsumowanieOsobaPage(dane));
    }
}

4. Stwórz drugie okno (podsumowanie)

Krok: Dodaj nową stronę.

1. Kliknij prawym na projekt → Dodaj → Nowy element.
2. Wybierz .NET MAUI ContentPage (XAML).
3. Nazwij stronę: PodsumowanieOsobaPage.xaml.

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

    <VerticalStackLayout Padding="16" Spacing="12" HorizontalOptions="Center">

        <Label x:Name="PowitanieLabel"
               FontSize="24"
               FontAttributes="Bold"
               HorizontalOptions="Center"/>

        <Image x:Name="ZdjecieImage"
               HeightRequest="220"
               Aspect="AspectFit"/>

        <Label x:Name="SzczegolyLabel" FontSize="16"/>
    </VerticalStackLayout>
</ContentPage>

C#

using FormularzOsobaApp.Modele;

namespace FormularzOsobaApp;

public partial class PodsumowanieOsobaPage : ContentPage
{
    public PodsumowanieOsobaPage(DaneOsoby dane)
    {
        InitializeComponent();

        PowitanieLabel.Text = $"Witaj, {dane.Imie}!";

        if (!string.IsNullOrEmpty(dane.SciezkaObrazu))
            ZdjecieImage.Source = dane.SciezkaObrazu;

        SzczegolyLabel.Text =
            $"Nazwisko: {dane.Nazwisko}\n" +
            $"Data ur.: {dane.DataUrodzenia:d}\n" +
            $"Miejscowość: {dane.Miejscowosc}";
    }
}

5. Ustaw startową stronę

W pliku App.xaml.cs zmień:

public App()
{
    InitializeComponent();
    MainPage = new NavigationPage(new FormularzOsobaPage());
}

Efekt końcowy

1. W pierwszym oknie wpisujesz dane i wybierasz zdjęcie.
2. Klikasz „Dalej →”.
3. W drugim oknie aplikacja pokazuje napis „Witaj, Imię”, szczegóły i wybrane zdjęcie.