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 row’s 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

800

800 853

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 that’s 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.