Metro Style App Design style

Metro style apps are the focal point of the user experience on Windows 8 Release Preview, and great Metro style apps share an important set of traits that provide a consistent, elegant, and compelling user experience.

This video explains how using Metro design style principles helps you create great apps.

Leverage Metro design style

Content is the heart of Metro style apps, and putting content before chrome is fundamental to the design of Metro style apps. Everything else is accessory—or chrome—that helps present and enable interaction with the content.

Presenting content

Design your app's UI to showcase the content, and make your UI accessible for users with disabilities.

Clean and open layout

·         Minimize distraction and help people get immersed in the content by leaving only the most relevant elements on screen.

·         Give content breathing room by removing lines, boxes, and unnecessary graphical effects like blurs and gradients. Use open space to frame the content.

·         Limit navigational chrome that is persistently on screen, such as tabs. Let people focus on the current content, and avoid distracting them with way-finding chrome.

Clear information hierarchy   The Metro design language is founded on clean, beautiful typography that helps users understand the hierarchy of the content. Use typography in place of lines and boxes to help establish structure and hierarchy.

·         Use size, weight, and color in text consistently to convey information on a piece of content's importance. The set of variations should be small, so people can easily see how content fits together in the overall hierarchy. See Guidelines for text and typography.

·         Use the default stylesheet to get the predefined type ramp for your text.

Metro style silhouette  When people focus on content, the composition of that content forms the identity of the application. A familiar silhouette helps people to instinctively recognize your app as Metro style (as opposed to, for example, a webpage).

·         Align with the Metro style silhouette to provide a sense of familiarity and confidence.

·         Start with the Visual Studio Grid or Split project templates to get the layout. See the guidelines on the Visual Studio JavaScript project templates for Metro style apps.

Interacting with content

Use interactions that keep the user in control and confident.

Direct interactions  The most natural way for people to interact with content is directly, without intermediary chrome.

·         Whenever possible, let people complete actions through direct manipulation of the content rather than indirect manipulation with controls.

For example, let people tap an item to see more of its details, cross-slide to select it, drag to move it around, zoom out to see the full context—instead of adding buttons on screen to perform these actions.

·         Leverage Semantic Zoom as a fast, fluid, and content-first way of navigating a long list of content.

·         Keep in mind how screen readers and users who depend on keyboards will interact with the content.

Leverage the edge   Some actions can't be accomplished with direct manipulation. For those, show commands contextually, only as needed, to avoid cluttering your canvas. Leverage the screen or device edge so people can confidently find commands.

·         Place commands in the app bar, which can be brought up on demand through a swipe from the top or bottom edge, and can be dismissed when users have completed their actions.

·         Leverage the charms, which can be brought up on demand through a swipe from the right edge, for invoking the Search, Share, Devices, or Settings charms.

·         Avoid placing commands persistently on screen, and avoid showing duplicate entry points for contracts that are accessed with charms.

·         Design for comfort and put frequently used interaction surfaces near the edges.

See Commanding design for more info.

Be fast and fluid

Respond to user actions quickly with matching energy.

Purposeful animations  

Motion is a core part of the Metro design language. Well designed animations bring apps to life and make the experience feel crafted and polished.

·         Use purposeful animations to visually tie experiences together and tell a story. Everything comes from somewhere and goes somewhere in a fluid interface.

·         Leverage the Animation Library's set of scenario-specific animations, designed to convey information. Familiar motions reinforce concepts, help people know what to expect, and build a sense of confidence. See the guidelines for animations in the Animating your UIsection.

·         When using animation to communicate important information, be sure to also provide an alternative, accessible way to convey the information.

Designed for touch  

Metro style apps are designed to be touch first. They leverage the hands and fingers for what they are great at, with comfort and ergonomics in mind.

·         Embrace the Windows 8 Touch Language and use the prescribed gesture set to let people naturally and consistently manipulate content. See Touch interaction design for more info.

·         Let content directly follow your fingers. Think beyond tap and use sliding interactions, such as Semantic Zoom, to let people quickly and effortlessly navigate and interact with content.

·         Provide immediate visual feedback on touch so people can confidently know if they have hit the intended target. Keep interactions reversible, and commit only when people let go to give room for errors and encourage explorations.

·         Do not build separate touch and mouse interactions.

·         For accessibility, ensure that all interactive elements are accessible programmatically.

Built-in controls  

Leverage the built-in controls to get fluid, beautiful, consistent animations and touch-optimized behaviors baked in. To name a few examples:

·         Selection through the swipe gesture (cross-slide) is built into the ListView control. It can be extended with Semantic Zoom to let people quickly and fluidly navigate within a long list. See the guidelines on the ListView control.

·         The FlipView control lets users drag to move between items, and has transition animations built-in.

·         The button, toggle, checkbox, radio button, rating, and slider controls all provide visual feedback on touch down, commit only on touch up, and allow users to reverse their action by dragging away to cancel. See the guidelines on button, toggle, checkbox, radio button, date and time pickers, rating, and slider controls.

Remember that built-in controls are accessible by default, which can lower the cost of developing an accessible app. See the list detailed user experience (UX) guidelines for built-in controls.

Snap and scale beautifully

Create a great experience on every form factor and every viewing option open to your users.

Scaling to multiple form factors   Your app has the opportunity to be used on hundreds of millions of PCs running Windows 8. These PCs will have a wide range of screen sizes and resolution, ranging from <10" tablets to >27" screens.

·         Make the best use of on-screen real estate by using the fluid layout support built into platform controls. For example, the ListView will automatically reflow content based on available space.

·         The platform provides automatic scaling based on device screen size and resolution. Provide 3 sizes of assets, or use scalar vector graphics to ensure your app always looks crisp and polished. See the Guidelines for scaling to screens and Guidelines for scaling to pixel density.

·         Keep in mind that turning on Make everything bigger in Ease of Access effectively lowers the current resolution and you need to ensure that all UI is still visible and usable.

·         Use the simulator in Microsoft Visual Studio to see how your app will look on different form factors.

Designing for view states  People naturally multitask, and they can run two apps side by side through snapping. All apps must implement a snapped state, and a great snapped state invites users to keep your app on screen longer. See the Guidelines for snapped and fill views.

·         Design a useful Snap view that provides a functional view of the app. Preserve users' context when they switch between view states.

·         When snapped, the width of the app is fixed at 320 pixels but the height is variable. Pan vertically to avoid conflict with the edge and snap gutter.

·         Other apps can be snapped as well when your app is on screen, so design your app to reflow fluidly from a minimum width of 1024 pixels.

Use the right contracts

Contracts are the glue that binds Metro style apps together and to the system UI. Two apps that have implemented the same contract can work together to complete a broad or complex scenario.

·         For some of the most common contracts such as search, share, and file pickers, start with the corresponding Visual Studio item templates.

·         Rely on charms for a consistent invocation model that users can confidently rely on. Avoid creating alternative UI on the app canvas to invoke the contracts; that could confuse users.

·         See a complete list of app contracts.

Share   The share contracts let people share data from one app with another app. A source app is one which provides something to share, and a target app receives the shared content, using a set of common data formats. See the See Guidelines for sharing content.

·         Every app should be a sharing source and implement the broadest set of formats possible.

·         Apps that publish, store, or transform the shared data are good candidates to be a sharing target. Examples include communication, social networking, and device-connected apps.

Search   The search contracts let people search an app's content from anywhere in Windows. Results are provided by the app, and displayed within the app's own UI. See Guidelines and checklist for search.

·         Use the search charm in place of a custom in-app search, especially when the scope is across the app's full content set (like searching for a product in a shopping app). Do not use search as an in-place "Find" feature, when the scope is limited to the current view (like locating a word within a document).

·         Provide search suggestions to help people find something quickly.

·         Provide a way to navigate between the result page and the app's main UI.

File pickers    The file picker contracts let people access an app's content from another app. When the file picker is invoked, users can browse and select files from either the local storage or another app that supports the file picker contract. See the Guidelines for file pickers.

·         Leverage this contract if your app accesses or stores files that would be useful to users from another context.

·         Leverage the ListView control to get the built-in fluid layout and selection behavior.

Invest in a great tile

A tile is the front door into an app. Sitting on the Start screen, it is an extension of the app and can provide much more personal and engaging information than a traditional icon. Invest in designing a great tile to draw people into your app. See the Guidelines for tiles.

·         Tailor the content displayed on the tile to the users, and keep it fresh by updating it as app content changes. There is a wide variety of pre-designed tile templates available—select the design that best suits your content type.

·         Reference content that lives on your app's home page, so that users can find it easily after launching the app.

·         Use secondary tiles to let people promote interesting, frequently updated sub-sections of content in your app on their Start screen. SeeGuidelines for secondary tiles.

Feel connected and alive

Provide fresh content through live tiles and notifications to let people feel connected to your app. Both live tiles and notifications use the same infrastructure, and can be updated at any time using the Windows Push Notification Service, locally while the app is running, or at a pre-scheduled time.

Live tiles   Draw people in continually with dynamic, relevant, personalized content on your app tile. Fresh tile content gives people a reason to place the tile in a prominent position on the Start screen, and to launch the app time and again.

·         A live tile can cycle through up to 5 updates. For example, a news app's live tile can cycle through multiple stories each day.

·         Content shown in live updates should be accessible from the home page of your app. Remove outdated notifications if they are no longer relevant or accessible from the home page

·         Use badges to show simple numeric or glyph information.

Notifications   Apps can use notifications to briefly show people time-sensitive messages that need to be interruptive from anywhere in Windows. See the Guidelines for toast notifications.

·         Most apps should be silent—people should opt-in to enable notifications in an app.

·         People have control over app's notification capability, so raise notifications only if they are truly time sensitive and relevant. Show missed notifications, if they are critical, on the app's tile.

·         Combine notifications if there are multiple updates occurring within a short period of time.

·         Do not use notifications to show errors or warnings. Errors should appear inline or in flyouts and message dialogs instead.

Roam to the cloud

Roaming   Create a continuous experience across devices by roaming data that lets people pick up a task right where they left off. Read theGuidelines for roaming app data.

·         Leverage Microsoft accounts and the per-user cloud storage to store and roam settings, state, and a small amount of user content.

·         Examples of app settings that are good to roam:

·         Cities, and Celsius-versus-Fahrenheit preferences in a weather app

·         RSS feeds that users subscribed to in a news app

·         Favorite teams in a sports app

·         Examples of app states that are good to roam:

·         The furthest position read in a reading app

·         The last checkpoint or move completed in a game

·         The last track played in a music app

Process Lifetime Management (app lifecycle)   Ensure a continuous experience by preserving state for your users without requiring an explicit save. Read the Guidelines for app suspend and resume.

·         In general, resume the app as people left it rather than starting it fresh. People should be able to switch away to another app, and come back to a shopping cart, an unfinished email, or a paused game as they have left it.

·         Start the app fresh if a long period of time has elapsed since the user last accessed it and the previous context is no longer relevant. For example, in a news app, bring people to the home page if it has been a long time since they last opened an article that has now become stale.

·         Do not terminate the app when it is moved off screen. Leave the app lifecycle to the system to ensure that your users can return to your app as efficiently as possible. Do not offer users ways to terminate your app.

Embrace Metro design style principles

Use these principles to help guide your design.

Show pride in craftsmanship

·         Devote time and energy to small things that are seen often by many.

·         Engineer the experience to be complete and polished at every stage.

Do more with less

·         Solve for distractions, not discoverability. Let people be immersed in what they love and they will explore the rest.

·         Create a clean and purposeful experience by leaving only the most relevant elements on screen so people can be immersed in the content.

Be fast and fluid

·         Let people interact directly with content, and respond to actions quickly with matching energy.

·         Bring life to the experience, create a sense of continuity and tell a story through meaningful use of motion.

Be authentically digital

·         Take full advantage of the digital medium. Remove physical boundaries to create experiences that are more efficient and effortless than reality.

·         Embrace the fact that we are pixels on a screen. Design with bold, vibrant and crisp colors and images that go beyond the limits of real world material.

Win as one

·         Leverage the ecosystem and work together with other apps, devices and the system to complete scenarios for people.

·         Fit into the UI model to reduce redundancy. Take advantage of what people already know to provide a sense of familiarity, control, and confidence.

For more info visit http://msdn.microsoft.com/en-us/library/windows/apps/hh464920.aspx

Comments are always welcome

Vinod

Windows 8 Metro style app life cycle

Managing app lifecycle so your apps feel "always alive"

Tuesday, April 10, 2012 10:00 PM

·         10

The app lifecycle model in Windows 8 means that users no longer need to manage which apps are running. It also makes it easy for developers to craft a great user experience that doesn’t affect the device’s battery or performance when the app is in the background. Using the new lifecycle events, your app will always feel alive, even though it never runs when it is off-screen.

Today, batteries often run low on laptops, tablets, and phones, because all of us tend to leave apps running even when we’re not using them. We do this for convenience and to switch quickly between apps.

We had this in mind as we developed the lifecycle model for Metro style apps in Windows 8 – keeping apps responsive, preserving battery life, and providing excellent, consistent performance. Metro style apps are all about full-screen, immersive experiences. As such, the new lifecycle model in Windows 8 focuses on the apps in the foreground, ensuring that the experience the user is actively engaged and gets the full power of the device. In this post, I’ll walk you through the new states of the lifecycle model and what you need to do to make your app great.

Metro style app lifecycle

Your Metro style app is in one of 4 lifecycle states at any given time: not running, running , suspended or terminated. As your app transitions between states, it receives lifecycle events that help you provide a consistent and high performance experience to your users.

This diagram shows how a Metro style app transitions between states:

All Metro style apps move through these states as users launch apps, switch among them, and close them. Your app will likely move between the running and suspended states quite often as users switch between apps. So, your app must handle the lifecycle events.

As your app transitions among lifecycle states, it receives these lifecycle events:

Event	From	To
activated	not running	running
suspending or checkpoint (WinJS)	running	suspended
resuming	suspended	running

Suspend

In general, Metro style apps stop running when the user switches to another app. Windows suspends your app when it is not in the foreground. When your app is suspended, it is frozen in memory. It can’t run in this state, but Windows can instantly resume it when the user returns to it. In this way, Windows gives the foreground app better use of system resources and ensures apps in the background can’t drain the user’s battery.

When your app moves out of the foreground, Windows waits for a few seconds to allow quick switching back to the app, then tries to suspend the app. Your app must be registered for the suspending or checkpoint (JavaScript) events, which it receives when Windows wants to suspend it. This is an important time for your app; use this opportunity to save app data that must be kept in persistent storage. Usually, your app is resumed as is, and you won’t need your persisted data because they are still in memory. But you need to store this data in case Windows terminates your app to free system resources. Save enough app data to bring users back to the place in your app where they were when the app was suspended. This way, your customers perceive your app as always alive and running.

If your app doesn’t return from its suspending event handler within 5 seconds of receiving the suspending event, Windows will terminate it. It’s important not to do any heavy operations in your suspending event handler. Save your app data and return quickly.

In this post, we use a stocks app as an example. This app may use the suspending event to save the last stock that the user was viewing, and the time range for a stock chart. Then, if the app is terminated, it can restart to the exact same view that the user was looking at the last time they saw the app. For example, the recommendation for a stocks app is to use this as another opportunity to send a local tile notification so that the app’s tile is updated with the latest info before Windows suspends it.

Handling suspend in JavaScript

If you write a Metro style app using the Windows Library for JavaScript (WinJS), you can use the checkpoint event to handle suspending.

var app = WinJS.Application;

function checkpointHandler() {
    // The checkpoint event gives us the chance to save application data.
    // In this case, we save the current stock info that the user is viewing.
    app.sessionState.lastSeenStock = selectedStock;
    app.sessionState.lastSeenRange = selectedRange;

    // Send client side notifications
    Tile.sendTileUpdate(selectedStock, stockInfo.change, stockInfo.lastSale,
stockInfo.lastSaleTime, stockInfo.open);
}

app.addEventListener("checkpoint", checkpointHandler);

This is just an overview. For more info, see How to suspend an app (JavaScript and HTML) on the Dev Center.

Handling suspend in XAML

If you write a Metro style app using XAML and C#, you can use the Suspending event on the application object to handle app suspension.

public App()
{
    InitializeComponent();
    this.Suspending += new SuspendingEventHandler(OnSuspending);
}

async protected void OnSuspending(object sender, SuspendingEventArgs args)
{
    // The Suspending event gives us the chance to save application state
    // In this case, we save the current stock info that the user is viewing

    // Because writing to a file is asynchronous, we grab a deferral which ensures
    // that suspending doesn’t complete until our file write is complete
    SuspendingDeferral deferral = args.SuspendingOperation.GetDeferral();

    // Here we create a SuspensionManager class which handles adding session data
    // to a Dictionary and then serializing that data to a file
    SuspensionManager.SessionState["lastSeenStock"] = stock;
    SuspensionManager.SessionState["lastSeenRange"] = range;
    await SuspensionManager.SaveAsync();

     // Send client side notifications
    Tile.SendTileUpdate(stock, stockInfo.Change, stockInfo.LastSale,
stockInfo.LastSaleTime, stockInfo.Open);

    deferral.Complete();
}

Again, this is an overview. For more info on how to handle suspend in XAML and C# see How to suspend an app (VB/C#/C++ and XAML) on the Dev Center.

Resume

When your app is resumed, it continues from the state that it was in when Windows suspended it. To be specific: app data and state are kept in memory while the app is suspended, so when it’s resumed, everything is as it was when the app was suspended. You don’t need to restore any saved data explicitly when receiving the resuming event.

But you want your app to appear to be always alive. For this, it has to be connected and display the latest data. It is possible that your app stays in a suspended state for quite a long time before it is resumed. Data or network connections could become stale and may need to be refreshed when your app resumes. When a user brings your app back to the foreground, your app receives a resumingevent. You can refresh the app content and reconnect network resources when your app receives this event.

In our example stocks app, resume is the right place to refresh all the cached stock data that the app had before it was suspended. The previous data could be hours or even days old. The user perception that their app is always alive is broken if the user sees this old data. On resume, our stocks app must update all of its data. This way the user sees the latest stock prices, charts, and news articles each time the app is brought to the foreground.

Handling Resume in JavaScript

In JavaScript, you can use the Windows Runtime resuming event in the Windows.UI.WebUI.WebUIApplication namespace. This is a specialized resuming event meant only for JavaScript apps.

function resumingHandler() {
    //Update the selected stock with the latest news, stock info, and chart data
    News.requestNews(stock);
    Api.getStockInfoData(stock).then(function(data){displayStockInfo(data); });
    Api.getHistoryData(range).then(function (chartData)
{CanvasChart.drawChart("chartCanvas", chartData, Chart.getChartOptions(false));});

    // Send client side notifications
    Tile.sendTileUpdate(stock, stockInfo.change, stockInfo.lastSale,
stockInfo.lastSaleTime, stockInfo.open);   
        }

Windows.UI.WebUI.WebUIApplication.addEventListener("resuming", resumingHandler);

For more info see How to resume an app (JavaScript and HTML) on the Dev Center.

Handling Resume in XAML

If you write a Metro style app using XAML and C#, you can use the Resuming event on the application object to handle app resume.

public App()
{
    InitializeComponent();
    this.Resuming += new EventHandler<object>(App_Resuming);
}

        async private void App_Resuming(object sender, object e)
        {
            //Update the selected stock with the latest news, stock info, and chart data
            News.RequestNews(stock);

            Data data = await Api.GetStockInfoDataAsync(stock);
            Api.DisplayStockInfo(data);

            Chart chartData = await Api.GetHistoryDataAsync(range);
            CanvasChart.DrawChart("chartCanvas", chartData, Chart.GetChartOptions(false));

            // Send client side notifications
    Tile.SendTileUpdate(stock, stockInfo.Change, stockInfo.LastSale, stockInfo.LastSaleTime, stockInfo.Open);
        }

For more info on how to handle resume in VB/C#/C++ and XAML, see How to resume an app (VB/C#/C++ and XAML) on the Dev Center.

Activation

Activation is all about how your app gets launched. It serves many purposes in a Metro style app. For more details on how you can use Metro style app activation to handle contracts, see our earlier post, Activating Windows 8 contracts in your app. Here we focus on how you can use activation to restore previously saved data in the case that Windows terminated your app and then the user relaunched it.

Windows can terminate your app after it has been suspended for a number of reasons. For example: the user manually closes your app, or signs out, or the system is running low on resources (some apps, such as games, can be pretty resource intensive!). If the user launches your app after Windows terminated it, it receives an activated event and the user sees your app’s splash screen until the app is activated. You can use this event to determine whether your app needs to restore the data it saved when it was last suspended, or if you must load your app’s default data. The activated event arguments include a PreviousExecutionState property that tells you the state your app was in before it was activated. This property is one of the values of theWindows.ApplicationModel.Activation.ApplicationExecutionState enumeration.

Reason for termination	PreviousExecutionState value	Action to take
Terminated by the system (because of resource constraints, shut down, reboot, etc.)	Terminated	Restore session data
Closed by the user	ClosedByUser	Start with default data
Unexpectedly terminated, or app has not run since the user’s session started	NotRunning	Start with default data

PreviousExecutionState could also have a value of Running or Suspended, but in these cases your app was not previously terminated and therefore you don’t have to worry about restoring data.

When your app is activated and its PreviousExecutionState was Terminated, you must restore your saved session data to make the app appear just as it was when the user last looked at it. If the user closed the app manually, the app unexpectedly terminated or has not yet been run in the current session, you must ignore the previous session data and start the app up with its default view.

Our example stocks app uses the activated event to bring back the stock and chart info that it saved when it was suspended. The app also refreshes its cached network data. This way, the user sees the same stock that they saw when they switched away from the app, but the stock’s prices, charts, and news articles are all up to date.

Handling Activation in JavaScript

If you write a Metro style app using the Windows Library for JavaScript (WinJS), you can use the activated event to handle activation.

In the activated event handler code, your app can check the sessionState object to determine if it should load saved data or if it should display the default home view. SessionState determines the last state of your app automatically by examiningeventArgs.detail.previousExecutionState. If sessionState is populated, use it to restore your session data, otherwise use your app’s default data.

var app = WinJS.Application;

function activatedHandler(eventArgs) {
    if (eventArgs.detail.kind == Windows.ApplicationModel.Activation.ActivationKind.launch) {
        // Check whether the session state variables are valid.
        // If so, retrieve the stock and range values saved in the checkpoint handler
        if (app.sessionState) {
            stock = app.sessionState.lastSeenStock;
            range = app.sessionState.lastSeenRange;
        }
        // If not, use the app's default values
        else{
            stock = "DOW";
            range = "1M";          
        }

        // Initialize the WinJS controls asynchronously behind the app splash screen
        // Start retrieving the latest stock data asynchronously after the controls are ready
        eventObject.setPromise(WinJS.UI.processAll().then(function() {
            Api.initializeUserStocks();
        }));
    }
}

app.addEventListener("activated", activatedHandler);

      

For more info on how to handle activation in JavaScript, see How to activate an app (JavaScript and HTML) on the Dev Center.

Handling activation in XAML

In a Metro style app using XAML and C#, you can override the OnLaunched event to handle activation a basic activation from a tile.

In the OnLaunched event handler code, your app can check the PreviousExecutionState on the event arguments. If it equalsTerminated, restore the data you saved in the Suspending event. If it is a different value, use your app’s default data.

async protected override void OnLaunched(LaunchActivatedEventArgs args)
        {
    // Check whether the session data should be restored
            if (args.PreviousExecutionState == ApplicationExecutionState.Terminated)
            {
                // Here we've created a SuspensionManager class which handles restoring session
                // data from a file and then gives access to that data through a Dictionary
                await SuspensionManager.RestoreAsync();

// Retrieve the stock and range values saved in the suspend handler                 
stock = SuspensionManager.SessionState["lastSeenStock"];
                range = SuspensionManager.SessionState["lastSeenRange"];
            }
            // If not, use the app's default values
            else
            {
                stock = "DOW";
                range = "1M";
            }

    // Start retrieving the latest stock data
            Api.InitializeUserStocks();

            Window.Current.Activate();
        }

For more info on how to handle activation in XAML, see How to activate an app (VB/C#/C++ and XAML) on the Dev Center.

Tips for creating a great app lifetime experience

Now that you’ve got all the basics, here are some tips to help you build a great lifetime experience for your app that will keep it feeling always alive and fresh for your users.

Sometimes it’s best to start fresh

If it’s been a while since the user last looked at your app, sometimes it’s best to reset the app to its default view. It’s up to you to figure out how long is too long, but if the content of your app would look old or stale, we recommend you navigate your app back to its home view. This makes your app appear more intelligent to your users.

For example, if you are building a news reader app, it is likely your app will be suspended after the user switches away from it. Sometime later, when the user returns to your news reader app, the app is resumed. In your resume handler, check how old the current article is to determine if it is now stale. If the article is too old, display your default home view instead of the old article.

Save the right data at the right time

Always save important data incrementally throughout the life of your app. Because your app has only up to five seconds to run suspending event handler code, you need to ensure that your important app data has been saved to persistent storage by the time it is suspended.

There are two types of data for you to manage as you write your app: session data and user data. Session data is temporary data that is relevant to the user’s current experience in your app. For example, the current stock the user is viewing, the current page the user is reading in an eBook or the scroll position in a long list of items. User data is persistent and must always be accessible to the user, no matter what. For example, an in-progress document that the user is typing, a photo that was taken in the app or the user’s progress in your game.

Make sure that by the time your app is suspended, it saved both data types to persistent storage.

Restoring session data

Users will expect that a Metro style app will generally stay as they left it when they last used it. From the developer perspective, when your app is resumed from a suspended state or activated from a not running state, it is often appropriate to restore your previously saved session data.

For example, if your app includes shopping cart functionality and the user added items to the cart and then switched away from your app, it would make sense to maintain those items in the cart when the user resumes or reactivates the app.

In another example, consider an app that shows news articles. If the user was viewing a specific article, then switched to another app, the user will expect to see the article they were viewing when they come back to your app.

Release exclusive resources in your suspending event handler

If your app has acquired any exclusive resources during execution (such as file handles or references to external devices), it must release those resources when it receives the suspending event. Additionally, your app must reclaim those exclusive resources when it receives the resuming event if it needs them to continue.

Don’t close your app!

Metro style apps in Windows 8 must never close themselves or present app UI to allow a user to close your app. Suspending and terminating apps is handled by Windows on the user’s behalf to maintain system performance and battery life. If users want to close your app, they can do so by swiping from the top to the bottom of the screen or by pressing ALT+F4.

In closing

By using 3 events—suspending, resuming and activated—your app will always appear to be alive to your users. But at the same time, it will never drain their battery unnecessarily or reduce their system’s performance when they are not using it. In the world of slimmer, more mobile devices, the new Metro style app lifecycle lets your app shine on any device.

Leave your comments and suggestions at admin@exploresilverlight.com

Cheers!

Vinod