designing for windows phone 8
DESCRIPTION
Session: 2 - Designing for Windows Phone Event: Washington DC Windows Phone 8 Jumpstart Date: March 2013TRANSCRIPT
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 | [email protected]
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