Patronage 2016 Windows 10 Warsztaty

Warsztaty Windows 10 UWP
Hubert Taler
Tomasz Szczuko

● Informacje o środowisku pracy programisty
● WPF - co to właściwie jest? Kontrolki, layout
● Informacje o architekturze MVVM
● Pierwsza aplikacja MVVM -> live coding
● MVVM Light
● Aplikacja uniwersalna - co to jest?
● Aplikacja uniwersalna, Adaptive triggers, RelativePanel -> live coding
● Wasze pytania

WPF
Windows Presentation Foundation (WPF) – nazwa silnika graficznego i API bazującego na .NET 3.
WPF integruje interfejs użytkownika, grafikę 2D i 3D,multimedia, dokumenty (nazwa kodowa Metro) oraz
generowanie/rozpoznawanie mowy.
API w WPF opiera się na języku XML, dokładniej na jego implementacji o nazwie XAML
<StackPanel x:Name="contentPanel" Margin="8,32,0,0">
<TextBlock Text="Hello, world!" Margin="0,0,0,40"/>
<TextBlock Text="What's your name?"/>
<StackPanel x:Name="inputPanel" Orientation="Horizontal" Margin="
0,20,0,20">
<TextBox x:Name="nameInput" Width="280" HorizontalAlignment="
Left"/>
<Button x:Name="inputButton" Content="Say "Hello""/>
</StackPanel>
<TextBlock x:Name="greetingOutput"/>
</StackPanel>

WPF - Przegląd kontrolek
Panele :
● Grid - układ tabelaryczny (kolumny, wiersze)
● StackPanel - poziome lub pionowe rozmieszczenie
● WrapPanel - zwijany StackPanel
● DockPanel - panel dokujący
● Canvas - obszar roboczy
● Hub - nagłówek, sekcje
● RelativePanel - UWP
● SplitView - UWP

Różnice między wzorcami
W MVC kontroler obsługuje zdarzenia, manipuluje modelem, który zawiera logikę
biznesową, widok wyświetla dane z modelu. Jeden kontroler obsługuje kilka widoków.
W MVP dane z modelu są przekazywane do presentera a nie bezpośrednio do widoku,
presenter przekazuje je do widoku. Jeden presenter odnosi się do jednego widoku.
W MVVM dane z modelu są przekazywane do VievModelu, który może obsługiwać kilka
widoków. Widok nie wie nic o ViewModelu, wymaga tylko potrzebnych danych.

MVVM
● It separates the business and presentation layers, like MVP and MVC.
● Improve Structure/separation of concerns (View, ViewModel and Model).
● Enable a better Design/Developer Workflow.
● Enhance simplicity and testability.
● Enabled by the robust data binding capability of XAML.
● No need to use a code behind file (minimalist code-behind file).
● Provides application development ability for multiple environments.
● Powerful Data Binding, command, validation and much more.
● The designer and developer can work together.

Wady MVVM
● komplikacja kodu - ViewModel nie może komunikować się z warstwą View,
co w pewnych sytuacjach bardzo komplikuje powiązania,
● do obsługi jednego widoku należy tworzyć wiele klas, co sprawia że projekt
jest bardziej rozbudowany,
● duża ilość klas bazowych.

Model
public class Person
{
public String FirstName { get; set; }
public String LastName { get; set; }
public Person(String First, String Last)
{
FirstName = First;
LastName = Last;
}
}

View Model
public ObservableCollection<Person> Persons { get; set; }
public PersonViewModel()
{
Persons = new ObservableCollection<Person>()
{
new Person("Jan", "Kowalski"),
new Person("John","Smith")
};
}

View
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<ListView ItemsSource="{Binding Persons}">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBox Height="23" Name="FirstName" Text="{Binding FirstName}" Width="120" />
<TextBox Height="23" Name="LastName" Text="{Binding LastName}" Width="120" />
<Button Command="{Binding SaveCmd}" Height="30" Width="80">Zapisz</Button>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>

● MVVM Light
● UWP, Adaptive triggers -> live coding
● Wasze pytania

if (Windows.Foundation.Metadata.ApiInformation.IsTypePresent(
"Windows.Phone.UI.Input.HardwareButtons"))
{
Windows.Phone.UI.Input.HardwareButtons.CameraPressed +=
HardwareButtons_CameraPressed;
}

public Platform DetectPlatform()
{
bool isHardwareButtonsAPIPresent = ApiInformation.IsTypePresent("Windows.Phone.UI.Input.
HardwareButtons");
if (isHardwareButtonsAPIPresent)
{
return Platform.WindowsPhone;
} else
{
return Platform.Windows;
}
}

if (Windows.System.Profile.AnalyticsInfo.VersionInfo.DeviceFamily == "Windows.Mobile")
{
// code for phone
}
else
{
// other code
}

AdaptiveTrigger - live coding
<Grid x:Name="LayoutRoot">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState x:Name="WideState">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="600" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="LayoutRoot.Background"
Value="Green" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="NarrowState">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="LayoutRoot.Background"
Value="Red" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>

● MVVM Light
● UWP, RelativePanel -> live coding
● Wasze pytania

<RelativePanel BorderBrush="Gray" BorderThickness="10">
<Rectangle x:Name="RedRect" Fill="Red" MinHeight="100" MinWidth="100"/>
<Rectangle x:Name="BlueRect" Fill="Blue" MinHeight="100" MinWidth="100"
RelativePanel.RightOf="RedRect" />

<Rectangle x:Name="GreenRect" Fill="Green" MinHeight="100" Margin="0,5,0,0"
RelativePanel.Below="RedRect"
RelativePanel.AlignLeftWith="RedRect"
RelativePanel.AlignRightWith="BlueRect"/>
<Rectangle Fill="Yellow" MinHeight="100"
RelativePanel.Below="GreenRect"
RelativePanel.AlignLeftWith="BlueRect"
RelativePanel.AlignRightWithPanel="True"/>
</RelativePanel>
RelativePanel

RelativePanel
<RelativePanel>
<Rectangle x:Name="Red" Height="100" Width="200" Fill="Red"/>
<Rectangle x:Name="Blue" Height="100" Width="100" Fill="Blue"
RelativePanel.Below="Red"
RelativePanel.AlignRightWith="Red"/>
</RelativePanel>

RelativePanel - priorytety
● Panel alignment relationships (AlignTopWithPanel, AlignLeftWithPanel ...)
● Sibling alignment relationships (AlignTopWith, AlignLeftWith ...)
● Sibling positional relationships (Above, Below, RightOf, LeftOf)

RelativePanel - zagrożenie 1
<RelativePanel>
<Rectangle x:Name="Red" Height="100" Width="200" Fill="Red"/>
RelativePanel.Below="Red"
RelativePanel.LeftOf="Red"/>
</RelativePanel>

<RelativePanel>
<Rectangle x:Name="Red" Height="100" Width="200" Fill="Red"
RelativePanel.AlignHorizontalCenterWith="Blue"
RelativePanel.LeftOf="Blue"/>
RelativePanel.AlignHorizontalCenterWithPanel="True"
RelativePanel.AlignVerticalCenterWithPanel="True"/>
</RelativePanel>

<RelativePanel>
<Rectangle x:Name="Red" Height="100" Width="200" Fill="Red"
RelativePanel.Above="Blue"/>
RelativePanel.Below="Red"/>
</RelativePanel>

RelativePanel - Live coding
…
<RelativePanel HorizontalAlignment="Stretch"
Margin="20">
<TextBlock Text="First name"
x:Name="FirstNameLabel"
Margin="0,5,10,5"/>
<TextBox x:Name="FirstNameText"
Width="300" />
</RelativePanel>
…
<Setter Target="FirstNameText.(RelativePanel.RightOf)"
Value="FirstNameLabel" />
...
<Setter Target="FirstNameText.(RelativePanel.Below)"
Value="FirstNameLabel" />
...

● MVVM Light
● UWP, DeviceFamily specific views -> live coding
● Wasze pytania

DeviceFamily specific views - Type folder

DeviceFamily specific views - Type in file name

DeviceFamily specific views - overload
public MainPage()
{
if (AnalyticsInfo.VersionInfo.DeviceFamily == "Windows.Mobile")
{
if (usePrimary)
{
InitializeComponent(new Uri("ms-appx:///PrimaryMainPage.xaml", UriKind.Absolute));
}
else
{
InitializeComponent(new Uri("ms-appx:///SecondaryMainPage.xaml", UriKind.Absolute));
}
}
else
{
InitializeComponent();
}
}

Patronage 2016 Windows 10 Warsztaty

Recommandé

Recommandé

Contenu connexe

Similaire à Patronage 2016 Windows 10 Warsztaty

Similaire à Patronage 2016 Windows 10 Warsztaty (20)

Plus de intive

Plus de intive (20)

Patronage 2016 Windows 10 Warsztaty