M3: Building Windows

Phone Applications
Andy Wigley | Microsoft Technical Evangelist
Rob Tiffany | Microsoft Enterprise Mobility Strategist
Target Agenda | Day 1
Module and Topic | 10-minute breaks after each session / 60-minute meal break
Planned
Duration
1a - Introducing Windows Phone 8 Application Development | Part 1 50:00
1b - Introducing Windows Phone 8 Application Development | Part 2 50:00
2 - Designing Windows Phone Apps 50:00
3 - Building Windows Phone Apps 50:00
4 - Files and Storage on Windows Phone 8 50:00
Meal Break | 60-minutes 60:00
5 - Windows Phone 8 Application Lifecycle 50:00
6 - Background Agents 25:00
7 - Tiles and Lock Screen Notifications 25:00
8 - Push Notifications 30:00
9 - Using Phone Resources on Windows Phone 8 50:00
Target Agenda | Day 2
Module and Topic | 10-minute breaks after each session / 60-minute meal break
Planned
Duration
10 - App to App Communication 35:00
11 - Network Communication on Windows Phone 8 50:00
12 - Proximity Sensors and Bluetooth 35:00
13 - Speech Input on Windows Phone 8 35:00
14 - Maps and Location on Windows Phone 8 35:00
15 - Wallet Support 25:00
16 - In App Purchasing 25:00
Meal Break | 60-minutes 60:00
17 - The Windows Phone Store 50:00
18 - Enterprise Applications in Windows Phone 8: Architecture and Publishing 50:00
19 - Windows 8 and Windows Phone 8 Cross Platform Development 50:00
20 Mobile Web 50:00
Page Navigation
Application Bar
Handling Page Orientation Changes
Handling Different Screen Resolutions
Localization
Windows Phone Toolkit
Page Transitions
Module Agenda
With the previous module, we go through the essential knowledge you need to build an application
Page Navigation
Frame and Page
Frame
Top-level container control
PhoneApplicationFrame class
Contains the page control and system
elements such as system tray and
application bar
Page
Fills entire content region of the frame
PhoneApplicationPage-derived class
Contains a title
Optionally surfaces its own application bar

Page Navigation
XAML apps on Windows Phone use a
page-based navigation model
Similar to web page model
Each page identified by a URI
Each page is essentially stateless
private void HyperlinkButton_Click_1(
object sender, RoutedEventArgs e)
{
NavigationService.Navigate(
new Uri("/SecondPage.xaml", UriKind.Relative));
}
Navigating Back
Application can provide controls to navigate
back to preceding page



The hardware Back key will also navigate back
to preceding page
No code required built-in behaviour
private void Button_Click_1(
object sender, RoutedEventArgs e)
{
NavigationService.GoBack();
}
Overriding Back Key
May need to override Back hardware key if back to previous page is not logical behaviour
For example, when displaying a popup panel
User would expect Back key to close the panel,
not the page
Overriding the Back Key
<phone:PhoneApplicationPage
x:Class="PhoneApp1.MainPage"

shell:SystemTray.IsVisible="True"
BackKeyPress="PhoneApplicationPage_BackKeyPress">
In code:
private void PhoneApplicationPage_BackKeyPress(object sender,
System.ComponentModel.CancelEventArgs e)
{
e.Cancel = true; // Tell system we've handled it

// Hide the popup...
...
}
Passing Data Between Pages
Can pass string data between pages using query strings


On destination page

private void passParam_Click(object sender, RoutedEventArgs e)
{
NavigationService.Navigate(new Uri("/SecondPage.xaml?msg=" + textBox1.Text, UriKind.Relative));
}
protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
{
base.OnNavigatedTo(e);

string querystringvalue = "";
if (NavigationContext.QueryString.TryGetValue("msg", out querystringvalue))
textBlock1.Text = querystringvalue;
}
Passing Objects Between Pages
Often, you will pass a data object from one page to another
E.g., user selects an item in a list and navigates to a Details
page
One solution is to store your ViewModel (that is, data)
in your App class
Global to whole application
Pass the ID of the selected item in query string

// Navigate to the new page
NavigationService.Navigate(new Uri("/DetailsPage.xaml?selectedItem=" +
(MainLongListSelector.SelectedItem as ItemViewModel).ID,
UriKind.Relative));
Handling Non Linear Navigation
Design your app navigation strategy carefully!
If you navigate from third page to main page and
your user then presses the Back key, what happens?
User expects app to exit
App actually navigates back to Third Page
Solution for Windows Phone 7.0 was complex code
to handle back navigation correctly, or the Non-Linear
Navigation Recipe library from AppHub
Windows Phone APIs:
NavigationService.RemoveBackEntry()
NavigationService.RemoveBackEntry()
When Third Page navigates back to MainPage, put a marker in the query string


In OnNavigatedTo() in MainPage, look for the marker and if present, remove the Third
Page, SecondPage and original instance of MainPage from the navigation history stack
NavigationService.Navigate(new Uri("/MainPage.xaml?homeFromThird=true", UriKind.Relative));
protected override void OnNavigatedTo(NavigationEventArgs e)
{
if (e.NavigationMode == System.Windows.Navigation.NavigationMode.New
&& NavigationContext.QueryString.ContainsKey("homeFromThird"))
{
NavigationService.RemoveBackEntry(); // Remove ThirdPage
NavigationService.RemoveBackEntry(); // Remove SecondPage
NavigationService.RemoveBackEntry(); // Remove original MainPage
}
base.OnNavigatedTo(e);
}
Demo 1: Page Navigation
ApplicationBar
Application Chrome System Tray and Application Bar
Use the ApplicationBar instead of creating your own menu
system
Up to 4 buttons plus optional menu
Swipe up the bar to bring up the menu
System will colorize button according to users selected theme
ApplicationBar
ApplicationBar in Xaml
<phone:PhoneApplicationPage
x:Class="CRMapp.MainPage
>

<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar x:Name="AppBar" Opacity="1.0" IsMenuEnabled="True">
<shell:ApplicationBar.Buttons>
<shell:ApplicationBarIconButton x:Name="NewContactButton" IconUri="Images/appbar.new.rest.png"
Text="New" Click="NewContactButton_Click"/>
<shell:ApplicationBarIconButton x:Name="SearchButton" IconUri="Images/appbar.feature.search.rest.png"
Text="Find" Click="SearchButton_Click"/>
</shell:ApplicationBar.Buttons>
<shell:ApplicationBar.MenuItems>
<shell:ApplicationBarMenuItem x:Name="GenerateMenuItem" Text="Generate Data"
Click="GenerateMenuItem_Click" />
<shell:ApplicationBarMenuItem x:Name="ClearMenuItem" Text="Clear Data"
Click="ClearMenuItem_Click" />
</shell:ApplicationBar.MenuItems>
</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>

</phone:PhoneApplicationPage>
ApplicationBar and Landscape
ApplicationBar Opacity
If Application Bar opacity is less than 1, displayed page will
be the size of the screen Application Bar overlays screen
content
If Opacity is 1, displayed page is resized to the area of the
screen not covered by the Application Bar
ApplicationBar Design in Blend and now in VS Too!
Demo 2: Designing
an ApplicationBar
Handling Screen
Orientation Changes
This application does not work in landscape
mode at the moment
Not all applications do, or need to
You can configure applications to support
portrait or landscape
Phone UI Design Orientation
New Device Tab in Visual Studio 2012
View Designer in Portrait or Landscape
Selecting Orientations
A XAML property for the phone application page lets you select the orientation
options available
Your application can bind to an event which is fired when the orientation changes
SupportedOrientations="Portrait"
SupportedOrientations="PortraitOrLandscape"
Layout May Need Altering
Layout unaltered
Layout optimised for
landscape
Using a Grid to Aid Landscape Layout
In the Grid, the second column is unused in Portrait
<phone:PivotItem Header="recipe">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="240"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
...
</Grid>
Row 0
Row 1
Row 2
Row 3
Column 0
Move Elements in Landscape Layout
In Landscape, the recipe description moves into the second row and the second column and the third
row of the grid is now unused. Since that rows Height is *, it shrinks to zero.
<phone:PivotItem Header="recipe">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="240"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
...
</Grid>
Row 0
Row 1
Row 2
Row 3
Column 0 Column 1
Moving Elements
private void PhoneApplicationPage_OrientationChanged(object sender, OrientationChangedEventArgs e)
{
if (this.Orientation == PageOrientation.LandscapeLeft || this.Orientation ==
PageOrientation.LandscapeRight)
{
DirectionsScrollViewer.SetValue(Grid.RowProperty, 1);
DirectionsScrollViewer.SetValue(Grid.ColumnProperty, 1);
}
else
{
DirectionsScrollViewer.SetValue(Grid.RowProperty, 2);
DirectionsScrollViewer.SetValue(Grid.ColumnProperty, 0);
}
}
Demo 4:
Orientation Handling
Supporting Multiple
Screen Resolutions
Three Screen Resolutions
WVGA
800 x 480
15:9
WXGA
1280 x 768
15:9
720p
1280 x 720
16:9
So I Have to Do Three Different UIs?
Well, No
As developers, we work with device independent pixels
OS applies a scale factor to the actual resolution

Resolution Aspect ratio Scale Factor Scaled resolution
WVGA 800 x 480 15:9 1.0x scale 800 x 480
WXGA 1280 x 768 15:9 1.6x scale 800 x 480
720p 1280 x 720 16:9
1.5x scale, 80 pixels
taller (53 pixels, before
scaling)
853 x 480
Scaled Resolutions
WVGA WXGA 720p
8
0
0

8
0
0

8
5
3

480
480
480
Set Grid Row Height to Auto to size according
to the controls placed within it
Set Grid Row Height to * to take up all the rest
of the space
If you size multiple rows using *, available
space is divided up evenly between them
Use Auto and * on Grid Rows To Ensure Good Layout
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="240"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
...
</Grid>
Adaptive Layout Using Grid
WVGA 720p
Image height sized
explicitly at 240px
Bottom row is Auto so
sized to hold a TextBlock
Directions row is * so gets
everything thats left ends
up taller on 720p
Images
In most cases, you should supply images targeting the WXGA (1280 x 768) screen
WXGA assets are of the highest quality
Will automatically scale down on WVGA phones
Still look great on 720p (1280 x 720)
If you want, you can include images at each of the three resolutions in your project
E.g. MyImage.wvga.png, MyImage.wxga.png and MyImage.720p.png
At runtime, get Application.Current.Host.Content.ScaleFactor to determine the resolution
of the screen on the current phone, returns 100 for WVGA, 160 for WXGA and
150 for 720p
Write code to load image at runtime appropriate for the current screen resolution
Splash Screens
To add a splash screen to your project suitable for all resolutions, add a file as content
called SplashScreenImage.jpg at 768 x 1280 resolution
The framework automatically scales it to the correct size on different resolution screens
If you want to provide pixel-perfect splash screens for all resolutions, add images with the
following names:
SplashScreenImage.Screen-WVGA.jpg
SplashScreenImage.Screen-WXGA.jpg
SplashScreenImage.Screen-720p.jpg
In addition to these images, you must still include the default SplashScreenImage.jpg file

App Icon and Tiles
You must supply app icon and tile images sized for WXGA
The framework automatically scales to the correct size for WVGA and 720p
Tile size WXGA
Application Icon 100 100
Small 159 159
Medium 336 336
Large 691 336
Demo 4: Screen
Resolutions
Introduction to
Localization
Windows Phone 8 Language Support
Windows Phone 8 supports 50 display languages (shipped with
the phone depending on market and country/region) and
selectable by the user on the language+region section of the
Settings page
Windows Phone 7.1 supported only 24
Windows Phone 8 allows you to build apps that read from
right to left
New Project Templates Have Localization Support Built In
Every new project you create in Visual Studio 2012 has a class
included called LocalizedStrings
Simply provides programmatic access to resources
An instance of this is create in App.xaml in the Application Resources
with the key LocalizedStrings
Every new project also includes a resources file:
Resources\AppResources.resx
Some strings already defined in here
Create all your string literals in here to support localization
All new projects also included commented-out code in
MainPage.xaml.cs to setup a localized Application Bar

Accessing String Resources from XAML
Databind the Text property of your
TextBlock and other controls to the
StaticResource with a key of
LocalizedStrings
That is an instance of the
LocalizedStrings class
It provides access to string resources
Add Support for Additional Languages
Double-click project properties
to open the Properties editor
On the Application tab
Check each of the
languages your app
will support
Save the Project Properties
Visual Studio creates new
AppResources files for each
selected language/culture
Translate the Additional Languages Resource Files
Visual Studio adds a resource file for each additional language that the app will support.
Each resource file is named using the correct culture/language name, as described in
Culture and language support for Windows Phone in the documentation
For example:
For the culture Spanish (Spain), file is AppResources.es-ES.resx.
For the culture German (Germany), file is AppResources.de-DE.resx.
Supply appropriate translations in each resource file
Double-click WMAppManifest.xml to open the
manifest editor
On the Packaging tab
Set the Default Language to the
language of your default resources
This identifies the language of the
strings in the default resources file.
E.g., if the strings in the default resources
file are English (UK) language strings,
you would select English (United Kingdom)
as the Neutral Language for the project
Define the Default Language
Demo 5: Localization
The Windows Phone Toolkit
Windows Phone Toolkit
A product of the Microsoft Windows Phone team
Formerly known as the Silverlight Toolkit
The Windows Phone Toolkit adds new functionality out of band from the official product
control set
Includes full open source code, samples, documentation, and design-time support for
controls for Windows Phone
Refresh every three months or so
Bug fixes
New controls
How to Get the Windows Phone Toolkit
http://phone.codeplex.com
Get source code, including the
sample application
No MSI! Install binaries from
NuGet only
NuGet
Package management system for .NET
Simplifies incorporating third-party libraries
Developer focused
Free, open source

NuGet client is included in Visual
Studio 2012 including Express Editions!
Use NuGet to add libraries such as
the Windows Phone Toolkit to projects
Controls in the
Windows Phone Toolkit
ContextMenu
DatePicker and TimePicker
ToggleSwitch
WrapPanel
ListPicker
WP7 ComboBox
Dropdown list for small number of
items
Full screen selector for longer lists

And Many More
Custom MessageBox
Rating control
AutoCompleteBox
ExpanderView
HubTile
more

Download the source from http://phone.codeplex.com, build the sample application and
deploy to emulator or device
Page Transitions
and TiltEffect
Page Transitions
Easy way to add page transitions to your app similar to those in
the built-in apps
Different transitions are included
Roll, Swivel, Rotate, Slide and Turnstile
Start by using the TransitionFrame control from the Windows
Phone Toolkit instead of the default PhoneApplicationFrame
Set in InitializePhoneApplication() method in App.Xaml.cs:

Enabling Transitions on a Page
Declare namespace for Windows Phone Toolkit assembly


Under <phone:PhoneApplicationPage> root element, add transition you want
TiltEffect
Add additional visual feedback for control interaction
Instead of simple states such as Pressed or Unpressed, controls with TiltEffect enabled
provide motion during manipulation
For example, Button has a subtle 3D effect and appears to move into the page when
pressed and bounce back again when released
Easy to enable TiltEffect for all controls on a page


Also can apply to individual controls
Demo 6: Page
Transitions and TiltEffect
Review
Navigation to pages is performed on the basis of a URI (Uniform Resource Indicator) values
The back button normally navigates back to the previous page, but this can be overridden
The URI can contain a query string to pass contextual string data
Support for Localization is incorporated into the project templates
Supporting different screen resolutions is simplified because they are scaled to a near-identical effective resolution.
Supply images scaled for WXGA and they will be scaled down automatically for lower screen resolutions.
The Windows Phone Toolkit is an out of band method for Microsoft to release additional tools and libraries outside of
Visual Studio release cycles
http://silverlight.codeplex.com
The toolkit includes Page transitions and TiltEffect with which you can add common animations to your applications
The information herein is for informational
purposes only an represents the current view of
Microsoft Corporation as of the date of this
presentation. Because Microsoft must respond
to changing market conditions, it should not be
interpreted to be a commitment on the part of
Microsoft, and Microsoft cannot guarantee the
accuracy of any information provided after the
date of this presentation.
2012 Microsoft Corporation.
All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION
IN THIS PRESENTATION.