Tworzenie aplikacji wieloplatformowych za pomocą .NET MAUI

Dla zainteresowanych platformą .NET zapewne nie obcy jest Xamarin – framework pozwalający tworzyć aplikacje zarówno na Androida jak i iOS’a z wykorzystaniem języka C# oraz XAML. Jednak wraz z .NET’em 6 dziedzictwo Xamarina przejmuje .NET MAUI, który znacząco rozszerza możliwości poprzednika. Przedstawię wam dzisiaj jak zacząć swoją przygodę z MAUI na przykładzie prostego projektu – poruszymy takie tematy jak MVVM, nawigacje oraz animowanie kontrolek.

Co oferuje nam .NET MAUI?

• Rozbudowany sposób projektowania stron za pomocą języka XAML.
• Wsparcie dla data binding’u, umożliwiające tworzenie aplikacji w oparciu o sprawdzone wzorce.
• Wieloplatformowe API pozwalające korzystać z natywnych funkcjonalności urządzeń, takich jak aparat czy GPS.
• Hot Reload umożliwiający odzwierciedlenie zmian w kodzie nawet podczas działania aplikacji.
• Pojedynczy projekt, dzięki któremu w zależności od targetu możemy budować aplikacje na wiele platform.

Jak to działa?

Na .NET 6 składa się kilka framework’ów dla konkretnych platform - są to .NET for Android, .NET for iOS, .NET for macOS oraz WinUI3. Elementem łączącym jest w tym przypadku tzw. BCL – Base Class Library. Jest to biblioteka, która oferuje poziom abstrakcji dla kodu poszczególnych platform. W przypadku Androida, iOS’a oraz MacOS’a środowisko uruchomieniowe implementowane jest poprzez Mono, a dla Windowsa poprzez Win32. To wszystko umożliwia nam wszelakie interakcje z API .NET MAUI, które następnie konsumowane są przez natywne API targetowanej platformy.

Co z innymi platformami?

Oficjalnie według wstępnych założeń .NET MAUI wspiera cztery wcześniej wymienione platformy. Jednak ze względu na open-source’owy charakter framework’u, community Linux’owe już pracuje nad wsparciem dla swojej ukochanej platformy z wykorzystaniem GtkSharp. Dodatkowo od wersji RC2 we współpracy z Samsungiem pojawiło się także wsparcie dla platformy Tizen.

Jak zacząć?

Na dziś .NET MAUI nie ma oficjalnej premiery. Nie oznacza to jednak, że powinniśmy się zniechęcać, ponieważ dostępna jest już wersja RC3. Aby rozpocząć naszą przygodę będziemy potrzebować Visual Studio 2022 w wersji Preview. Możemy ją pobrać z oficjalnej strony. Uruchamiamy installer, a przy wyborze workload’u zaznaczamy „.NET Multi-platform App UI development”. 

Po zakończeniu instalacji uruchamiamy Visual Studio 2022 Preview oraz tworzymy nowy projekt. Wśród szablonów odnajdujemy i wybieramy „.NET Maui App”.


Po stworzeniu projektu odpalmy nasze „Hello World” na profilu Windows Machine.

Struktura projektu

• Platforms – znajdują się to pliki wykorzystywane przez konkretne platformy, jak  na przykład manifest.xml dla systemu Android
• Resources – wszelkie zdjęcia, czcionki i inne zasoby, które będą dzielone dla wszystkich platform
• App.xml – punkt wejściowy naszej aplikacji
• AppShell.xml – (opcjonalnie) infrastruktura nawigacji naszej aplikacji
• MainPage.xml – domyślna strona „Hello World”
• MauiProgram.cs – konfiguracja aplikacji, odpowiednik klasy Startup.cs 

Nawigacja

Domyślny szablon aplikacji MAUI implementuje App Shell – gotową mechanikę służącą do nawigacji między stronami za pomocą URI. Zaprezentujmy zatem działanie naszej „skorupy”.

Na początek stwórzmy drugą stronę, do której będziemy mogli nawigować. Zacznijmy od stworzenia folderu View. Klikamy prawym na projekt -> Add -> New Folder.

Następnie powtarzamy czynność, tym razem klikając na folder View -> Add -> New Item, a w dialogu odnajdujemy .NET MAUI Content Page (XAML). Nazwijmy naszą stronę CipherView.xaml.

Świetnie - teraz czas na nawigację – przejdźmy do pliku AppShell.xaml. Zaimportujmy namespace MauiDemo.View, zmieńmy zachowanie Flyout’u na Locked oraz dodajmy naszą nowo powstałą stronę do logiki Shell’u. 

A teraz odpalmy naszą aplikację – po lewej stronie widzimy zablokowane w miejscu Menu nawigacyjne, a w nim pozycję pozwalającą przejść nam do strony Cipher.

MVVM z wykorzystaniem Community Toolkit

Kluczem do stworzenia dobrze skalowalnej aplikacji bez dwóch zdań są wzorce projektowe. Jednym z popularniejszych wzorców stosowanych na platformie .NET jest MVVM (Model-View-ViewModel). W naszym przykładzie do zaimplementowania MVVM wykorzystamy tzw. Community Toolkit – bibliotekę rozwijaną przez społeczność .NET przy oficjalnym wsparciu Microsoftu.

W solution explorerze należy kliknąć prawym przyciskiem myszy na projekt, a następnie wybrać „Manage NuGet Packages”.

Odnajdujemy pakiet CommunityToolkit.MVVM i instalujemy.

Teraz przystosujmy nasz widok CipherView dodając kontrolkę Entry oraz Button:

Następnie analogicznie do folderu View, stwórzmy folder ViewModel oraz dodajmy klasę CipherViewModel.cs.

W celu uniknięcia boilerplate’u wykorzystamy atrybuty z Community Toolkit’u. Poprzez atrybut [INotifyPropertyChanged] automatycznie zaimplementujemy interfejs INotifyPropertyChanged. [ObservableProperty] wygeneruje typowy dla MVVM kod dla każdej Property, a [ICommand] stworzy nam gotową komendę nazwaną tak jak metoda, ale z sufiksem Command. Dodajmy zatem dwa pola typu string, oraz komendę wykonującą proste przesunięcie znaków w stringu o jeden.

A na koniec dokonajmy łączenia ViewModelu z widokiem. 

W klasie MauiProgram.cs zarejestrujmy nasze ViewModel oraz View jako Singletony:

W code behind widoku określmy BindingContext:

Ana samym widoku bindujemy dane:

I to wszystko – nasza pierwsza strona jest gotowa!

Animacje

A na koniec krótko o animacjach. W MAUI każda kontrolka, która dziedziczy po interfejsie IAnimatable może być w bardzo prosty sposób animowana. Jako przykład dokonajmy animacji przycisku po wywołaniu eventu Clicked. W tym celu stwórzmy handler.

View Code Behind:

View:

Teraz nasz przycisk dodatkowo obróci się o 360 stopni po kliknięciu.