Windows 8 Metro Apps

One of the major new features in Windows 8 is the concept of Metro style apps. The term “Metro” is used to describe a new design style for application user interfaces and an apps overall user experience. The Metro style interface can currently be seen in the Microsoft Zune media player and the Windows Phone 7 operating system. For more information on Metro check out Microsoft’s Metro Design Language page.
Metro apps in Wind0ws 8 run under a totally new operating environment called Windows Runtime or WinRT. I am not going to get into the details of WinRT here since quite honestly I have still not entirely gotten my head wrapped around it. Fortunately WinRT supports various languages and technologies that you are probably already familiar with so it’s not to hard to  get up to speed writing Metro apps.
If you have installed the Windows 8 Developer Preview with developer tools you can use this walkthrough to make your first Metro app.

1. Startup Visual Studio 11 Express
2. Click New Project.

You will see templates for a Windows Metro style apps for each of the supported languages. Note that this preview version of Visual Studio is only setup to do Metro apps. Javascript apps use HTML and CSS for their user interface, but unlike browser based apps they can have full access to the WinRT runtime. VB.NET, C#, and Visual C++ all use XAML for their UI’s which should be familiar to anyone who has done WPF or Silverlight apps.

3. Select the Windows Metro style template under Visual C#, and then click Application in the center panel. This will create a basic blank Metro app.
4. For the Name of the application enter HelloWorld then click OK.

If we ran the app now we would just get a blank screen so let’s add a little bit of content.

5. In the XAML view, between the Grid tags, add the following code:

<TextBlock Text="Hello World" HorizontalAlignment="Center" Margin="20" TextWrapping="Wrap" VerticalAlignment="Top" FontFamily="Georgia" FontSize="16"/>

6. Save you program then click Run.

Once the program compiles and runs you will get a black screen with a clock icon as the app loads then a black screen with the words “Hello World” in the top center. The first thing you will notice is that the app takes up the entire screen, this is a major design elements of Metro apps. If you have a large enough screen Windows 8 will provide the ability to do two apps side by side, but the standard is going to be one app displaying at a time.


Another thing you will notice is that there is no obvious way to close the app. The app lifecycle is much different in Metro. When you switch from one app to another the current app goes into a suspended state but remains in memory, then if you switch back to it, it will become active again. If memory starts running low the OS will automatically start terminating suspended apps.


Press the Windows key to bring up the Metro Start screen, scroll all the way to the right and you will see this icon:





This is the default icon that represents you new app. If you hover your mouse over it the Hello World name will pop up. To get back to Visual Studio just click the Desktop tile on the Metro start screen. Since your app is still suspended in the background remember to click stop to terminate it.