1. Windows 8 Tips & Tricks for XAML based Windows Store App Ronnie Saurenmann Microsoft ronnies@microsoft.com

2. Windows 8 Touch Interactions Press and hold to learnTap for primary actionSlide to dragSwipe to select Pinch to zoom Swipe from edge for app and system UI Rotate to rotate

3. demo Scrollviewer

4. Settings

5.  Place all app settings under one roof where users will always expect to find them  Do not create additional entry points into Settings on the app canvas  When users invoke Settings charm, they will see your app’s basic info, and settings commands as specified by your app  Common settings commands: your settings categories, Help, About, Terms of use…  Once users choose a settings command, the settings pane will be brought up. Your app controls the UI within the settings pane  Keep it simple, minimize the number of settings

6. Account

7. demo Settings

8. Roam to the Cloud

9. Roam  Leverage roaming to maintain state and preferences across machines  Roam preferences that users are likely to set on each device anyway:  Favorite sports team (sports app)  Favorite movie genre (media app)  Let users continue a task across devices by roaming app data:  Composing a to-do list  Composing email  Roaming is best for user preferences, links, and small data files

10. demo Roaming

11. Invest in a Great Tile

12. Square (1x1) Wide (2x1) Basic Tiles Both sizes can have live updates Tap on tile to launch or switch to an app Static default tile specified in app manifest Two sizes:

13. Secondary Tiles Tiles created by “pinning” content from app Pin initiated by app via simple runtime call User confirms pin operation via system UI Exposes a personalized surface for app Same capabilities as app tiles Launch leads to relevant content

14. Connected and Alive

15. Live Tile  Live tiles to draw users to your app  Provide fresh, personalized content to help users feel connected to your content, motivate launch  Use badges to show simple numeric or glyph information  Live updates should be accessible from the home screen of your app  You can opt in to cycle through last 5 updates:  Good example – A news app wants to send five stories per day or one story and supplementary images per day  Bad example – A shopping app sends a new notification per day for daily deals (last 4 days’ will still cycle but be outdated)  Both default & content tiles, small & large, support live.

16. demo Live Tiles

17. Toast notifications

18. demo Toast notification

19. Windows Push Notification Service (WPNS)

20. Windows Push Notification Service Enables delivery of tile and toast notifications over the internet. Tile updates and notifications shown to the user even if your app is not running. WNS handles communication with your app Scales to millions of users WNS is a free service for your app to use

21. Background Tasks

22. Review of process lifecycle events Apps are notified when they have been resumed

23. Background tasks for state Maintenance triggers  Run periodically on AC power  Useful for cleaning up temp state System triggers  AC power, non-lock screen  InternetAvailable, NetworkStateChange for connectivity  ServicingComplete: perfect time to migrate app state versions Lock screen triggers (AC or battery power)  Session Connected, UserPresent, UserAway, TimeTrigger All tasks subject to CPU and network activity quotas

24. demo Background Tasks

25. Lost your direction?

27. demo Bing Maps

28. Most apps can benefit from sensors

29. Basic app scenarios for sensors ShakeRotateFlip

30. Geolocation Enables app developers to easily access the computer's geographic location by using a single API. Windows Location Provider:  Wi-Fi triangulation  IP address data to determine geolocation  GPS device

31. demo Geolocation

32. Semantic zoom

33. demo Semantic zoom

34. Conclusions

36. Snap and Scale Beautifully

37. Design for Multiple Views People multi-task. An application can be displayed any one of these layouts: Widescreen (1366x768+)Snap view (required)Minimum (1024x768) Portrait

38. Snap  Snapping is a built-in Windows 8 scenario  Building a great snapped view keeps your app on screen  Design a purposeful snapped state  Pan vertically in snapped for ergonomics and to avoid conflict with the edge and snap gutter  Maintain state and continuity across snapping and unsnapping  It is trivially easy to snap and unsnap. Don’t blow away the user’s work when this happens