Designing for Windows Phone 8

Designing for Windows Phone 8

David IsbitskiTechnical Evangelist, Microsoft

http://blogs.msdn.com/davedev

@TheDaveDev

Now is the time to write your app. Enjoy the first to market advantage!

twitter.com/thedavedev | david.isbitski@microsoft.com

http://bit.ly/genapp8

Design Considerations

Model-View-ViewModel

Application Lifecycle

Storage APIs (Files and Folders)

App-To-App (Associations)

App Essentials

Windows Phone 8 Fundamentals

Design

Design

Compare these two designs

Hub Navigation

Wide Tiles

correct incorrect

Lock Screen Design

The visual focus of the lock screen should be the image, not the logo or text

background images should be simple

lock screen background should not be ads

lock screen background integration should be relevant

Design for touchMinimum font size is 15 pt.

Recommended touch target size is 9mm

Minimum touch target size is 7mm

Minimum spacing betweenelements is 2mm

Visual size is 60-100% of the touch target size

Provide feedback when an item is touched.

correct incorrect

Layout Alignment

correct incorrect

Multiple Resolutions

WVGA480x800

WXGA768x1280

720p720x1280

Multiple Resolutions – Scaling & Touch

720p720x1280

WVGA480x800

User Experience Bar Document

Model-View-ViewModel

View

ViewModel

Commands

Data Binding

Model

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

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

Why MVVM?

View

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

Model-View-ViewModel

View

ViewModel

Commands

Data Binding

Model

Windows Phone

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

Demo

MVVM Libraries

MVVM Light Caliburn Micro

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

Application instance in memory

Application state, data, objects remain intact

App must prepare to be closed (no code can run in dormant state)

Tombstoned

Not running

Running

LaunchingClosing

DeactivatingActivating

Dormant

Tombstoned

From Dormant to Tombstone is memory based

Application state dictionaries, navigation saved

Data must be restored

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

reactivates a dormant application if the user launches a new instance

added to enable background location tracking, but we can use it to activate a dormant application instead of launching a new instance

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?

Normal App Navigation

Launch from Start

Page 1 Page 2

Launch from Start

Page 2deep link

Why Not Use FAR All The Time?

Fast Application Resume

Launch from Start

Page 1 Page 2

Launch from Start

Page 2FARPage 1

Demo

Windows Phone 8 File Access Options

Isolated Storage

var isf = IsolatedStorageFile.GetUserStoreForApplication();IsolatedStorageFileStream fs = new IsolatedStorageFileStream("CaptainsLog.store", FileMode.Open, isf));

Storage API Using URI

StorageFile storageFile = await Windows.Storage.StorageFile.GetFileFromApplicationUriAsync( new Uri("ms-appdata:///local/CaptainsLog.store "));

Windows Phone 8 File Access Options

Storage API

StorageFolder localFolder = ApplicationData.Current.LocalFolder;StorageFile storageFile = await localFolder.GetFileAsync("CaptainsLog.store");

Storage APIs align with Windows 8

Demo

File Association

Uri Association

Launching Built-In Apps

App Launching Techniques

File Association, Part 1

App Launcher1. Access file as a StorageFile

2. Windows.System.Launcher.LaunchFileAsync(myFile);

File Association, Part 2

Launched App1. Register file type in

WMAppManifest.xml

( FileTypeAssociation)

2. Implement custom URI mapper

3. Access shared file via fileToken

Protocol Association, Part 1

App LauncherWindows.System.Launcher.LaunchUriAsync(new Uri(“myNewApp:NewSession”));

Protocol Association, Part 1

Launched App1. Register Uri association in

WMAppManifest.xml

2. Implement custom Uri mapper

<Extensions> <Protocol Name="fundamentalsdemo“ NavUriFragment="encodedLaunchUri=%s“ TaskID="_default"/></Extensions>

Demo

Launching Built-In Apps URI scheme Description

http:[URL] Launches the web browser and navigates to URL

mailto:[email address]

Launches the email app and creates a new message. Note that the email is not sent until the user taps send.

ms-settings-accounts: Launches the Account Settings app.

ms-settings-airplanemode: Launches the Airplane Mode Settings app.

ms-settings-bluetooth: Launches the Bluetooth Settings app.

ms-settings-cellular: Launches the Cellular Settings app.

ms-settings-emailandaccounts: Launches the email and accounts settings app.

ms-settings-location: Launches the Location Settings app.

ms-settings-lock: Launches the Lock Screen settings app.

ms-settings-wifi: Launches the Wi-Fi Settings app.

Designing for Windows Phone 8

David IsbitskiTechnical Evangelist, Microsoft

http://blogs.msdn.com/davedev

@TheDaveDev