Exploring Windows 8 Developer Preview: Essential Metro Style App Samples and Patterns

How to Build a Metro Style App — Windows 8 Developer Preview Sample WalkthroughsBuilding a Metro style app for the Windows 8 Developer Preview is a great way to learn the platform’s design principles, APIs, and development workflow. This walkthrough will guide you through the essential concepts, required tools, and step‑by‑step examples using sample apps from the Developer Preview. By the end you’ll understand how to structure a Metro app, implement common UI patterns, handle app lifecycle events, and use platform features such as charms, contracts, tiles, and asynchronous APIs.

---

What is a Metro style app?

Metro style apps are full‑screen, touch‑optimized applications introduced with Windows 8 that follow a content‑first design language. They emphasize typography, clean grids, edge gestures, and immersive experiences. Metro apps run in a sandboxed environment, use a new app lifecycle model (suspended/resumed/terminated), and integrate with system services (charms, contracts, live tiles).

---

Prerequisites and tools

• A PC running Windows 8 Developer Preview (or later Windows ⁄₈.⁄₁₀ for development).
• Visual Studio 2012 (Express for Windows, Professional, or higher) — the Developer Preview used Visual Studio 2012 Express for Windows 8.
• Knowledge of one of the supported languages: C#/XAML, Visual Basic/XAML, C++/XAML, or HTML5/JavaScript. This walkthrough uses examples in both C#/XAML and HTML/JS to demonstrate patterns across technologies.
• Windows SDK for Windows 8 Developer Preview (included with Visual Studio 2012).
• Familiarity with asynchronous programming concepts—Metro apps rely heavily on async APIs to keep the UI responsive.

---

Metro app project structure and key files

When you create a new Metro app in Visual Studio, you’ll see a skeleton project containing:

• App manifest (Package.appxmanifest) — declares app capabilities, visual assets, tile settings, and contracts.
• App.xaml / App.js — application entry point where lifecycle events (activated, suspending, resuming) are handled.
• MainPage.xaml / default.html — initial UI.
• Assets folder — images and tile icons.
• References to WinRT libraries (Windows.* namespaces).

Key concepts:

• App lifecycle: OnLaunched/activated, Suspending, Resuming. Save view state in suspending and restore in activation.
• Async model: Use async/await (C#) or Promises/WinJS (JS) to call I/O and long-running APIs.
• Visual styles and controls differ from classic desktop apps—use semantic zoom, split view, and predictable navigation patterns.

---

Walkthrough 1 — Basic “Hello World” sample (structure and lifecycle)

Goal: Create a minimal Metro app that displays content and handles suspend/resume.

Steps (C#/XAML):

1. Create new “Blank App (Windows)” project in Visual Studio.
2. In App.xaml.cs, wire up lifecycle events: “`csharp protected override void OnLaunched(LaunchActivatedEventArgs e) { Frame rootFrame = Window.Current.Content as Frame; if (rootFrame == null) { rootFrame = new Frame(); Window.Current.Content = rootFrame; } if (e.PrelaunchActivated == false) { if (rootFrame.Content == null) rootFrame.Navigate(typeof(MainPage), e.Arguments); Window.Current.Activate(); } }

private void OnSuspending(object sender, SuspendingEventArgs e) {

var deferral = e.SuspendingOperation.GetDeferral(); // TODO: save app state deferral.Complete(); 

}

3. In MainPage.xaml, place a TextBlock and a Button. Hook the button to update text.   4. Run the app, then debug suspend/resume using Visual Studio lifecycle tools. Key takeaways: - Always obtain a deferral in Suspending if performing async save operations. - Restore navigation state and transient data on activation. --- ## Walkthrough 2 — Navigation, view states, and layout (Master/Detail pattern) Goal: Implement a master/detail UI that adapts to snapped, filled, and full‑screen states. Design: - Master list of items on the left, details pane on the right when enough space exists. - In snapped or narrow view, show only the master or detail and allow navigation between them. Steps (HTML/JS example using WinJS): 1. Use ListView control for the master list and a simple container for details.   2. Respond to window resize and view‑state changes with a layout function: ```javascript function updateLayout() {     var isSnapped = Windows.UI.ViewManagement.ApplicationView.value === Windows.UI.ViewManagement.ApplicationViewState.snapped;     if (isSnapped) {         // show only list; hide details     } else {         // show list + details side-by-side     } } window.addEventListener("resize", updateLayout); 

1. Use WinJS.Navigation.navigate() to switch between pages in narrow view; in wide view, update the detail container instead.

Key takeaways:

• Design for multiple states; use responsive grids and adaptive UI.
• Prefer one source of truth for selection state so both master and detail can read it.

---

Walkthrough 3 — Using charms and contracts (Share, Search, Settings)

Goal: Integrate with the system charms to support sharing data and search, and declare Settings commands.

Share contract (HTML/JS):

1. Declare share capability in the manifest.
2. Register a DataRequested event handler:

   
   var dataTransferManager = Windows.ApplicationModel.DataTransfer.DataTransferManager.getForCurrentView(); dataTransferManager.addEventListener("datarequested", function (e) { var request = e.request; request.data.properties.title = "Share sample"; request.data.setText("Shared text from my Metro app."); }); 

Search contract (C#/XAML):

1. Add SearchPane event handlers in OnNavigatedTo of the page:

   
   var searchPane = Windows.ApplicationModel.Search.SearchPane.GetForCurrentView(); searchPane.QuerySubmitted += OnQuerySubmitted; 

2. Implement OnQuerySubmitted to perform filtering and navigate to results page.

Settings (HTML/JS or C#):

• In the manifest, declare the Settings contract (Windows 8 used Settings charm APIs). Add commands to the settings pane to show privacy or preferences flyouts.

Key takeaways:

• Contracts let apps interoperate with the OS and other apps; declare them in the manifest and implement handlers.
• Test share and search flows using the system charms during debugging.

---

Walkthrough 4 — Live tiles and notifications

Goal: Update the app tile dynamically to reflect content changes.

Steps (C#/XAML):

1. Add tile images and declare tile templates in the manifest.
2. Use TileUpdateManager to send updates:

   
   var updater = Windows.UI.Notifications.TileUpdateManager.CreateTileUpdaterForApplication(); var tileXml = Windows.Data.Xml.Dom.TileXmlTemplateFactory.GetTemplateContent(TileTemplateType.TileSquare150x150Text04); // populate xml nodes... var tileNotification = new Windows.UI.Notifications.TileNotification(tileXml); updater.Update(tileNotification); 

3. For frequent updates, use a background task (declared in manifest) that periodically refreshes tiles.

Key takeaways:

• Live tiles increase engagement; ensure content is timely and respects user preferences.
• Background tasks require careful declaration and power/runtime considerations.

---

Walkthrough 5 — Accessing sensors, files, and devices (capabilities and async I/O)

Goal: Read a file from the Pictures library and display metadata.

Steps:

1. Declare the Pictures Library capability in Package.appxmanifest.
2. Use StorageFolder and StorageFile APIs with async calls (C#):

   
   StorageFolder picturesFolder = KnownFolders.PicturesLibrary; var files = await picturesFolder.GetFilesAsync(); if (files.Count > 0) { var file = files[0]; var stream = await file.OpenReadAsync(); // load into Image control via BitmapImage, etc. } 

3. For sensors (e.g., accelerometer), get the sensor and register a ReadingChanged handler.

Key takeaways:

• Capabilities must be declared or access will be denied.
• Use async APIs to avoid blocking the UI thread.

---

Common patterns and best practices

• Use the MVVM pattern for XAML apps to separate UI and logic; in JavaScript apps, separate data and view logic similarly.
• Prefer async/await (C#) or Promises/WinJS (JS) for all I/O.
• Minimize work in the UI thread; offload CPU‑bound tasks to background threads or threadpool.
• Respect the app lifecycle: save state on Suspending, release resources if entering the background.
• Localize strings and resources early; use resource files (.resw) or WinJS resource strings.
• Test for accessibility: support high contrast, screen readers, and keyboard navigation.

---

Debugging and testing tips

• Use Visual Studio’s lifecycle simulation (Suspend/Resume) to test state persistence.
• Use the UI Responsiveness and Concurrency Visualizer tools to find UI thread bottlenecks.
• Test on different screen sizes and DPI settings; use the emulator or additional monitors.
• Validate manifest capabilities and contracts in the packaging wizard.

---

Where to find and use Developer Preview samples

Microsoft provided a range of sample projects with the Windows 8 Developer Preview demonstrating patterns (Mail, Weather, Reader sample, Music, Photo). These samples illustrate real‑world use of navigation, data binding, contracts, tiles, and device APIs. Import them into Visual Studio, step through the code, and adapt useful components into your app.

---

Conclusion

Building Metro style apps in the Windows 8 Developer Preview centers on embracing the platform’s lifecycle model, touch‑first design language, and asynchronous API surface. Start from sample apps, practice implementing navigation and contracts, and progressively add features like live tiles and background tasks. The samples accompanying the Developer Preview are invaluable learning tools—read the code, run them, and modify them to fit your ideas.