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

Anatomia aplikacji UA

https://msdn.microsoft.com/windows/uwp/layout/design-and-ui-intro

przykłady: aplikacja z nawigacją za pomocą kontrolki Pivot

Wzorzec MVVM

zmiana widoku w projekcie Kolory z zajęć WPF

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.