For Windows Phone developers
Agenda
 Introduction.
 Main features.
 Design &UX.
 Performance best practice.
Windows 8 ?
Windows 8
 Windows 8 basically for :
 Home and business desktops.
 Laptops.
 Tablets.
 Home theater PCs.
Windows 8 & Windows RT
Windows 8 Windows RT
Hardware Intel or AMD chips. ARM-powered devices.
Battery Life Estimated batte...
Windows RT architecture
Windows 8 Store Apps
 Multiple Views.
 Touch and pen input.
 Use tiles instead of icons.
 Different UI and controls.
...
Where are you?
Desktop Application
Developers
Windows Phone
Developers
What is new ? How can I use it?
Main Features
 Snapping and orientation.
 New XAML controls.
 Contracts.
 Live tiles.
 Toast notifications.
 Lock sc...
Main Features
 Navigation.
 Geolocation.
 Storage.
 Context menus.
 File association.
 Camera capture.
 Sensors.
 ...
Snapping and orientation.
 Windows 8 app certification requirements:
 1024 x 768 (minimum screen resolution & Filled sta...
New XAML Controls
 Different Navigation controls.
 New Controls:
 App Bar
 Flip View
 Grid View
 Progress Ring
 Sem...
App Bar
 The Bottom AppBar
 Left : context-specific
commands.
 Right : universal commands.
 The Top AppBar
 Navigatio...
Flip View
Grid View
Progress Ring
Semantic Zoom
Zoom In Zoom Out
Web View
Contracts
 Contracts = Agreement.
 Settings Contract.
 Search Contract.
 Share Contract.
 File Picker Contract.
 Pla...
Settings Contract
 Add handler to Settings
pane open request.
 Create new Settings
Command.
 Handle all of the cases
fo...
Search Contract
 Add Search Contract
Template.
 What would users expect
to search for in my app?
 Add your search resul...
Share Contract
Share Contract
 Types of content:
 Unformatted Plain Text
 Link
 Formatted Content /
HTML
 Files
 Single Image
 Cus...
Share Contract
 Share Target REQs:
 Add the Share Target
declaration.
 Add method to handle
when the Share Target is
ac...
File Picker Contract
File open picker File save picker
File Picker Contract
 Specific Type (s) or any.
 Define start location.
 View mode
(List/Thumbnail).
 Retrieve one or ...
Play To Contract
 Share content from your
computer to a television,
another computer, or an
Xbox 360.
 A Play To source....
Live Tiles
 A relationship with your
user.
 Small & Large tiles.
 You must ALWAYS have
a small tile.
 XML templates.
...
Toast Notification
 YOU NEED TO KNOW
THIS INFORMATION
RIGHT NOW!
 XML Templates.
 Long duration toasts.
 Setting the a...
Lock Screen Notifications
 Badge & Text.
 Updated from a
Background Agent.
 Only ONE opportunity
to ask the user for
pe...
Background Tasks
 The code that runs when
your app doesn’t.
 Windows Runtime
Component.
 Must implement
IBacKgroundTask...
Navigation
 Frame.Navigate.
 Go Home!
 Passing data between
Pages.
 Cashing pages.
Geolocation
 Useful for:
 Line of Business Apps.
 Games.
 Maps.
 Travel.
 Exercise.
 Updating Manifest.
 Getting g...
Storage
WHERE IS
SYSTEM.DATA?!!!!!!!!
Storage
 NO System.Data.
 You have 4 Solutions:
 Services(Azure).
 IndexedDB
 Third party (SQLite).
 Application Set...
SQLite
 Relational database
management system
contained in a small
Cprogramming library.
 Stores the entire
database as ...
SQLite
 Get it from Extension
Manager.
 Add references to your
project.
 Target only one Package.
 Add sqlite-net pack...
Local VS Roaming
Roaming Local
 Data available on all user
devices.
 Use
 Use roaming for preferences
and customization...
Context Menu
 Right-click on something
you couldn’t select.
 Steps:
 determine the position
of the clicked element.
 C...
File association
 Registering our app with
Windows 8 as an app
that opens files of a
certain type.
 Suitable for Editor ...
Camera Capture
 Updating Manifest
 User permission.
 Create
CameraCaptureUI
object.
 CaptureFileAsync to get
photo or ...
Sensors
 The Compass.
 The Light Sensor.
 The Accelerometer.
 The Gyro meter.
 The Inclinometer.
Application Life Cycle
 Lake of resources, your app
will enter a suspended state.
 Leave app to use another,
Windows wil...
Welcome to store apps world !
Design & UX
 Content Before Chrome.
 Using The Windows 8
Silhouette.
 Navigation Patterns.
 Fluid Motion.
 Make Touch...
Content Before Chrome
 The focus is content
 STOP MAKING
BUTTONS!
 Could this live in an
application bar?
Using The Windows 8 Silhouette
Navigation Patterns
 DONOT use the
“everywhere navigation”
pattern.
 Hierarchical Navigation
 Master/detail structure.
...
Hub Navigation Pattern
 Hub pages :
 Entry point.
 What’s new and available.
 Section Page:
 Second level.
 Individu...
Fluid motion
 Animation should be
purposeful.
 Hide late load time.
 XAML animation library.
 Theme transitions.
 Ani...
Make a touch priority
 A “tap” and a “click” in
Windows 8 are the same.
 Clickable larger than
48 x 48 pixels.
 Optimal...
How to use resources Sparingly ?
Performance best practices
 Minimize Application
Startup.
 Optimize loading XAML.
 Load, store, and display
large sets ...
Performance best practices
 Make animations smooth.
 Optimize media
resources.
 Minimize
suspend/resume time.
 Reduce ...
Minimize Application Startup
 Start time:
 Less than one second (Excellent).
 Less than 5 seconds (Good).
 Greater tha...
Optimize loading XAML
 Start Page:
 Don’t reference for controls and resources in other files.
 Don’t include page spec...
Optimize loading XAML
 Reuse identical brushes.
 Minimize redrawing to the same place on the screen :
 Collapse element...
Load, store, and display large sets
of data efficiently
 Use UI virtualization to create only visible items:
 Wrap Grid ...
Access the file system efficiently
 Only retrieve needed properties not all.
 Windows Runtime stream adapters data buffe...
Keep the UI thread responsive
 Use asynchronous APIs.
 Async /Await
 Offload work to background threads.
 Calculating ...
Keep your app fast when you use
interop
Make Animations Smooth
 Use independent instead of dependent animations .
Dependant animations Independent animations
UI...
Make Animations Smooth
Independent animations Dependant Animations
 Object animations using
key frames
 Zero-duration an...
Make Animations Smooth
 Don't animate a WebView :
 Swap it with a WebViewBrush for the duration of the
animation .
 Use...
Optimize media resources
 Release media streams.
 Display full screen video playback when possible.
 Put other elements...
Optimize media resources
 Scale images to the appropriate size :
 DecodePixelWidth & DecodePixelHeight instead width
and...
Minimize suspend/resume time
 Serialize only when necessary .
 Use Xml Serializer:
 The lowest serialization and deseri...
Reduce battery consumption
 Remove unnecessarily timers .
 Don’t use animations in snap view.
 Reducing the frequency a...
References
 Windows RT.
 31 days of Windows 8.
 Windows 8 Samples.
 Local Database in Windows Store app.
 Windows 8 A...
App bar button styles
Back
Glyphs
Back
The Inclinometer
Pitch ROLLYaw
Back
The Gyro meter
Back
The Light Sensor
Back
The Accelerometer
Back
STOP MAKING BUTTONS!
Back
Avoid unnecessary elements.
Bad Code
<Grid>
<!-- BAD CODE DO NOT USE.-->
<Rectangle Fill="Black"/>
<!-- BAD CODE DO NOT US...
Windows 8 store apps development
Upcoming SlideShare
Loading in …5
×

Windows 8 store apps development

1,979 views

Published on

presentation for Windows phone developer descripe the most important new issues in windows 8 store apps development.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

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

No notes for slide

Windows 8 store apps development

  1. 1. For Windows Phone developers
  2. 2. Agenda  Introduction.  Main features.  Design &UX.  Performance best practice.
  3. 3. Windows 8 ?
  4. 4. Windows 8  Windows 8 basically for :  Home and business desktops.  Laptops.  Tablets.  Home theater PCs.
  5. 5. Windows 8 & Windows RT Windows 8 Windows RT Hardware Intel or AMD chips. ARM-powered devices. Battery Life Estimated battery life between 6 and 8 hours. Longer battery life than most Windows 8 devices Software Support Windows Store + Third-Party programs. Only Windows Store Business Use Business-friendly Not business-friendly
  6. 6. Windows RT architecture
  7. 7. Windows 8 Store Apps  Multiple Views.  Touch and pen input.  Use tiles instead of icons.  Different UI and controls.  Windows Store.
  8. 8. Where are you? Desktop Application Developers Windows Phone Developers
  9. 9. What is new ? How can I use it?
  10. 10. Main Features  Snapping and orientation.  New XAML controls.  Contracts.  Live tiles.  Toast notifications.  Lock screen notifications.  Background tasks
  11. 11. Main Features  Navigation.  Geolocation.  Storage.  Context menus.  File association.  Camera capture.  Sensors.  Application life cycle.
  12. 12. Snapping and orientation.  Windows 8 app certification requirements:  1024 x 768 (minimum screen resolution & Filled state)  320 x 768 (Snapped).  Your default resolution that you are planning for, generally 1366 x 768.
  13. 13. New XAML Controls  Different Navigation controls.  New Controls:  App Bar  Flip View  Grid View  Progress Ring  Semantic Zoom  Web View
  14. 14. App Bar  The Bottom AppBar  Left : context-specific commands.  Right : universal commands.  The Top AppBar  Navigation  Other purposes.  202 default AppBar button Styles.
  15. 15. Flip View
  16. 16. Grid View
  17. 17. Progress Ring
  18. 18. Semantic Zoom Zoom In Zoom Out
  19. 19. Web View
  20. 20. Contracts  Contracts = Agreement.  Settings Contract.  Search Contract.  Share Contract.  File Picker Contract.  Play To Contract.
  21. 21. Settings Contract  Add handler to Settings pane open request.  Create new Settings Command.  Handle all of the cases for Popup.  DO NOT wait for save.  DO NOT wait to confirm
  22. 22. Search Contract  Add Search Contract Template.  What would users expect to search for in my app?  Add your search results for Search Page.  Define search suggestions.  Forced Search by Keystrokes.
  23. 23. Share Contract
  24. 24. Share Contract  Types of content:  Unformatted Plain Text  Link  Formatted Content / HTML  Files  Single Image  Custom Data Format
  25. 25. Share Contract  Share Target REQs:  Add the Share Target declaration.  Add method to handle when the Share Target is activated.  Handle Target Page to work with share data.
  26. 26. File Picker Contract File open picker File save picker
  27. 27. File Picker Contract  Specific Type (s) or any.  Define start location.  View mode (List/Thumbnail).  Retrieve one or multiple.  Folder Picker.
  28. 28. Play To Contract  Share content from your computer to a television, another computer, or an Xbox 360.  A Play To source.  A play To target.
  29. 29. Live Tiles  A relationship with your user.  Small & Large tiles.  You must ALWAYS have a small tile.  XML templates.  Secondary Tiles.  Turn live tile off.
  30. 30. Toast Notification  YOU NEED TO KNOW THIS INFORMATION RIGHT NOW!  XML Templates.  Long duration toasts.  Setting the audio (9 files only).
  31. 31. Lock Screen Notifications  Badge & Text.  Updated from a Background Agent.  Only ONE opportunity to ask the user for permission.  Glyph or number.
  32. 32. Background Tasks  The code that runs when your app doesn’t.  Windows Runtime Component.  Must implement IBacKgroundTask.  Declare Background Tasks in package.appxmanifest file.  Register your background task.
  33. 33. Navigation  Frame.Navigate.  Go Home!  Passing data between Pages.  Cashing pages.
  34. 34. Geolocation  Useful for:  Line of Business Apps.  Games.  Maps.  Travel.  Exercise.  Updating Manifest.  Getting geolocation data when it changes.
  35. 35. Storage WHERE IS SYSTEM.DATA?!!!!!!!!
  36. 36. Storage  NO System.Data.  You have 4 Solutions:  Services(Azure).  IndexedDB  Third party (SQLite).  Application Settings:  Local.  Roaming.
  37. 37. SQLite  Relational database management system contained in a small Cprogramming library.  Stores the entire database as a single cross-platform file on a host machine.  Doesn’t support all the SQL features
  38. 38. SQLite  Get it from Extension Manager.  Add references to your project.  Target only one Package.  Add sqlite-net package
  39. 39. Local VS Roaming Roaming Local  Data available on all user devices.  Use  Use roaming for preferences and customization.  Use roaming to let users continue a task.  Data available only on current device.  Use:  Use local for information that is clearly local-only.  Use local for large datasets.  Use local for instant synchronization or rapidly changing data.
  40. 40. Context Menu  Right-click on something you couldn’t select.  Steps:  determine the position of the clicked element.  Create context menu and add commands .  Show popup.  Only six commands.  Text box context menus.
  41. 41. File association  Registering our app with Windows 8 as an app that opens files of a certain type.  Suitable for Editor apps (Text, photo,…).  Open your own extension files.
  42. 42. Camera Capture  Updating Manifest  User permission.  Create CameraCaptureUI object.  CaptureFileAsync to get photo or video.  Setup video settings (Max duration/format type/Max Resolution).
  43. 43. Sensors  The Compass.  The Light Sensor.  The Accelerometer.  The Gyro meter.  The Inclinometer.
  44. 44. Application Life Cycle  Lake of resources, your app will enter a suspended state.  Leave app to use another, Windows will wait a few seconds before suspending it.  5 seconds before app to be unresponsive.  App.XAML.CS:  OnLaunched : not resuming.  OnSuspending
  45. 45. Welcome to store apps world !
  46. 46. Design & UX  Content Before Chrome.  Using The Windows 8 Silhouette.  Navigation Patterns.  Fluid Motion.  Make Touch a Priority.
  47. 47. Content Before Chrome  The focus is content  STOP MAKING BUTTONS!  Could this live in an application bar?
  48. 48. Using The Windows 8 Silhouette
  49. 49. Navigation Patterns  DONOT use the “everywhere navigation” pattern.  Hierarchical Navigation  Master/detail structure.  Semantic Zoom  Branching not flat.
  50. 50. Hub Navigation Pattern  Hub pages :  Entry point.  What’s new and available.  Section Page:  Second level.  Individual items.  Detail pages:  Third level.  Details of individual items.
  51. 51. Fluid motion  Animation should be purposeful.  Hide late load time.  XAML animation library.  Theme transitions.  Animation transitions.
  52. 52. Make a touch priority  A “tap” and a “click” in Windows 8 are the same.  Clickable larger than 48 x 48 pixels.  Optimal places to put your buttons and content.
  53. 53. How to use resources Sparingly ?
  54. 54. Performance best practices  Minimize Application Startup.  Optimize loading XAML.  Load, store, and display large sets of data efficiently.  Access the file system efficiently.  Keep the UI thread responsive.  Keep your app fast when you use interop.
  55. 55. Performance best practices  Make animations smooth.  Optimize media resources.  Minimize suspend/resume time.  Reduce battery consumption.
  56. 56. Minimize Application Startup  Start time:  Less than one second (Excellent).  Less than 5 seconds (Good).  Greater than 5 seconds (Poor).  Minimize managed assemblies in the startup  Two small assemblies instead one large.  Load locally instead web requests.  Disk operations are faster than network operations.
  57. 57. Optimize loading XAML  Start Page:  Don’t reference for controls and resources in other files.  Don’t include page specific XAML in app’s resource dictionary.  Optimize element count:  Avoid unnecessary elements.  Remove hidden elements or set the Visibility property to Collapsed.  Same vector = an image.
  58. 58. Optimize loading XAML  Reuse identical brushes.  Minimize redrawing to the same place on the screen :  Collapse elements that are entirely obscure.  Create a composite element instead of layering objects.  Don't use the same color for foreground and background.  Prefer a Border element to draw a border around an object instead of using other objects to impersonate a border.  Be aware of your margin sizes.  Cache static content.
  59. 59. Load, store, and display large sets of data efficiently  Use UI virtualization to create only visible items:  Wrap Grid .  Virtualizing StackPanel.  Keep item templates simple.  Use item template selectors only as needed.  Load subsets of data:  Incremental data virtualization: (ISupportIncrementalLoading.)  Random access data virtualization: (INotifyCollectionChanged and IObservableVector)
  60. 60. Access the file system efficiently  Only retrieve needed properties not all.  Windows Runtime stream adapters data buffer .  Don’t use buffer for low-latency reads and writes and large blocks out of the underlying
  61. 61. Keep the UI thread responsive  Use asynchronous APIs.  Async /Await  Offload work to background threads.  Calculating of computer AI in a game
  62. 62. Keep your app fast when you use interop
  63. 63. Make Animations Smooth  Use independent instead of dependent animations . Dependant animations Independent animations UI thread creates the animation tree. Each frame is generated on the UI thread and sent individually to the compositor. Compositor renders the scene.  UI thread creates the animation tree.  Compositor takes over and runs the animation.
  64. 64. Make Animations Smooth Independent animations Dependant Animations  Object animations using key frames  Zero-duration animations  Canvas.Left and Canvas.Top  UIElement.Opacity  SolidColorBrush.Color  Render Transform  Projection  Clip  EnableDependentAnimation property.  BitmapCache independent animations considered dependent because the cache must be rerasterized for each frame.
  65. 65. Make Animations Smooth  Don't animate a WebView :  Swap it with a WebViewBrush for the duration of the animation .  Use infinite animations sparingly .  Adding ahandler for CompositionTarget.Rendering is similar to running an infinite animation.  Use the animation library: (Windows.UI.Xaml.Media.Animation )
  66. 66. Optimize media resources  Release media streams.  Display full screen video playback when possible.  Put other elements to the side of embedded video.  Delay setting the source for a MediaElement .  Set MediaElement.PosterSource.  Match video resolution with device resolution.  Choose recommended formats.(MP4,MP3,H.264)
  67. 67. Optimize media resources  Scale images to the appropriate size :  DecodePixelWidth & DecodePixelHeight instead width and height.  Use GetThumbnailAsync for thumbnails.  Decode images once.
  68. 68. Minimize suspend/resume time  Serialize only when necessary .  Use Xml Serializer:  The lowest serialization and deserialization times  Reduce memory footprint:  Freeing as much memory as possible at suspension  Release resources.
  69. 69. Reduce battery consumption  Remove unnecessarily timers .  Don’t use animations in snap view.  Reducing the frequency at which you poll for new info using web services.
  70. 70. References  Windows RT.  31 days of Windows 8.  Windows 8 Samples.  Local Database in Windows Store app.  Windows 8 APP UX.  Performance best practice for Windows Store Apps.  Windows Store Investigation.  Code reuse between WP 8 and Windows 8.
  71. 71. App bar button styles Back
  72. 72. Glyphs Back
  73. 73. The Inclinometer Pitch ROLLYaw Back
  74. 74. The Gyro meter Back
  75. 75. The Light Sensor Back
  76. 76. The Accelerometer Back
  77. 77. STOP MAKING BUTTONS! Back
  78. 78. Avoid unnecessary elements. Bad Code <Grid> <!-- BAD CODE DO NOT USE.--> <Rectangle Fill="Black"/> <!-- BAD CODE DO NOT USE.--> </Grid> <!-- BAD CODE DO NOT USE.--> Best Practice <Grid Background="Black" /> Back

×