Zajęcia 2

  • Kontrolki:
    • SplitView (DisplayMode)
    • Frame
    • AutosuggestBox
  • Nawigacja pomiędzy widokami
    • App → Window → Frame → MainPage
    • Kontrolka Frame
    • Metoda Frame.Navigate
    • Metoda Page.OnNavigatedTo
    • Poruszanie wstecz i w przód: Frame.GoBack(), Frame.CanGoBack()
    • Przekazywanie argumentów do strony podczas nawigacji
  • Widoki adaptywne
    • Widoki dedykowane konkretnym urządzeniom, DeviceFamily-Mobile, DeviceFamily-Desktop

Zad - Podano hamburgera

Rozszerz aplikację Kolory o możliwość wyświetlania kilku stron i nawigowanie pomiędzy nimi. Dotychczasowa strona pozwalająca wybrać kolor za pomocą suwaków będzie teraz jedną ze stron, do których można nawigować za pomocą wysuwanego menu zrealizowanego za pomocą kontrolki SplitView. Widok aplikacji i sposób nawigacji powinien wyglądać analogicznie do aplikacji Finanse (MSN Money).

  • Dodaj w górnym lewym rogu przycisk „hamburgera”, który po naciśnięciu wysuwa panel nawigacyjny (panel kontrolki SplitView)
    • znak (ikona) hamburgera: FontFamily Segoe MDL2 Assets, Znak U+E700
  • W panelu nawigacyjnym kontrolki SplitView umieść przyciski realizujące nawigację do co najmniej 3 różnych stron. Strony wyświetlane są wewnątrz kontrolki Frame umieszczonej w prawym panelu kontrolki SplitView prezentującym treść. Przykładowo:
    • strona pierwsza niech zawiera widok z poprzedniego zadania - edytor koloru
    • widok drugi wyświetla listę wszystkich zdefiniowanych jako właściwości klasy Colors .
      Po wybraniu koloru z listy następuje automatyczny powrót do strony 1. Wybrany kolor jest przekazywany do edytora kolorów (ustawione zostają wartości RGB wybranego koloru).
  • Dodaj przyciski ze strzałkami w lewo i w prawo, umieszczone koło tytułu strony, pozwalające na cofanie się do poprzedniej strony i przechodzenie do następnej. W przypadku gdy przejście do poprzedniej strony jest niemożliwe wówczas przycisk cofania nie powinien być widoczny.
  • Dodaj w prawym górnym rogu kontrolkę do wyszukiwania z możliwością wyszukania nazwy koloru z listy na stronie 2. W trakcie pisania kontrolka powinna wyświetlać podpowiedzi z pasującymi nazwami kolorów.
  • Niech wciśnięcie klawisza wstecz w emulatorze urządzenia mobilnego również przenosi do poprzedniej strony.
  • Dodaj do aplikacji kolejne strony, które będą wyświetlane zależnie od rodziny urządzeń na których aplikacja zostanie uruchomiona.