Nguyen Tuan | Microsoft Certified Trainer

• Windows Design

• Designing an Applications

• Working with XAML Layout

• Styles & Themes in WP8.

• Design Considerations

• Model-View-ViewModel

• Application Lifecycle

Agenda

8/16/2014 3

Windows Phone Design

Metro styles or Windows Phone Design Style?

• The Windows Phone team have taken a lot of trouble over the look and feel of the phone

• They have created a design style, inspired by metropolitan signage, to express this

• Programs on the phone should reflect this style

4

Take care of the details

Make it safe and reliable

Uncompromising Sensitivity to Weight, Balance and Scale

Align to the grid

Principle: Be fast and fluid

Life is mobile

Delight with motion

Design for touch

Intuitive interaction

Be responsive and ready

Immersive and compelling

Principles: Do more with less

Be great at something

Focused and direct

Content before chrome

Inspire confidence

Principle: Authentically Digital

Don’t Try to be What It’s NOT

Cloud connected

Dynamic and alive

Beautiful use of typography

Bold vibrant colours

Motion

Principle: Win as one

Fit into the UI model

Reduce redundancy

Work together to complete scenarios

Tools and templates are designed to scale

Principles

Pride in craftsmanship

Be Fast and Fluid

Win as One

Do More with Less

Authentically Digital

13

Paper prototyping

User Experience Bar Document

18

19

20

21

22

23

24

Introduction to XAML Layout

8/16/201425

Pivot Pages• <phone:PhoneApplicationPage

x:Class="ContosoCookbook.RecipeDetailPage"... />

<Grid x:Name="LayoutRoot" Background="Transparent"><phone:Pivot Title=“PIVOT APPLICATION">

<!--Pivot item one--><phone:PivotItem Header=“item1">

<Grid></Grid>

</phone:PivotItem><!--Pivot item two--><phone:PivotItem Header=“item2">

<Grid></Grid>

</phone:PivotItem></phone:Pivot>

</Grid></phone:PhoneApplicationPage>

27

Pivot Control

Pivot Headers

Pivot Items Control

29

30

XAML Element Class Hierarchy

• The XAML class hierarchy is quite complex

• Everything is based on the FrameworkElement class which contains the fundamental properties of all elements

• You can derive your own components if you wish

31

FrameworkElement

TextBlock

TextBox ContentControl

ButtonBase

Button

Control

Elements and XAML

32

<!--Pivot item one--><phone:PivotItem Header="recipe"><Grid><Grid.RowDefinitions><RowDefinition Height="240"/><RowDefinition Height="*"/><RowDefinition Height="Auto"/>

</Grid.RowDefinitions><Image x:Name="RecipeImage" Stretch="UniformToFill"/><ScrollViewer Grid.Row="1"><TextBlock x:Name="DirectionsTextBlock" TextWrapping="Wrap" />

</ScrollViewer><StackPanel Grid.Row="2" Orientation="Horizontal"><TextBlock Text="Prep time: " /><TextBlock MinWidth="200" x:Name="PrepTimeTextBlock" />

</StackPanel></Grid>

</phone:PivotItem>

Grid Container Element

33

<!--Pivot item one--><phone:PivotItem Header="recipe"><Grid><Grid.RowDefinitions><RowDefinition Height="240"/><RowDefinition Height="*"/><RowDefinition Height="Auto"/>

</Grid.RowDefinitions><Image x:Name="RecipeImage" Stretch="UniformToFill"/><ScrollViewer Grid.Row="1"><TextBlock x:Name="DirectionsTextBlock" TextWrapping="Wrap" />

</ScrollViewer><StackPanel Grid.Row="2" Orientation="Horizontal" ><TextBlock Text="Prep time: " /><TextBlock MinWidth="200" x:Name="PrepTimeTextBlock" />

</StackPanel></Grid>

</phone:PivotItem>

8/16/2014 34

• Button at bottom of Designer window can be used to show a 12px alignment Grid

• Useful for setting alignment of elements

• Available in Blend

• Now also available in Visual Studio

Visual Studio and Blend Alignment Grid

8/16/2014 35

• All new projects include AlignmentGrid.png in the Assets folder

• You can overlay the grid at design and runtime by uncommenting the XAML that shows it

• Included near the foot of MainPage.xaml• Copy to other pages to show on those

<!--Uncomment to see an alignment grid to help ensure your controls are

aligned on common boundaries. The image has a top margin of -32px to

account for the System Tray. Set this to 0 (or remove the margin altogether)

if the System Tray is hidden.

Before shipping remove this XAML and the image itself.-->

<!--<Image Source="/Assets/AlignmentGrid.png" VerticalAlignment="Top" Height="800" Width="480" Margin="0,-32,0,0" Grid.Row="0"

Grid.RowSpan="2" IsHitTestVisible="False" />-->

Alignment Grid Overlay

36

Using the Alignment Grid

8/16/2014 37

<Image Source="/Assets/AlignmentGrid.png" VerticalAlignment="Top"Height="800" Width="480" Margin="0,-32,0,0"Grid.Row="0" Grid.RowSpan="2" IsHitTestVisible="False" />

<phone:PivotItem Header="recipe"><Grid>

<Grid.RowDefinitions><RowDefinition Height="240"/><RowDefinition Height="*"/><RowDefinition Height="Auto"/>

</Grid.RowDefinitions><Image x:Name="RecipeImage" Margin="12" Stretch="UniformToFill"/><ScrollViewer Grid.Row="1">

<TextBlock x:Name="DirectionsTextBlock" TextWrapping="Wrap" Margin="12,0,0,0" /></ScrollViewer><StackPanel Grid.Row="2" Orientation="Horizontal" Margin="12" HorizontalAlignment="Left" >

<TextBlock Text="Prep time: " Margin="0" /><TextBlock x:Name="PrepTimeTextBlock" />

</StackPanel></Grid>

</phone:PivotItem>

Use Margin Property to Insert Spacing

38

DemoGridsRowsAndColumns

Styles and Themes

8/16/2014

• You can set colors and font sizes for elements directly in XAML:<ScrollViewer Grid.Row="1"><TextBlock x:Name="DirectionsTextBlock" TextWrapping="Wrap"

Margin="12,0,0,0" Foreground="White" FontSize="12" /></ScrollViewer><StackPanel Grid.Row="2" Orientation="Horizontal" Margin="12" HorizontalAlignment="Left" ><TextBlock Text="Prep time: " Margin="0" Foreground="White"/><TextBlock x:Name="PrepTimeTextBlock" Foreground="LightGray" FontSize="24" />

</StackPanel>

• This is generally a BAD IDEA!• Difficult to match builtin styles

• Difficult to work with Windows Phone Themes

Applying Styles to Elements

8/16/2014 41

Foreground Colors and Themes

8/16/2014 42

<phone:PivotItem Header="recipe"><Grid><Grid.RowDefinitions><RowDefinition Height="240"/><RowDefinition Height="*"/><RowDefinition Height="Auto"/>

</Grid.RowDefinitions><Image x:Name="RecipeImage" Margin="12" Stretch="UniformToFill"/><ScrollViewer Grid.Row="1"><TextBlock x:Name="DirectionsTextBlock" TextWrapping="Wrap"

Margin="12,0,0,0" Style="{StaticResource PhoneTextSmallStyle}" /></ScrollViewer><StackPanel Grid.Row="2" Orientation="Horizontal" Margin="12" HorizontalAlignment="Left" ><TextBlock Text="Prep time: " Margin="0" Style="{StaticResource PhoneTextNormalStyle}" /><TextBlock x:Name="PrepTimeTextBlock" Style="{StaticResource PhoneTextSubtleStyle}" />

</StackPanel></Grid>

</phone:PivotItem>

Use Built-In Styles

43

New in VS2012 – Apply Styles in Visual Studio

8/16/2014 44

DemoAlignmentAndMargins

The MVVM pattern

From MVC

Model View

Controller

Presentation Model(ViewModel)

To MVVM

Model View

The relationships

View

ViewModel

DataBinding Commands ServicesMessages

Model

Commands

“Point of entry” for a method Can be data boundICommand interface

Execute methodCanExecute methodCanExecuteChanged event

Implementing commands

It’s quite a lot of workMost toolkits and frameworks have a “relay” implementation

RelayCommand (MVVM Light)DelegateCommand (PRISM)…

Why MVVM?

Model

public class KittenObject{

public KittenObject() { }public string KittenImage { get; set; }public string KittenName { get; set; }public string KittenAge { get; set; }

}

Why MVVM?

ViewModel

public class MainViewModel : INotifyPropertyChanged{

public event PropertyChangedEventHandler PropertyChanged;private void NotifyPropertyChanged(String propertyName){

PropertyChangedEventHandler handler = PropertyChanged;if (null != handler){

handler(this, new PropertyChangedEventArgs(propertyName));}

}}

Why MVVM?

ViewModel

private string _sampleProperty = "my start value";public string SampleProperty{

get { return _sampleProperty; }set{

_sampleProperty = value;NotifyPropertyChanged("SampleProperty");

}}

Why MVVM?

View

<TextBlock Text="{Binding SampleProperty, Mode=TwoWay}" />

Why MVVM?

View

<phone:LongListSelectorItemsSource="{Binding MyListOfItems}"SelectedItem="{Binding MySelectedItem, Mode=TwoWay}" />

Model-View-ViewModel

View

ViewModel

Commands

Data Binding

Model

Data Binding Modes

• The Mode property determines how changes are synchronized between the target control and data source

• OneTime – Control property is set once to the data value and any subsequent changes are ignored

• OneWay – Changes in the data object are synchronized to the control property, but changes in the control are not synchronized back to the data object

• TwoWay – Changes in the data object are synchronized to the control property and vice-versa

<TextBlock x:Name="ContentText" Text="{Binding LineThree, Mode=OneWay}"/>

• In the XAML snippet, make sure that the DataContext is set to an instance of the ViewModel class.

• The ViewModel class exposes an AddCommand property of type AddItemCommand

• The ViewModel is responsible for actually adding a new item

Commands

<Button Command="{Binding AddCommand}"

CommandParameter="Untitled" Content="Button"

HorizontalAlignment="Center"

VerticalAlignment="Center"/>

class AddItemCommand : ICommand

{

ViewModel _viewModel;

public AddItemCommand(ViewModel viewModel)

{

_viewModel = viewModel;

}

public event EventHandler CanExecuteChanged;

public bool CanExecute(object parameter)

{

return true;

}

public void Execute(object title)

{

_viewModel.AddItem(title as string);

}

}

MVVM Benefits

• Reuse Model and View-Model code

• Test the ViewModel with unit tests

• Maintainability

• Can show design-time data in Expression Blend and the Visual Studio designer

DemoSimpleDataBinding

MVVM Libraries

http://caliburnmicro.codeplex.com/http://mvvmlight.codeplex.com/

Rob EisenbergLaurent Bugnion

Not running

Running

Launching

Running

Not running

Running

LaunchingClosing

Deactivating

Dormant

ExitApplication_Closing

DeactivateApplication_Deactivated

Closing vs Deactivating

Dormant

Not running

Running

LaunchingClosing

DeactivatingActivating

Dormant

Dormant

Tombstoned

Not running

Running

LaunchingClosing

DeactivatingActivating

Dormant

Tombstoned

Tombstoned

Not running

Running

LaunchingClosing

DeactivatingActivating

Dormant

Tombstoned or Dormant?

private void Application_Activated(object sender, ActivatedEventArgs e){

if (e.IsApplicationInstancePreserved){

// Dormant - objects in memory intact}else{

// Tombstoned - need to reload}

}

Fast Application Resume

Tombstoned

Not running

Running

LaunchingClosing

DeactivatingActivating

Dormant

Enabling FAR in Properties\WMAppManifest.xml

<Tasks><DefaultTask Name ="_default" NavigationPage="MainPage.xaml">

<BackgroundExecution><ExecutionType Name="LocationTracking" />

</BackgroundExecution></DefaultTask>

</Tasks>

<Tasks><DefaultTask Name ="_default“ NavigationPage="MainPage.xaml“ />

</Tasks>

Why Not Use FAR All The Time?

Launch from Start

Page 1 Page 2

Launch from Start

Page 2deep link

Why Not Use FAR All The Time?

Launch from Start

Page 1 Page 2

Launch from Start

Page 2FARPage 1

Demo1. AppLifeCycle2. Lifetime

Review

• Windows Phone Design has five key principles:• Clean, Light, Open, Fast• Celebrate Typography• Alive in Motion• Content, Not Chrome• Authentically Digital

• WP8 use XAML to express the design of their user interface• The design is expressed in a XAML text file that defines and arranges display elements

• There are a set of project templates for applications based on the Windows Phone design

• In Blend, you can create design-time data to aid during design of a UI• Databinding in XAML allows you to declaratively markup UI elements to link

them to a property of a data class• List controls define layout using XAML Templates