Aplikacje mobilne · Środowisko

Środowisko pracy: Visual Studio, .NET MAUI i emulatory

To największa różnica względem WPF: w .NET MAUI nie ma wygodnego projektanta z przeciąganiem kontrolek. XAML piszesz ręcznie, a efekt sprawdzasz przez Hot Reload i emulator. Zanim napiszesz kod, musisz sprawnie poruszać się po tym warsztacie.

około 45 minut
Visual Studio · .NET MAUI · emulator
INF.04.6.1

Po tej lekcji: wybrać środowisko do aplikacji mobilnych, zainstalować właściwe obciążenie, skonfigurować emulator, wskazać platformę docelową i wyjaśnić działanie Hot Reload oraz kluczowe wpisy pliku .csproj.

Uruchomiony szablon i pierwsza zmiana na żywo

Zanim zaczniemy pisać aplikacje, musimy wiedzieć, gdzie je uruchamiamy. Działający emulator, podgląd w lekcji i aplikacja Windows to różne rzeczy.

Najpierw uruchomisz mały ekran. Potem połączysz go z kodem i sprawdzisz konkretne wyniki. Dodatki wykonuj dopiero, gdy wersja podstawowa działa. Quiz i oceniane zadania pozostają w biurku po zalogowaniu.

1 · Wybierz narzędzie

Android Studio, Xcode czy Visual Studio z MAUI

Zaznacz wymagania projektu i zobacz, które środowisko je spełnia.

Najpierw przewidź, potem sprawdź: W modelu Hot Reload zmień Text etykiety, a potem Spacing stosu. Najpierw przewidź, czy zmieni się treść czy odległość. Podgląd w lekcji jest uproszczeniem, nie uruchamia C#.

Wybieramy Visual Studio z .NET MAUI, bo wykorzystuje znajomość C# z wcześniejszych działów i obsługuje wiele platform jednym projektem. Model pomaga zobaczyć mechanizm; właściwą aplikację uruchomisz z plików poniżej.

1. Przygotuj miejsce pracy

W Visual Studio wybierz Utwórz nowy projekt → .NET MAUI App, nie MAUI Blazor Hybrid. Nazwij projekt ProbaMaui, ż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.

Zanim uruchomisz: trzy połączenia

x:Class="ProbaMaui.NazwaStrony" w XAML musi zgadzać się z namespace ProbaMaui i nazwą klasy C#. InitializeComponent() tworzy kontrolki opisane w XAML.

x:Name="PoleImie" daje kodowi C# dostęp przez PoleImie.Text. Z kolei Clicked="Zapisz_Clicked" wskazuje metodę o tej nazwie w pliku .xaml.cs. Sam napis przycisku w Text niczego nie podpina.

Gdy dodajesz XAML z obsługą zdarzeń, od razu uzupełnij też odpowiadający C#. Uruchamiaj dopiero po skończeniu oznaczonej pary plików; brakujący handler nie jest błędem środowiska.

2. Uruchom sam wygląd — jeszcze bez logiki

W świeżym projekcie zastąp MainPage.xaml poniższym ekranem. W MainPage.xaml.cs zachowaj konstruktor z InitializeComponent(); usuń szablonowy licznik i OnCounterClicked, bo nie ma ich już w XAML. Na tym etapie App i AppShell pozostają z szablonu. To pełny, tymczasowy XAML — później świadomie go podmienisz, nie dokleisz do drugiego ContentPage.

MainPage.xaml — etap tymczasowyxaml

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ProbaMaui.MainPage">
    <VerticalStackLayout Padding="24" Spacing="14">
        <Label Text="Mój pierwszy test MAUI" FontSize="24" />
        <Label Text="Zmień ten napis podczas debugowania." />
    </VerticalStackLayout>
</ContentPage>

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.

IDE i RAD: narzędzie oraz sposób pracy

IDE — Integrated Development Environment

Zintegrowane środowisko programistyczne: edytor, kompilacja, debugowanie i zarządzanie projektem w jednym miejscu.

Na przykład Visual Studio: piszesz XAML/C#, stawiasz breakpoint, uruchamiasz aplikację.

RAD — Rapid Application Development

Szybkie budowanie i sprawdzanie kolejnych wersji aplikacji z użyciem gotowych komponentów i krótkiej informacji zwrotnej.

Na przykład Szablon MAUI → gotowa kontrolka Entry → XAML Hot Reload → test poprawki. RAD nie oznacza braku kodu ani gwarancji projektanta przeciągnij–upuść.

Zacznijmy od różnicy

Nie przeciągasz, tylko piszesz

To jak różnica między edytorem WYSIWYG, w którym od razu widzisz efekt, a pisaniem czystego HTML i CSS z podglądem po zapisaniu. W MAUI musisz umieć wyobrazić sobie efekt, patrząc na kod, i sprawdzać go po zapisaniu, a nie klikając gotowe elementy z palety.

Dlatego w tym dziale bardziej niż w WPF liczy się czytanie i pisanie XAML z klawiatury. Bez sprawnego warsztatu każda kolejna lekcja będzie frustrująca.

2 · Przygotuj stanowisko

Obciążenie „.NET Multi-platform App UI development”

W Visual Studio Installer trzeba zaznaczyć to obciążenie. Instalator pobiera szablony projektów MAUI, Android SDK i obrazy emulatora Androida. To duża instalacja (kilka GB), więc zaplanuj czas i miejsce na dysku.

Uruchom Visual Studio Installer i kliknij Modyfikuj.
Zaznacz obciążenie .NET Multi-platform App UI development (Programowanie wieloplatformowych aplikacji .NET).
Zaakceptuj dodatki (Android SDK, emulator) i kliknij Zainstaluj.
Po instalacji uruchom Visual Studio i sprawdź, czy w nowym projekcie widać szablon .NET MAUI App.
Jeśli szablonu nie ma, wróć do instalatora: bez obciążenia MAUI szablony się nie pojawią.

3 · Zamiast projektanta

Zmieniaj XAML i patrz na efekt od razu

To odpowiednik XAML Hot Reload: zmieniasz kod, zapisujesz, a uruchomiona aplikacja na emulatorze aktualizuje wygląd bez ponownego budowania i restartu. Tutaj zmień kolor, rozmiar czcionki albo tekst i obserwuj ekran telefonu.

Pełne budowanie aplikacji mobilnej trwa dłużej niż WPF. Hot Reload oszczędza ten czas przy każdej zmianie wyglądu.

4 · Co pomaga w pracy

Trzy narzędzia zamiast projektanta

Narzędzie	Co daje	Uwaga
IntelliSense	Podpowiedzi nazw kontrolek i właściwości podczas pisania XAML, jak w C#.	Działa od razu, bez uruchamiania aplikacji.
XAML Hot Reload	Zmiana wyglądu na uruchomionym emulatorze lub urządzeniu bez restartu.	Kluczowe narzędzie w tym dziale.
XAML Live Preview	Podgląd interfejsu działającej aplikacji wewnątrz Visual Studio, współpracujący z Hot Reload.	Nie zastępuje uruchomienia aplikacji; dostępność zależy od platformy i wersji narzędzi.

Zawsze weryfikuj ostateczny wygląd w emulatorze albo na prawdziwym urządzeniu.

5 · Gdzie uruchamiasz

Emulator Androida albo prawdziwy telefon

Testowanie wymaga emulatora (wirtualne urządzenie na komputerze) albo prawdziwego telefonu podłączonego kablem USB z włączonym trybem debugowania (Ustawienia → Opcje programistyczne → Debugowanie USB).

Emulator konfigurujesz przez Android Device Manager (Narzędzia → Android → Android Device Manager): tworzysz nowe urządzenie, wybierasz model telefonu i wersję Androida (API Level) i pobierasz obraz systemu. Im nowszy obraz, tym więcej zasobów zużywa. Na słabszym komputerze wybierz starszy, lżejszy obraz.

Przed uruchomieniem wybierz platformę docelową na pasku narzędzi, obok przycisku Start: konkretny emulator Androida, „Windows Machine” albo „Mac Catalyst”. Bez wyboru przycisk będzie nieaktywny lub zgłosi brak urządzenia.

6 · Co jest w .csproj

Cztery wpisy, które odróżniają MAUI od WPF

Plik PierwszaAplikacjaMaui.csproj otworzysz dwukrotnie klikając nazwę projektu. Kliknij kolejne wpisy.

Dlaczego liczba mnoga?

Lista platform oddzielona średnikami. Windows dochodzi warunkowo, tylko gdy budujesz na Windows.

Jedna linia sprawia, że ten sam projekt kompiluje się na kilka różnych systemów.

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

Teraz zbuduj docelowy przykład. Pełne pliki poniżej zastępują swoje wcześniejsze wersje. Przeczytaj opis nad kodem i objaśnienia pod nim; potem sprawdź przepływ danych, nie tylko brak czerwonych podkreśleń.

Ta lekcja nie wymaga dodatkowego kodu C#: ćwiczysz przygotowanie i uruchamianie środowiska.

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

Wykonaj próby w swojej aplikacji, nie tylko w modelu na stronie. Zaznaczaj dopiero po sprawdzeniu wyniku. Funkcje urządzenia wymagają testu na właściwej platformie.

Uruchom świeży szablon na Windows Machine. Kliknięcie przycisku szablonu zmienia licznik.
W trakcie debugowania zmień widoczny tekst Label w MainPage.xaml i zapisz. Sprawdź Hot Reload; jeśli dana zmiana go nie wspiera, zatrzymaj i uruchom projekt ponownie.
Dopiero po tym wybierz Android Emulator, uruchom urządzenie i porównaj ten sam ekran. Brak emulatora nie unieważnia poprawnego testu Windows.

7 · Czego unikać

Cztery błędy na starcie

Brak obciążenia MAUI w instalatorze

Tak nie

Instalacja Visual Studio bez „.NET Multi-platform App UI development”

W nowym projekcie nie ma żadnego szablonu .NET MAUI.

Tak

Visual Studio Installer → Modyfikuj → zaznacz obciążenie MAUI

Szablony, Android SDK i emulator należą do tego obciążenia.

Szukanie projektanta jak w WPF

Tak nie

Szukam Toolboxa do przeciągania kontrolek na podgląd.

Zniechęcenie, bo takiego wygodnego projektanta w MAUI nie ma.

Tak

Piszę XAML ręcznie z IntelliSense i sprawdzam przez Hot Reload.

To normalny sposób pracy w MAUI.

Zbyt ciężki emulator

Tak nie

Najnowszy obraz Androida na starszym komputerze

Emulator uruchamia się bardzo wolno lub wcale.

Tak

Starszy, lżejszy obraz systemu albo prawdziwy telefon przez USB

Nowsze obrazy zużywają więcej pamięci i procesora.

Niewybrana platforma docelowa

Tak nie

Pasek narzędzi: brak wybranego urządzenia

Przycisk Start jest nieaktywny albo zgłasza brak urządzenia docelowego.

Tak

Wybierz emulator, „Windows Machine” lub „Mac Catalyst” z listy obok przycisku Start

Visual Studio musi wiedzieć, na czym uruchomić aplikację.

Ćwiczenie z pomocą · samodzielna praca

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

Zmień dwa niezależne elementy szablonu i zanotuj, które zmiany było widać bez restartu.

Oczekiwany rezultat

Zmień dwa niezależne elementy szablonu i zanotuj, które zmiany było widać bez restartu.
Dotychczasowe działanie ma pozostać poprawne.

Potrzebujesz pomocy? Rozwiązuj krok po kroku.

Krok 1 — pokaż podpowiedź

Zacznij od Text istniejącej etykiety, nie od usuwania handlerów przycisku.

Krok 2 — pokaż podpowiedź

Zapisz XAML podczas uruchomionej sesji debugowania.

Krok 3 — pokaż podpowiedź

W oknie Output sprawdź komunikaty XAML Hot Reload, zamiast zgadywać, czy zapis dotarł.

Otwórz tylko tyle podpowiedzi, ile potrzebujesz. Po każdym kroku wróć do zadania i sprawdź wynik.

8 · Sprawdź się

Narzędzia i ustawienia

Cztery krótkie sytuacje.

Podsumowanie

Co warto zapamiętać

Visual Studio + .NET MAUI daje jeden projekt na Androida, iOS, Windows i macOS.
Potrzebujesz obciążenia .NET Multi-platform App UI development (kilka GB).
W MAUI nie ma wygodnego projektanta: piszesz XAML ręcznie z IntelliSense i Hot Reload.
Testujesz na emulatorze (Android Device Manager) albo na telefonie przez USB. Przed startem wybierz platformę docelową.
W .csproj: TargetFrameworks (wiele platform), UseMaui, SingleProject, ApplicationId.

Dalej na swoim koncie

Rozgrzewki, quiz i zadania są w biurku ucznia.

Teoria jest otwarta dla wszystkich. Żeby rozwiązywać zadania, zapisywać szkice i widzieć swój postęp, zaloguj się.

Zaloguj się →

Źródła i dalsza nauka