Zajęcia 1

• Universal Windows Platform (UWP):
  • jedno API, jeden projekt, jeden Sklep, wiele urządzeń ta sama aplikacja i te same dane
  • rozszerzenia SDK dla specyficznych urządzeń
  • https://msdn.microsoft.com/en-us/windows/uwp/get-started/whats-a-uwp

1. Anatomia aplikacji UA
   • https://msdn.microsoft.com/windows/uwp/layout/design-and-ui-intro
   • przykłady: aplikacja z nawigacją za pomocą kontrolki Pivot
2. Wzorzec MVVM
   • zmiana widoku w projekcie Kolory z zajęć WPF
3. XAML i kilka nowych kontrolek
   • Page, RelativePanel, SplitView, Pivot
   • AppBar, AppButton
   • MSDN: Lista kontrolek

Aplikacja wczytuje imię z kontrolki TextBox i po naciśnięciu przycisku wyświetla komunikat powitalny, np. „Witaj Krzychu”.

• zapoznaj się ze strukturą szablonu projektu Blank App
• uruchom aplikację lokalnie, w symulatorze oraz na emulatorze
• sprawdź wygląd aplikacji dla różnych rozdzielczości i widoków urządzeń dostępnych w VS
• wyodrębnij wspólne elementy stylu kontrolek TextBlock do zasobów (margines, wielkość fontu, umiejscowienie, itp.)

Utwórz nową aplikację (lub zmodyfikuj poprzednie zadanie) zawierającą nawigację pomiędzy widokami realizowaną za pomocą kontrolki Pivot. Dodaj komendy (przyciski AppBarButton) do paska zadań (AppBar) na spodzie strony. Na jednym z widoków („zakłądek” kontrolki Pivot) umieść kontrolkę RelativPanel i dodaj do niej kilka elementów pozycjonowanych względem siebie (np. kolorowe prostokąty, kontrolka Rectangle).

Przenieś aplikację Kolory z zajęć WPF zaimplementowaną zgodnie ze wzorcem MVVM na uniwersalną platformę. Wykorzystaj model i model widoku z tamtej aplikacji i utwórz nowy widok powiązany z logiką zawartą w modelu widoku.

• Pobież źródła projektu WPF: Kolory MVVM
• Utwórz nowy projekt UWP i dodaj do niego kod modelu i widoku modelu, i zmodyfikuj zawartość plików źródłowych tak aby wyeliminować ewentualne błedy kompilacji wynikające z róznic pomiędzy WPF a UWA.
• Dodaj widok zawierający kontrolkę prostokąt oraz 3 suwaki i powiąż je z odpowiednimi własnościami modelu widoku
• Komendę resetowania połącz z przyciskiem AppBarButton umiejscowionym w pojeminku AppBar na dole strony.