Kontrolki III: ProgressBar, ActivityIndicator, CollectionView i ListView

1. Przygotuj miejsce pracy

• W Visual Studio wybierz Utwórz nowy projekt → .NET MAUI App, nie MAUI Blazor Hybrid. Nazwij projekt MojaAplikacja, żeby namespace pasował do przykładów. Każdy temat możesz robić w osobnym katalogu, nawet gdy nazwa projektu się powtarza.
• Wybierz .NET10 i najpierw uruchom niezmieniony szablon na Windows Machine. Gdy masz działające środowiskoAndroid, później wybierz własne urządzenie lub emulator.
• Zatrzymaj debugowanie przed dodawaniem klas i zmianą sposobu startu. Zachowaj App.xaml, Resources i pliki platform z szablonu.

Co dodajesz, a co podmieniasz?

Zanim uruchomisz: trzy połączenia

2. Uruchom sam wygląd — jeszcze bez logiki

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MojaAplikacja.MainPage">
    <VerticalStackLayout Padding="24" Spacing="14">
        <Label Text="Postęp: połowa" FontSize="24" />
        <ProgressBar Progress="0.5" />
        <ActivityIndicator IsRunning="True" />
    </VerticalStackLayout>
</ContentPage>

1. Pierwsza próba Uruchom. Zobaczysz kontrolki, ale przyciski bez Clicked jeszcze nic nie robią. Sprawdź rozmiar i kolejność elementów. Zatrzymaj aplikację przed następnym etapem.

3. Wskaż stronę startową ćwiczenia

namespace MojaAplikacja;

public partial class App : Application
{
    public App() => InitializeComponent();
    protected override Window CreateWindow(IActivationState? activationState)
        => new Window(new NavigationPage(new PostepPage()));
}

1. CreateWindow Tworzy okno aplikacji. NavigationPage jest kontenerem zwykłych stron i daje przycisk powrotu; nie łączymy go z Shell.
2. new PostepPage() Tworzy instancję docelowej strony. Aby testować drugi niezależny przykład, zatrzymaj program, zmień tylko ten typ i uruchom ponownie.

4. Połącz wygląd z działaniem

Budowa krok po kroku

PostepPage.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="MojaAplikacja.PostepPage">
    <VerticalStackLayout Padding="20" Spacing="16">

        <Label Text="Wysyłanie pliku:" FontAttributes="Bold" />
        <ProgressBar x:Name="PasekPostepu" Progress="0" />
        <Button Text="Rozpocznij wysyłanie" Clicked="RozpocznijWysylanie_Clicked" />

        <BoxView HeightRequest="1" Color="LightGray" />

        <Label Text="Ładowanie danych z serwera:" FontAttributes="Bold" />
        <ActivityIndicator x:Name="Spinner" IsRunning="False" Color="RoyalBlue" />
        <Button Text="Symuluj pobieranie" Clicked="SymulujPobieranie_Clicked" />

    </VerticalStackLayout>
</ContentPage>

1. ProgressBar Progress="0" Pasek startuje pusty.
2. ActivityIndicator IsRunning="False" Spinner jest wyłączony, dopóki kod go nie uruchomi.
3. BoxView HeightRequest="1" Cienka linia oddzielająca sekcje.

Budowa krok po kroku

PostepPage.xaml.cs

namespace MojaAplikacja;

public partial class PostepPage : ContentPage
{
    public PostepPage()
    {
        InitializeComponent();
    }

    private async void RozpocznijWysylanie_Clicked(object sender, EventArgs e)
    {
        // ProgressTo animuje płynne przejście od aktualnej wartości do 1.0
        // w ciągu 2000 milisekund (2 sekundy)
        await PasekPostepu.ProgressTo(1.0, 2000, Easing.Linear);
    }

    private async void SymulujPobieranie_Clicked(object sender, EventArgs e)
    {
        Spinner.IsRunning = true;

        // Symulacja oczekiwania na odpowiedź serwera (bez blokowania UI)
        await Task.Delay(2000);

        Spinner.IsRunning = false;
        await DisplayAlertAsync("Gotowe", "Dane zostały pobrane.", "OK");
    }
}

1. await PasekPostepu.ProgressTo(1.0, 2000, Easing.Linear) Płynnie zwiększa wartość przez 2 sekundy. Bez animacji pasek skoczyłby od razu do końca.
2. Spinner.IsRunning = true Włącza spinner na czas operacji.
3. await Task.Delay(2000) Sztuczne czekanie bez blokowania interfejsu. W prawdziwej aplikacji będzie tu await httpClient.GetAsync(...).
4. Spinner.IsRunning = false Zawsze wyłącz spinner po zakończeniu. Wieczny spinner sugeruje zawieszenie aplikacji.

Zatrzymaj się przed kolejnym wariantem

• Na PostepPage uruchom wysyłanie i obserwuj przejście paska do 100%. Ten przykład symuluje czas, nie przesyła pliku do serwera.
• Zapisz działającą wersję projektu. Kolejny wariant ma własne pliki lub zastępuje jawnie wskazany plik; nie mieszaj dwóch implementacji tej samej klasy.

Dopiero teraz: drugi wariant lub rozszerzenie

5. Odbiór: czy naprawdę działa?

• Na PostepPage uruchom wysyłanie i obserwuj przejście paska do 100%. Ten przykład symuluje czas, nie przesyła pliku do serwera.
• Przełącz start na ListaPlikowPage. Po kliknięciu widać spinner, potem listę nazw plików.
• Podczas oczekiwania spróbuj poruszyć oknem. await nie powinno zamieniać interfejsu w nieruchomy obraz.

8 · Czego unikać

Cztery błędy z postępem i listami

Thread.Sleep(2000);

await Task.Delay(2000);

Spinner.IsRunning = true;
await Task.Delay(2000);
// brak Spinner.IsRunning = false

Spinner.IsRunning = false;

<ListView ItemsSource="{Binding Pozycje}" />

<CollectionView ItemsSource="{Binding Pozycje}" />

<CollectionView ItemsSource="{Binding Wyniki}" />

<CollectionView.EmptyView>
    <Label Text="Brak wyników" />
</CollectionView.EmptyView>

Ćwiczenie z pomocą · samodzielna praca

6. Mała zmiana, którą zrobisz samodzielnie

Dodaj licznik wyświetlonych nazw plików pod listą.
Dotychczasowe działanie ma pozostać poprawne.