Metro style Apps are enticing to all types of software developers. Web, Desktop, and Phone/Device developers share common tools in Visual Studio, and common components and libraries within the Windows Runtime (WinRT). If you are just getting started with Windows 8 Metro style app development, but are an experienced web developer, your skills are highly portable, and the learning curve is more akin to a small bump. While you won’t be able to click a button and magically port an ASP.NET application over to a Metro style app (that simply doesn’t happen), you still use the vast majority of your current web development skills, as well as adding new skills.
To get started writing Metro style apps for Windows 8, you need the following:
Optionally, but highly recommended tools: Samples, Related design assets (icons, etc.), the Live SDK, and the Advertising SDK for Windows 8, all available here. Once downloaded, you’ll want to familiarize yourself with Windows 8 and the principles behind Metro style app development and what makes a great Metro style app before proceeding to Visual Studio.
- A set of rich, data bound, HTML controls
- Customizable Metro style CSS for dark and light themes
- Namespaces and code organization
- Access to hardware APIs / Touch, Mouse, and Keyboard
- Familiar tools such as Visual Studio
- Integrates seamlessly with several, APIs, Bing Maps, Live services, etc.
Since the tool for developers writing apps with the Windows Runtime is Visual Studio 11, a great way to get started is by dissecting one of its default project templates.
The Grid and Split project templates are the best bang for your buck, as these app templates contain the app infrastructure that performs many of the required tasks and features necessary in proper Metro style app. Since the app infrastructure code is mostly done for you, you can focus on your app requirements, business logic, and app features.
The other files in the project are editable files that are part of the Split project template. You can modify these files to create your own Metro style app.
The Split project template has enough code and resources to for a working prototype of an app. Launching the app in VS using F5/Ctrl + F5 (start debugging/start without debugging) will cause the app to run in full-screen, immersive, mode, by default, and therefore you can not debug it. In order to use the Visual Studio 11 debugger, change the Debug configuration to run the Microsoft Windows Simulator.
The simulator hosts your app so you can switch between VS 11 and the simulator for debugging tasks, or to simulate features, that might not be available on on device vs. another, e.g., an accelerometer or mimicking touch, therefore reducing the need for multiple, physical, test devices.
Once running, the app’s start page looks something like the screen shot below, with the tiles representing a grouped or categorized view of the data from the data.js file (By default the file is filled with JSON arrays of filler/sample data).
Tapping or clicking on any of the tiles will take you to another page that shows related data for that group, pictured below. Selecting any item in the left side list displays its details on the right, all from the splitPage.html file.
When developing Metro style apps, sticking to the default template makes it very easy to adhere to the Metro style guidelines.
The notable markup is the data-win-control and data-win-options attributes. The data-win-control attribute maps to a PageControlNavigator control’s code in the navigator.js file, while the data-win-options attribute defines the home page, itemsPage.html as its page control with the content. This also means that default.html is just a container, conceptually similar to a master page in ASP.NET Web Forms or a Layout Page in ASP.NET MVC. Data- attributes are a new standard introduced in HTML5.
Below is the default.js that runs when the app starts (see under <!—WinJS references—> in the previous code snip), as well as skeletal code for app initialization, activation, suspension, etc… The WinJS.Application object is a WinJS library object that allows you to hook into the application lifecycle events, such as suspend and resume – something important for immersive, full screen, apps.
The default CSS in the project template contains basic styling that adheres to the Metro style, including some –ms-* prefixes for grid alignments (-ms-grid-columns, –ms-grid-rows). Default, Metro style, CSS, uses the Grid System, so units such as 1fr (fraction) are common in the .css files.
Additionally, the .css files contain CSS 3 Media Queries for displaying the app in snapped view or portrait mode, along with CSS for accessibility, all important aspect of Metro style apps.
App Manifest & Project properties
The final piece of the puzzle that needs to be complete when creating a Metro style app is customizing the App Manifest. The app manifest is an XML file that specifies the necessary information about your app to the Windows Store and the WinRT as needed. Double click the package.appmanifest file to open the manifest editor.
Edit the following in the app manifest:
- App UI & general info: App name, description, tile icons, screen orientations, and splash screen
- Specify your app’s capabilities such as use of the hardware camera, removable storage, user data, etc.
- Declare your app’s usage scenarios such as using File pickers, background tasks, etc.
- Other settings (on packaging and content)
Once you have properly configured your app, you can use the Store menu (in VS 11 express) or Project->Store (in VS 11 Ultimate) to package your app for The Windows Store.
Summary & Resources
The default project templates contained within Visual Studio 11 you an easy way to do Metro style app development. If you are a developer looking to put your Metro style app in the Windows Store (where all app authors want their app to be) adhering to the guidelines for store entry is important, and using the templates as a guide is the perfect way to do so.
 Windows 8 Consumer Preview is the current version at the tine of this post, in May 2012