Windows 8Tips & Tricks for XAML based Windows Store App

Ronnie SaurenmannMicrosoft ronnies@microsoft.com

Windows 8 Touch Interactions

Press and hold to learn Tap for primary action Slide to drag Swipe to select

Pinch to zoom

Swipe from edge for

app and system UI Rotate to rotate

demoScrollviewer

Settings

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

demoSettings

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 email

Roaming is best for user preferences, links, and small data files

demoRoaming

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.

demoLive Tiles

• Ambient vs. time-sensitive

• Bring your brand to your tile

• Friends don’t let friends overdo toast notifications

Toast notifications

demoToast notification

Windows Push Notification Service(WPNS)

Windows Push Notification ServiceEnables 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

Runningapp

Suspendedapp

Suspending Terminate

dapp

Low resources

Code gets to runApp frozen App not running

Resuming

App gets 5 seconds to

handle suspend

App is not notified before

termination

Apps are notified when they have been resumed

User launches app

Splash screen

Limited background tasks can run

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

demoBackground Tasks

Lost your direction?

demoBing Maps

Most apps can benefit from sensors

Basic app scenarios for sensors

Shake Rotate Flip

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

demoGeolocation

Semantic zoom

demoSemantic zoom

Conclusions

© 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a

commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

© 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a

commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

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