patronage 2016 windows 10 warsztaty
TRANSCRIPT
Warsztaty Windows 10 UWPHubert TalerTomasz 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
● 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
WPFWindows 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
● 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
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.
● 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
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>
● 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
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:vm="clr-namespace:WpfApplication1.ViewModel"
Title="MainWindow" Height="350" Width="525">
<Grid DataContext="{Binding MainViewModel, Source={StaticResource Locator}}"/>
</Window>
● 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
● 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?
● 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>
● 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?
● 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" /> <!-- Width is not set on the green and yellow rectangles. It's determined by the RelativePanel properties. --> <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"/>
<Rectangle x:Name="Blue" Height="100" Width="100" Fill="Blue" RelativePanel.Below="Red" RelativePanel.LeftOf="Red"/>
</RelativePanel>
RelativePanel - zagrożenie 2
<RelativePanel>
<Rectangle x:Name="Red" Height="100" Width="200" Fill="Red" RelativePanel.AlignHorizontalCenterWith="Blue" RelativePanel.LeftOf="Blue"/>
<Rectangle x:Name="Blue" Height="100" Width="100" Fill="Blue" RelativePanel.AlignHorizontalCenterWithPanel="True" RelativePanel.AlignVerticalCenterWithPanel="True"/>
</RelativePanel>
RelativePanel - zagrożenie 3
<RelativePanel> <Rectangle x:Name="Red" Height="100" Width="200" Fill="Red" RelativePanel.Above="Blue"/>
<Rectangle x:Name="Blue" Height="100" Width="100" Fill="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" />...
● 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?
● UWP, DeviceFamily specific views -> live coding● Wasze pytania
DeviceFamily specific views - Type folder
DeviceFamily specific views - Type in file name
DeviceFamily specific views - overloadpublic 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(); }}
● 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
Thank you!