Archiwa tagu: MVVM Light

Nawigacja w Windows Phone 8.1 i MVVM Light

 

Zanim przejdę do meritum, chciałem sprostować tytuł. Sugeruje on, że post będzie dotyczyć nawigacji tylko w WP 8.1, ale równie dobrze mogłoby być „nawigacja w Windows 10”. Poniżej przedstawiam infografikę którą widziałem ostatnio na Windows 10 Technology Summit zarówno u Kopacza jak i u Żaka. Droga do perfekcji

Wrzuciłem ją ponieważ idealnie pokazuje punkty odcięcia różnych wersji Windows Phone, czytaj brak kompatybilności 

Słowem wprowadzenia, nawigacja w windows phone przypomina trochę nawigację WWW, mamy linki – strony i parametry. Jeżeli chce mieć 3 strony:

  • główna
  • lista
  • szczegóły

i móc przechodzić z głównej na listę i z listy na szczegóły wybranego elementu to potrzebuję 2 rodzajów nawigacji. W pierwszym przypadku mówię „hej otwórz mi listę”, a w drugim przypadku „otwórz szczegóły elementu o takim id”.

Przy podejściu code behind nawet się nie zastanawialiśmy jak to zrobić. Przy podejściu MVVM też nie trzeba się za bardzo wysilać. Wystarczy tylko dodać nowe komendy i zaprogramować obsługę zdarzenia… ale moment to jest dopiero początek pisania aplikacji, a już się robi monotonnie, jestem leniwy więc pomyślmy nad tym chwilę 🙂

Po co mi N komend i N zdarzeń skoro mogę obsłużyć to 1 komendą? Dojście do finalnego rozwiązania trochę czasu mi zabrało, więc postanowiłem to upublicznić.

1 krok, w widoku do przycisku czy czego dusza zapragnie dodajemy komendę:

W naszym ViewModelu wstrzykujemy NavigateCommand, nasz IoC – ma stworzyć z niego obiekt – w tym celu jeśli używacie standardowego IoC MVVM Light zalecam jego rejestrację:

Wstrzykujemy przez konstruktor i inicjalizujemy publiczne pole… w ten sposób:

Zauważcie, że będąc leniwym przyjąłem sobie konwencję nazewniczą ViewModeli ViMo 🙂

A czym jest nasz tajemniczy NavigateCommand? Dziedziczy po ICommand i ma za zadanie wykonać przejście pomiędzy stronami. I tutaj musiałem sobie założyć, że jeśli chce przejść po prostu na inną stronę która nie potrzebuje parametru to przekazuje ciąg znaków w parametrze z nazwą tej strony. Jeżeli natomiast chcę przejść na stronę szczegółów to wypadałoby przekazać informacje dotyczące tego gdzie chcemy iść. Najlepiej pokaże o co tak naprawdę chodzi poniższe demo.

Ok, trochę tego jest. Po kolei, dostaje w metodzie Execute parametr który jest stringiem, zmienna par będzie zawierała „List”. Stworzyłem sobie enum’a który zawiera wszystkie interesujące mnie strony. Z zmiennej par dostaję wartość enum na podstawie której decyduje co dalej. Jeżeli sprawa jest prosta, to wystarczą zwykłe „case” i zwrócenie typu strony na którą chcemy iść. Przy parametrze który nie jest żadnym elementem enum’a, wiemy, że będzie to obiekt. Skąd wiemy, że będzie to obiekt? Ano, bo w widoku listy przekazuje go w parametrze, zobacz:

Korzystam z tego, że obiekt ToString (domyślnie, nie robimy override) zwróci mi pełną nazwę typu i sprawdzam czy pasuje do któregoś przypadku.

Oczywiście jeżeli parametr nie pasuje nigdzie to rzucamy wyjątkiem.

W metodzie Execute naszej komendy wołam metodę przejścia do strony według typu. Serwis NavService wygląda tak:

Nic specjalnego, znajdziemy taki serwis w każdym sklepie z serwisami 🙂

Nie zapomnijcie jeszcze dodać rejestracji:

Jeżeli ktoś ma jakiś pomysł jak to usprawnić to zapraszam do dyskusji