Zajęcia 1

Zagadnienia

• 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

Zad - Hello world

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.)

Zad - Piaskownica

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).

Zad - Kolory

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.