When learning a new development platform I always find some hurdles getting my app working just the way I want it to. Like me, many of you have used our forums to get answers to the issues you run into. For this post we selected some of the most popular forum topics to highlight and provide more resources to help keep you coding. App settings and data, applying consistent colors and styles, designing for multiple languages and cultures, and Animating Metro style controls were all highly posted, viewed and replied topics.

For each topic I selected resources and put them in a table. Each table is organized with quickstarts on top, SDK samples next, and in-depth documentation last. Quickstarts are a great place to start because they contain explanations and code snippets that provide the background that helps you understand the API design. SDK samples provide a deeper dive, and are a great place to start if you know what you need to do, but you just need to see an example to get started. Docs are there if you need the deepest dive; use these when you want to understand the full capability of some feature you’re already familiar with.

App settings and data

“What difference is there between Windows.Storage.ApplicationData.current and WinJS.Application.local?”

Many of you have posted questions similar to this in the forums. There are lots of different ways for apps to access settings and data, each with distinct advantages. WinRT provides XAML and JavaScript apps with common APIs for storing local and roaming settings, and temporary data. Using the WinRT Roaming data APIs, app settings and data can be automatically synced to all machines that the user linked to the same Microsoft account. For more info, see Application data.

When you design your Metro style apps, keep in mind that users may be using different Input devices, display sizes, and network connections of various speeds. For more info on how to respond to network status changes, and developing your app for varying connection speeds, see Developing connected applications.

Roaming application data is a simple and powerful built-in tool for syncing app data for users that are signed into Windows with their Microsoft accounts. We’ve developed patterns for syncing files and settings across devices seamlessly. For great app experiences, don’t assume anything about how these APIs work. Instead, see Guidelines for roaming application data.

App settings and data resources

Link

Type

Highlights

Managing application data (HTML, XAML)

Quickstart

Code snippets for storing and accessing local and roaming settings and temporary data.

Application data sample

Sample

ApplicationData APIs including LocalSettings and RoamingSettings, plus accessing/storing files in the RoamingFolder.

Guidelines for roaming application data

Docs

Suggestions for when to use roaming data APIs.

Storing and retrieving state efficiently (HTML)

Docs

WinJS includes unique support for storing settings reliably and efficiently with SessionState and file access with local storage.

Indexed Database API (HTML)

Docs

JavaScript apps have built-in, standards compliant Indexed Database APIs (aka IndexDB) that are powerful and easy to use.

Check out the Grid and Split Metro Style App templates in Visual Studio 11 for an example of how to store application data automatically using Application Lifecycle events.

Applying consistent colors and styles

“How can I change the color of the background of the GridViewItem when it's selected…?”

Many developers have posted questions about how to customize apps, controls, and tiles. This section provides info about leveraging the built-in styles as well as how to create your own custom look and feel. Windows 8 has APIs that make it simple to choose between light and dark theming, to use high contrast colors for readability, and to create custom color themes for Metro style apps.

Metro style apps support high contrast color schemes by default. When a user switches to a high contrast theme in Settings, apps using built in styles automatically switch to system-defined high contrast colors.

Windows 8 apps are afforded the full screen, immersing the user in your app. Users will become familiar with your brand as they spend time with the colors and styles that you use consistently throughout your app. These resources provide info on styling your apps using whatever colors and styles define your brand.

Theming resources

Link

Type

Highlights

Quickstart: styling controls (XAML)

Quickstart

Creating and deriving from styles, implicit/explicit styles, and control templates.

Quickstart: styling controls (HTML)

Quickstart

Styling HTML controls. Includes CSS and HTML code snippets, and info on the CSS pseudo-elements and the HTML parts that are specific to metro style apps.

Quickstart: Using brushes (XAML)

Quickstart

Brushes, shapes, and effects.

Applying app theme color (HTML theme roller)

Sample

This ‘theme roller’ helps you build and test a custom app color scheme and shows how to use chosen colors in your apps.

CSS styling for high contrast mode

Sample

CSS media queries for detecting high contrast mode, and custom high contrast styles.

XAML high contrast style sample

Sample

Demonstrates how to support high contrast colors for custom-built app themes and styles.

Building an accessible Metro style app with JavaScript

Docs

Includes accessibility requirements and checklists and info on Supporting high contrast themes .

Accessibility in Metro Style Apps (XAML)

Docs

Info on high contrast theme support and other accessibility issues.

Designing for multiple languages and cultures

“What's the best way to create a multi-language app?”

We’ve introduced new localization resources tools for Windows 8, and we’ve seen many questions about localization and globalization. Our new localization resources format is similar to some of our previous offerings, but was designed to be common across programming languages. The resources here will help you make decisions on globalization/localization factors as you plan for a global market.

The Windows Store can put your apps in front of a global audience. Customers will be more likely to download and use the apps in their language. The Windows Store for developers blog recently announced additional global coverage including new languages, and new markets for submitting and buying apps. Regardless of the Windows Store markets you make your app available to, your app must meet Certification requirements for Windows apps. Make sure that your app is appropriate for a global audience and that your app name is unique across the Windows Store catalog. Decide in which languages you will provide technical support.

Localization resources

Link

Type

Highlights

Quickstart: Make your Metro style app world ready (XAML)

Quickstart

Resource file examples and code snippets.

Quickstart: Designing a globalized Metro style app (HTML)

Quickstart

Resource file examples and code snippets.

Application resources and localization

Sample

App sample for creating apps for multiple languages.

Multilingual App Toolkit

Toolkit

The toolkit can help translate your app’s resources, and the pseudo language engine can help you test your app’s global readiness even if you don’t know any foreign language.

Designing for globalization and localization

Docs

Best practices for creating localized apps.

 

Animating Metro style controls

“The animation of show Edge UI is very cool. How to implement in C++?”

Many developers have asked us questions about how they can add Metro Style animations to their apps. Animations bring your apps to life, and Windows 8 introduces a library of animations accessible to Metro Style Apps that weaves a thread of common personality through all apps that use it. Additional animation support from CSS and XAML allow developers to port animations from previous projects or to create custom animations for brand new apps. If you haven’t already, check out our blog post on Fast and fluid animations in your Metro style app. This post goes in depth on how we built Windows 8 to ensure animations would be consistent and smooth, and provides code-samples and descriptions to get you started.

Animation resources

Link

Type

Highlights

Quickstart: Animating your UI

Quickstart

Porting animations from Silverlight/WPF, provides code samples, explanations and links to documentation and a video of some common animations.

Animations library (XAML, HTML)

Sample

Animation Library APIs give you access to the same animations used throughout Windows UI and other Metro Style apps, giving your app that built-in look and feel. Includes animations like PopInAnimation.

HTML Independent Animations

Sample

CSS 2D and 3D transitions, transforms and animations in a Metro Style app.

HTML flyout control sample

Sample

Shows the HTML Flyout control’s default animation on show.

Animation metrics sample (XAML)

Sample

Shows how to access the parameters that define the Animations in the Windows Animation Library, so that developers can rebuild these animations.

Animating your UI with the Animation Library (HTML)

Docs

Comprehensive references of JavaScript animations with control specific guidance, examples and CSS3 Quickstarts.

Wrap up

We’ve been monitoring your feedback and after we identified these important topics, I searched broadly and deeply through our documentation and samples to share these links. Teams across Microsoft participate daily in the developer forums to learn what our customers want to know and to provide answers to your questions. The community resources, Windows 8 Metro style app samples, API reference for Metro style apps, and documentation continue to evolve. As soon as the upcoming Release Preview is available, links in this post (and other content in Windows Dev Center) will contain updated info to keep you productive. We couldn’t do it without your feedback and questions, so please keep posting in the Metro style apps forums, and let us know if you can’t find something you need.

-- Aaron Wroblewski
    Program Manager, Windows