Design
Design
Hub Navigation
Wide Tiles
lock screen     lock screenbackground      backgroundintegration     should not beshould be       adsrelevantbackground   ...
Design for touch                   Minimum font size is 15 pt.                   Recommended touch target                 ...
Layout Alignment
Multiple Resolutions
Multiple Resolutions – Scaling & Touch          WVGA                           720p          480x800                      ...
User Experience Bar Document
ViewDataBinding                  Commands     ViewModel          Model
public class KittenObject{    public KittenObject() { }    public string KittenImage { get; set; }    public string Kitten...
public class MainViewModel : INotifyPropertyChanged{    public event PropertyChangedEventHandler PropertyChanged;    priva...
private string _sampleProperty = "my start value";public string SampleProperty{    get { return _sampleProperty; }    set ...
<TextBox Text="{Binding SampleProperty, Mode=TwoWay}" />                                                      View
<phone:LongListSelector    ItemsSource="{Binding MyListOfItems}"    SelectedItem="{Binding MySelectedItem, Mode=TwoWay}" /...
ViewDataBinding                  Commands     ViewModel          Model
<TextBlock x:Name="ContentText"      Text="{Binding LineThree, Mode=OneWay}"/>• The Mode property determines how changes a...
class AddItemCommand : ICommand{    ViewModel _viewModel;    public AddItemCommand(ViewModel viewModel)    {        _viewM...
Demo
http://mvvmlight.codeplex.com/   http://caliburnmicro.codeplex.com/Laurent Bugnion                  Rob Eisenberg
Not running              Launching Running
Not running                                                Closing                  Launching         ExitApplication_Clos...
Not runningClosing                     Launching                Running   Activating             Deactivating             ...
Not runningClosing                     Launching                Running   Activating             Deactivating             ...
Not running                                                 Closing                     Launchingprivate void Application_...
Not runningClosing                     Launching                Running   Activating             Deactivating             ...
<Tasks>  <DefaultTask   Name ="_default“ NavigationPage="MainPage.xaml“ /></Tasks><Tasks>  <DefaultTask Name ="_default" N...
Launch     Page 1    Page 2 from StartLaunch   deep link   Page 2 from Start
Launch   Page 1   Page 2 from StartLaunch   FAR         Page 1   Page 2 from Start
Demo
var isf = IsolatedStorageFile.GetUserStoreForApplication();IsolatedStorageFileStream fs = newIsolatedStorageFileStream("Ca...
StorageFolder localFolder = ApplicationData.Current.LocalFolder;StorageFile storageFile = await localFolder.GetFileAsync("...
Demo
Windows.System.Launcher.LaunchUriAsync(new Uri(“myNewApp:NewSession”));
<Extensions>   <Protocol Name="fundamentalsdemo“      NavUriFragment="encodedLaunchUri=%s“      TaskID="_default"/></Exten...
Demo
URI scheme                      Descriptionhttp:[URL]                      Launches the web browser and navigates to URL  ...
Designing for Windows Phone 8
Designing for Windows Phone 8
Designing for Windows Phone 8
Designing for Windows Phone 8
Designing for Windows Phone 8
Designing for Windows Phone 8
Designing for Windows Phone 8
Designing for Windows Phone 8
Designing for Windows Phone 8
Designing for Windows Phone 8
Designing for Windows Phone 8
Upcoming SlideShare
Loading in …5
×

Designing for Windows Phone 8

1,224 views
1,164 views

Published on

Session:
2 - Designing for Windows Phone

Event:
Washington DC Windows Phone 8 Jumpstart

Date:
March 2013

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,224
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
32
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Designing for Windows Phone 8

  1. 1. Design
  2. 2. Design
  3. 3. Hub Navigation
  4. 4. Wide Tiles
  5. 5. lock screen lock screenbackground backgroundintegration should not beshould be adsrelevantbackground The visual focusimages should of the lockbe simple screen should be the image, not the logo or text
  6. 6. Design for touch Minimum font size is 15 pt. Recommended touch target size is 9mm Minimum touch target size is 7mm Minimum spacing between elements is 2mm Visual size is 60-100% of the touch target size Provide feedback when an item is touched.
  7. 7. Layout Alignment
  8. 8. Multiple Resolutions
  9. 9. Multiple Resolutions – Scaling & Touch WVGA 720p 480x800 720x1280
  10. 10. User Experience Bar Document
  11. 11. ViewDataBinding Commands ViewModel Model
  12. 12. public class KittenObject{ public KittenObject() { } public string KittenImage { get; set; } public string KittenName { get; set; } public string KittenAge { get; set; }} Model
  13. 13. public class MainViewModel : INotifyPropertyChanged{ public event PropertyChangedEventHandler PropertyChanged; private void NotifyPropertyChanged(String propertyName) { PropertyChangedEventHandler handler = PropertyChanged; if (null != handler) { handler(this, new PropertyChangedEventArgs(propertyName)); } }} ViewModel
  14. 14. private string _sampleProperty = "my start value";public string SampleProperty{ get { return _sampleProperty; } set { _sampleProperty = value; NotifyPropertyChanged("SampleProperty"); }} ViewModel
  15. 15. <TextBox Text="{Binding SampleProperty, Mode=TwoWay}" /> View
  16. 16. <phone:LongListSelector ItemsSource="{Binding MyListOfItems}" SelectedItem="{Binding MySelectedItem, Mode=TwoWay}" /> View
  17. 17. ViewDataBinding Commands ViewModel Model
  18. 18. <TextBlock x:Name="ContentText" Text="{Binding LineThree, Mode=OneWay}"/>• 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- versaWindows Phone
  19. 19. 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) <Button Command="{Binding AddCommand}" { CommandParameter="Untitled" Content="Button" _viewModel.AddItem(title as string); HorizontalAlignment="Center" } VerticalAlignment="Center"/>}
  20. 20. Demo
  21. 21. http://mvvmlight.codeplex.com/ http://caliburnmicro.codeplex.com/Laurent Bugnion Rob Eisenberg
  22. 22. Not running Launching Running
  23. 23. Not running Closing Launching ExitApplication_Closing Running Deactivate Application_Deactivated Deactivating Dormant Dormant
  24. 24. Not runningClosing Launching Running Activating Deactivating Dormant
  25. 25. Not runningClosing Launching Running Activating Deactivating Dormant Tombstoned
  26. 26. Not running Closing Launchingprivate void Application_Activated(objectsender, ActivatedEventArgs e){ Running if (e.IsApplicationInstancePreserved) { // Dormant - objects in memory intact Activating Deactivating } else { Dormant // Tombstoned - need to reload } Tombstoned}
  27. 27. Not runningClosing Launching Running Activating Deactivating Dormant Tombstoned
  28. 28. <Tasks> <DefaultTask Name ="_default“ NavigationPage="MainPage.xaml“ /></Tasks><Tasks> <DefaultTask Name ="_default" NavigationPage="MainPage.xaml"> <BackgroundExecution> <ExecutionType Name="LocationTracking" /> </BackgroundExecution> </DefaultTask></Tasks>
  29. 29. Launch Page 1 Page 2 from StartLaunch deep link Page 2 from Start
  30. 30. Launch Page 1 Page 2 from StartLaunch FAR Page 1 Page 2 from Start
  31. 31. Demo
  32. 32. var isf = IsolatedStorageFile.GetUserStoreForApplication();IsolatedStorageFileStream fs = newIsolatedStorageFileStream("CaptainsLog.store", FileMode.Open, isf));StorageFile storageFile = awaitWindows.Storage.StorageFile.GetFileFromApplicationUriAsync( new Uri("ms-appdata:///local/CaptainsLog.store "));
  33. 33. StorageFolder localFolder = ApplicationData.Current.LocalFolder;StorageFile storageFile = await localFolder.GetFileAsync("CaptainsLog.store"); Storage APIs align with Windows 8
  34. 34. Demo
  35. 35. Windows.System.Launcher.LaunchUriAsync(new Uri(“myNewApp:NewSession”));
  36. 36. <Extensions> <Protocol Name="fundamentalsdemo“ NavUriFragment="encodedLaunchUri=%s“ TaskID="_default"/></Extensions>
  37. 37. Demo
  38. 38. URI scheme Descriptionhttp:[URL] Launches the web browser and navigates to URL Launches the email app and creates a new message.mailto:[email address] 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.

×