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

2. Snap and Scale Beautifully

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

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

5. demo Snapped

6. Settings

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

8. Account

9. demo Settings

10. Roam to the Cloud

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

12. demo Roaming

13. Invest in a Great Tile

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

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

17. demo Secondary Tiles

18. Connected and Alive

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

20. demo Live Tiles

21. Toast notifications

22. demo Toast notification

23. Windows Push Notification Service (WPNS)

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

25. Background Tasks

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

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

28. demo Background Tasks

29. Lost your direction?

31. Bing Maps SDK  Available for both XAML & HTML5  The Maps control lets you incorporate the latest road maps and aerial views into a Windows Store app.  Free to use up to a certain usage

32. demo Bing Maps

33. Conclusions