Windows 8 Tips & Tricks for XAML based Windows Store App Ronnie Saurenmann Microsoft

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

demo Scrollviewer

Settings

 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

Account

demo Settings

Roam to the Cloud

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  Roaming is best for user preferences, links, and small data files

demo Roaming

Invest in a Great Tile

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:

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

Connected and Alive

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.

demo Live Tiles

Toast notifications

demo Toast notification

Windows Push Notification Service (WPNS)

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

Background Tasks

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

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

demo Background Tasks

Lost your direction?

demo Bing Maps

Most apps can benefit from sensors

Basic app scenarios for sensors ShakeRotateFlip

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

demo Geolocation

Semantic zoom

demo Semantic zoom

Conclusions

Snap and Scale Beautifully

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

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