The document provides a comprehensive overview of Windows 8 and Windows RT for developers, covering key features, design and UX principles, performance best practices, and technical requirements for app development. It details aspects like app certification, main features like live tiles, notifications, geolocation, storage options, and navigation, while emphasizing efficient resource use and user-friendly design. Additionally, it discusses the architecture differences between Windows 8 and Windows RT and includes best practices for ensuring smooth performance and optimal user experience.

1. For Windows Phone developers

2. Agenda
 Introduction.
 Main features.
 Design &UX.
 Performance best practice.

3. Windows 8 ?

4. Windows 8
 Windows 8 basically for :
 Home and business desktops.
 Laptops.
 Tablets.
 Home theater PCs.

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. Windows RT architecture

7. Windows 8 Store Apps
 Multiple Views.
 Touch and pen input.
 Use tiles instead of icons.
 Different UI and controls.
 Windows Store.

8. Where are you?
Desktop Application
Developers
Windows Phone
Developers

9. What is new ? How can I use it?

10. Main Features
 Snapping and orientation.
 New XAML controls.
 Contracts.
 Live tiles.
 Toast notifications.
 Lock screen notifications.
 Background tasks

11. Main Features
 Navigation.
 Geolocation.
 Storage.
 Context menus.
 File association.
 Camera capture.
 Sensors.
 Application life cycle.

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. New XAML Controls
 Different Navigation controls.
 New Controls:
 App Bar
 Flip View
 Grid View
 Progress Ring
 Semantic Zoom
 Web View

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. Flip View

16. Grid View

17. Progress Ring

18. Semantic Zoom
Zoom In Zoom Out

19. Web View

20. Contracts
 Contracts = Agreement.
 Settings Contract.
 Search Contract.
 Share Contract.
 File Picker Contract.
 Play To Contract.

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. 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. Share Contract

24. Share Contract
 Types of content:
 Unformatted Plain Text
 Link
 Formatted Content /
HTML
 Files
 Single Image
 Custom Data Format

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. File Picker Contract
File open picker File save picker

27. File Picker Contract
 Specific Type (s) or any.
 Define start location.
 View mode
(List/Thumbnail).
 Retrieve one or multiple.
 Folder Picker.

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. 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. Toast Notification
 YOU NEED TO KNOW
THIS INFORMATION
RIGHT NOW!
 XML Templates.
 Long duration toasts.
 Setting the audio
(9 files only).

31. Lock Screen Notifications
 Badge & Text.
 Updated from a
Background Agent.
 Only ONE opportunity
to ask the user for
permission.
 Glyph or number.

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. Navigation
 Frame.Navigate.
 Go Home!
 Passing data between
Pages.
 Cashing pages.

34. Geolocation
 Useful for:
 Line of Business Apps.
 Games.
 Maps.
 Travel.
 Exercise.
 Updating Manifest.
 Getting geolocation data
when it changes.

35. Storage
WHERE IS
SYSTEM.DATA?!!!!!!!!

36. Storage
 NO System.Data.
 You have 4 Solutions:
 Services(Azure).
 IndexedDB
 Third party (SQLite).
 Application Settings:
 Local.
 Roaming.

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. SQLite
 Get it from Extension
Manager.
 Add references to your
project.
 Target only one Package.
 Add sqlite-net package

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. 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. 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. 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. Sensors
 The Compass.
 The Light Sensor.
 The Accelerometer.
 The Gyro meter.
 The Inclinometer.

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. Welcome to store apps world !

46. Design & UX
 Content Before Chrome.
 Using The Windows 8
Silhouette.
 Navigation Patterns.
 Fluid Motion.
 Make Touch a Priority.

47. Content Before Chrome
 The focus is content
 STOP MAKING
BUTTONS!
 Could this live in an
application bar?

48. Using The Windows 8 Silhouette

49. Navigation Patterns
 DONOT use the
“everywhere navigation”
pattern.
 Hierarchical Navigation
 Master/detail structure.
 Semantic Zoom
 Branching not flat.

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. Fluid motion
 Animation should be
purposeful.
 Hide late load time.
 XAML animation library.
 Theme transitions.
 Animation transitions.

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. How to use resources Sparingly ?

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. Performance best practices
 Make animations smooth.
 Optimize media
resources.
 Minimize
suspend/resume time.
 Reduce battery
consumption.

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. 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. 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. 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. 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. Keep the UI thread responsive
 Use asynchronous APIs.
 Async /Await
 Offload work to background threads.
 Calculating of computer AI in a game

62. Keep your app fast when you use
interop

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. 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. 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. 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. Optimize media resources
 Scale images to the appropriate size :
 DecodePixelWidth & DecodePixelHeight instead width
and height.
 Use GetThumbnailAsync for thumbnails.
 Decode images once.

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. 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. 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.

72. App bar button styles
Back

73. Glyphs
Back

74. The Inclinometer
Pitch ROLLYaw
Back

75. The Gyro meter
Back

76. The Light Sensor
Back

77. The Accelerometer
Back

78. STOP MAKING BUTTONS!
Back

79. 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