Xamarin Forms – Toolbar’y

Dzisiejszy temat będzie dosyć krótki i prosty, jednak bardzo przydatny podczas pisania aplikacji mobilnych. Chodzi o tzw. „toolbar’y”. W dalszej części wpisu pokażę jak je tworzyć i obsługiwać – myślę, że początkującym się przyda 🙂

Zanim zaczniemy…

Powinieneś zerknąć do mojego poprzedniego wpisu i pobrać przykładową aplikację, którą tam przedstawiłem. Oczywiście możesz obejść się również bez tego, jednak mając na uwadze to, że w tym wpisie będę opierał się na rzeczach, które zostały zrobione już wcześniej, (np. instalacja MVVMLight) dobrze byłoby, gdybyś jednak rzucił okiem. Wszystko gotowe? To zaczynajmy!

Co chcemy osiągnąć?

Końcowy efekt będzie wyglądał następująco w przypadku aplikacji przeznaczonej dla Androida i Windowsa(UWP):

Ot, zwykły toolbar. Podobne bardzo często pojawiają się w aplikacjach mobilnych. Jak umieścić go w naszej, przy użyciu Xamarin Forms’ów? To bardzo proste! 🙂

Dodajemy kod XAML

Na wstępie zaznaczę, że toolbary tworzymy dla każdej ze stron aplikacji osobno. Oznacza to, że możemy dla różnych stron zastosować różne elementy – co oczywiście jest bardzo pożądane. Dodajmy, więc dwa powyższe elementy poprzez XAML’a do strony MainPage w projekcie portable:

Wydaje mi się, że kod nie wymaga żadnego komentarza. Aby ikona elementu została poprawnie wyświetlona, należy ją dodać osobno do każdego z projektów. Odpowiednio:

  • UWP – do folderu głównego projektu
  • Android – do folderu Resources\drawable
  • iOS – do folderu Resources

Po wykonaniu tych czynności można przejść do ViewModelu naszego MainPage:

Oczywiście przed tym wiążąc ViewModel z View… Bo w przykładzie, który pobrałeś tego nie zrobiłem…

Po wykonaniu tych czynności po kliknięciu, na któryś z elementów powinien powitać Cię odpowiadający mu komunikat. Oczywiście nic nie stoi na przeszkodzie, żeby umieścić w tych metodach jakiś inny, bardziej ambitny kod.

No i to byłoby na tyle. Temat krótki i bardzo przyjemny. Mam nadzieje, że powyższy kod komuś się przyda 🙂

Jedno przemyślenie nt. „Xamarin Forms – Toolbar’y

  1. Pingback: dotnetomaniak.pl

Możliwość komentowania jest wyłączona.