Designing for Windows Phone 8

1,236 views
1,167 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,236
On SlideShare
0
From Embeds
0
Number of Embeds
1
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.

×