Xamarin Forms – tworzymy pierwszą aplikację z menu bocznym

Nieco ponad tydzień temu poruszyłem temat, jakim jest tworzenie aplikacji mobilnych przy użyciu technologii Xamarin. Jeżeli jeszcze nie wiesz, czym właściwie jest Xamarin, koniecznie tam zajrzyj. W komentarzach znajdziesz również linka do podobnego artykułu autorstwa Damiana Antonowicza. Jeżeli wszystko jest jasne, to możemy zaczynać! Dzisiaj pokażę, jak stworzyć prostą multiplatformową aplikację z bocznym menu (zwanym również hamburger-menu) przy użyciu podejścia Xamarin.Forms PCL. Do dzieła! 🙂

Tworzymy nowy projekt

Pierwszą rzeczą jaką musimy zrobić, jest oczywiście stworzenie nowego projektu. W przypadku Visual Studio 2017 wybieramy następujące opcje:

Jak widać na załączonych obrazkach, należy stworzyć nowy projekt typu Xamarin.Forms Portable Class Library (PCL). Dodatkowo podczas tworzenia projektu mogą zostać wyświetlone okienka konfiguracyjne dotyczące poszczególnych projektów. Przykładowo: jaka ma być najstarsza wersja/kompilacja Windows’a 10 umożliwiająca uruchomienie wynikowej aplikacji UWP. Poza tym zostanie wyświetlony monit, który umożliwia podpięcia Mac’a, na którym ma być kompilowana aplikacja przeznaczona dla iOS, gdyż niestety, ale Apple nie udostępnia swoich kompilatorów na inne systemy (w tym Windows). Dlatego też chcąc pisać aplikacje na ten system, trzeba zainwestować w takowy sprzęt. Ewentualnie można bawić się w maszyny wirtualne, ale to może być nie do końca zgodne z licencją…

Po utworzeniu projektu powinien powitać nas taki widok:

Pusta aplikacja powinna bez problemu się kompilować. Jeżeli jest inaczej, to należy doprowadzić Xamarina/VS do porządku, przy pomocy wujka Google 🙂

Instalacja Mvvm.Light

W aplikacji zastosujemy wzorzec projektowy MVVM. Aby uławić jego implementację warto zainstalować bibliotekę Mvvm.Light. W tym celu klikamy PPM na pozycję „References->Manage NuGet Packages…” w projekcie portable i wyszukujemy pozycję MvvmLightLibs:

Po udanym dodaniu biblioteki do projektu możemy przejść dalej.

Tworzymy wymagane foldery i klasy

Pierwszą rzeczą jaką zrobimy, żeby nie robić bałaganu, jest usunięcie istniejącej strony MainPage.xaml z projektu. Kolejnym krokiem będzie utworzenie folderów dla zachowania jakiegoś sensownego porządku:

  • View
    • Menu
    • Pages
  • ViewModel
    • Menu
    • Pages

Następnie dodajemy do podfolderu View\Menu dwie puste strony (Forms Blank Content Page Xaml) o nazwach MenuPage oraz RootPage. Do podfolderu Pages wrzucamy kolejne dwie puste strony o nazwach MainPage i SecondPage. Przy okazji można też już utworzyć ViewModele dla każdej ze stron (w odpowiadających im folderach), według przykładu:

oraz podpiąć je pod nasze View:

Modyfikujemy i dodajemy kod

Po wykonaniu tych czynności przejdźmy do pliku RootPage i zmieńmy jego kod xaml na taki:

Oraz kod code-behind:

Jak widać zmieniliśmy tu tylko typ strony z ContentPage na MasterDetailPage. Będzie ona swego rodzaju kontenerem dla menu, oraz stron podrzędnych aplikacji. Do tego bindujemy tutaj właściwość IsPresented. Będziemy zmieniać jej wartość na false, kiedy zechcemy, aby menu boczne się schowało (czyli po wybraniu z niego jakiegoś elementu). W związku z tym w klasie RootPageViewModel musimy umieścić taki kod:

Skoro tę sprawę mamy załatwioną to możemy przejść dalej. Zajmijmy się teraz wyglądem naszego menu bocznego. W tym celu przejdźmy do pliku MenuPage.xaml i wstawmy kod, który utworzy nam listę, do której będziemy mogli dodawać (z poziomu ViewModelu) nowe elementy:

Skoro możemy już dodawać nowe elementy z poziomu ViewModelu do naszego menu. Zróbmy to!

Jak widać powyższy kod dodaje elementy typu MenuItem do naszego menu. Obrazek jest pozyskiwany z zasobów aplikacji (po dodaniu go do projektu należy ustawić we właściwościach Build action na Embedded Resource). W przeciwnym wypadku nie zostanie załadowany.

No okej, teoretycznie mamy już menu i dwie puste strony. To teraz przydałoby się to wszystko wyświetlić. W tym celu przejdźmy do pliku App.xaml.cs:

Dodajemy tutaj nowy publiczny statyczny obiekt typu NavigationPage – będzie umożliwiał nam przełączanie się pomiędzy elementami menu z każdego miejsca w kodzie (w praktyce z klasy MenuPageViewModel). Następnie w konstruktorze tworzymy nowe obiekty stron aplikacji i ustawiamy ich hierarchię.

Po kompilacji aplikacji, na jedną z platform powinien powitać nas taki widok:

Jej! Menu działa! 🙂 Ale… jest zupełnie statyczne… Nie przełącza stron, nie zasuwa się kiedy klikniemy na jakiś element… Trzeba coś z tym zrobić!

Ożywiamy menu

Podstawowym problemem ożywienia menu przy zastosowaniu wzorca MVVM jest fakt, że zdarzenie wyboru elementu z listy(ItemSelected) musimy jakoś powiązać z komendą (nie udostępnia tego element ListView). Niestety nie udało mi się znaleźć gotowego pakietu NuGet, który by to umożliwiał (tak jak System.Windows.Interactivity w przypadku WPF’a), ale udało mi się znaleźć gotową klasę, którą można po prostu skopiować do aplikacji i… użyć. Źródło, z którego skopiowałem kod jest podane w pierwszej linijce kodu. Btw. dziękuję jego autorowi, bo odwalił kawał dobrej roboty! 😉

Użycie powyższej klasy jest banalnie proste, w naszym projekcie będzie wyglądało dokładnie tak:

Dodałem tutaj również bindowanie właściwości SelectedItem, aby pozyskiwać informację o tym, który element został wybrany. W końcu co nam po samym zdarzeniu wybrania, któregoś z elementów 🙂 Następnie możemy w łatwy sposób powiązać utworzoną w ten sposób komendę z metodą zawartą w ViewModelu:

Żeby zobaczyć efekty działania tego kodu, trzeba coś napisać na naszych podstronach. Na przykład:

oraz

Kiedy już wkonamy te operacje, po kliknięciu w dany element menu, ten powinien przenieść nas do odpowiadającej mu strony. Jednak… menu dalej się nie zasuwa! Temu też na szczęście da się zaradzić. Przypomnijmy: W celu zasunięcia menu po kliknięciu na jakiś element, musimy zmienić wartość właściwości IsPresented w RootPageViewModel na false. Aby uzyskać dostęp do tego elementu z poziomu MenuPageViewModel, możemy przekazać instancję klasy RootPageViewModel do naszego MenuPageViewModel. Żeby to zrobić musimy dokonać małych zmian w kodzie naszych klas. Odpowienio:

RootPage.xaml.cs

App.xaml.cs

MenuPage.xaml.cs

MenuPageViewModel.cs

Po wprowadzeniu tych zmian spokojnie możemy zmienić wartość tej właściwości po kliknięciu na jakiś element (czyli w metodzie ItemSelectedMethod):

Od tej pory menu będzie się już chować, po wybraniu jakiegoś elementu 😉 Końcowy efekt działania aplikacji prezentuje się następująco na Windowsie i Androidzie:

Ze względów technicznych, nie mogłem skompilować i przetestować aplikacji przeznaczonej dla iOS’a. Aplikacja może nie wygląda zbyt ładnie, ale nie taki był zamiar tego wpisu/poradnika. Chciałem przedstawić tutaj, jak stworzyć prostą apkę z menu bocznym przy użyciu Xamarin.Forms, bez pisania ani jednej linijki natywnego kodu. Oczywiście nic nie stoi na przeszkodzie, aby ją ładnie dopracować i wykorzystać do własnych niecnych celów 🙂

Na koniec zostawiam link do w pełni działającego projektu: klik

To byłoby na tyle. Jak zwykle zachęcam do zgłaszania swoich uwag i zadawania pytań w komentarzach. Planuję kolejne wpisy poświęcone Xamarinowi i jestem ciekaw, czy taki styl pisania nazwijmy to „poradników” wam pasuje. Do zobaczenia! 🙂

849 total views, 1 views today