Windows Phone 8 progamming

1. Nguyen Tuan | Microsoft Certified Trainer

2. • Windows Design
• Designing an Applications
• Working with XAML Layout
• Styles & Themes in WP8.
• Design Considerations
• Model-View-ViewModel
• Application Lifecycle
Agenda

3. 8/16/2014 3
Windows Phone Design

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

6. Take care of the details
Make it safe and reliable
Uncompromising Sensitivity to Weight, Balance and Scale
Align to the grid

7. Principle: Be fast and fluid
Life is mobile
Delight with motion
Design for touch
Intuitive interaction
Be responsive and ready
Immersive and compelling

8. Principles: Do more with less
Be great at something
Focused and direct
Content before chrome
Inspire confidence

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

10. Principle: Win as one
Fit into the UI model
Reduce redundancy
Work together to complete scenarios
Tools and templates are designed to scale

11. Principles
Pride in craftsmanship
Be Fast and Fluid
Win as One
Do More with Less
Authentically Digital

13. 13

14. Paper prototyping

15. User Experience Bar Document

18. 18

19. 19

20. 20

21. 21

22. 22

23. 23

24. 24

25. Introduction to XAML
Layout
8/16/2014
2
5

27. 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. 29

30. 30

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

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

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

34. 8/16/2014 34

35. • 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

36. • 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

37. 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" />

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

39. Demo
GridsRowsAndColumns

40. Styles and Themes
8/16/2014

41. • 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

42. Foreground Colors and Themes
8/16/2014 42

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

44. New in VS2012 – Apply Styles in Visual Studio
8/16/2014 44

45. Demo
AlignmentAndMargins

46. The MVVM pattern

47. From MVC
Model View
Controller

48. Presentation Model
(ViewModel)
To MVVM
Model View

49. The relationships
View
ViewModel
DataBinding Commands Services
Messages
Model

50. Commands
“Point of entry” for a method Can be data
bound
ICommand interface
Execute method
CanExecute method
CanExecuteChanged event

51. Implementing commands
It’s quite a lot of work
Most toolkits and frameworks have a “relay”
implementation
RelayCommand (MVVM Light)
DelegateCommand (PRISM)
…

52. Why MVVM?
Model
public class KittenObject
{
public KittenObject() { }
public string KittenImage { get; set; }
public string KittenName { get; set; }
public string KittenAge { get; set; }
}

53. 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));
}
}
}

54. Why MVVM?
ViewModel
private string _sampleProperty = "my start value";
public string SampleProperty
{
get { return _sampleProperty; }
set
{
_sampleProperty = value;
NotifyPropertyChanged("SampleProperty");
}
}

55. Why MVVM?
View
<TextBlock Text="{Binding SampleProperty, Mode=TwoWay}" />

56. Why MVVM?
View
<phone:LongListSelector
ItemsSource="{Binding MyListOfItems}"
SelectedItem="{Binding MySelectedItem, Mode=TwoWay}" />

57. Model-View-ViewModel
View
ViewModel
Commands
Data
Binding
Model

58. 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}"/>

59. • 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);
}
}

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

61. Demo
SimpleDataBinding

62. MVVM Libraries
http://caliburnmicro.codeplex.com/http://mvvmlight.codeplex.com/
Rob EisenbergLaurent Bugnion

64. Not running
Running
Launching
Running

65. Not running
Running
LaunchingClosing
Deactivating
Dormant
Exit
Application_Closing
Deactivate
Application_Deactivated
Closing vs Deactivating
Dormant

66. Not running
Running
LaunchingClosing
DeactivatingActivating
Dormant
Dormant

67. Tombstoned
Not running
Running
LaunchingClosing
DeactivatingActivating
Dormant
Tombstoned

68. 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
}
}

69. Fast Application Resume
Tombstoned
Not running
Running
LaunchingClosing
DeactivatingActivating
Dormant

70. Enabling FAR in PropertiesWMAppManifest.xml
<Tasks>
<DefaultTask Name ="_default" NavigationPage="MainPage.xaml">
<BackgroundExecution>
<ExecutionType Name="LocationTracking" />
</BackgroundExecution>
</DefaultTask>
</Tasks>
<Tasks>
<DefaultTask Name ="_default“ NavigationPage="MainPage.xaml“ />
</Tasks>

71. Why Not Use FAR All The Time?
Launch
from
Start
Page 1 Page 2
Launch
from
Start
Page 2deep link

72. Why Not Use FAR All The Time?
Launch
from
Start
Page 1 Page 2
Launch
from
Start
Page 2FARPage 1

73. Demo
1. AppLifeCycle
2. Lifetime

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