How to: Windows 8 Metro Style Hello World

I have been asking to make a post about how to make a Windows 8 Metro Style Hello World application step by step. I think the articles and code samples you can get from the Build site are good enough, but maybe a little old fashion simple step by step post is not a bad idea. So here it goes.

First of all, you need to install Windows 8 Developer Preview on a computer. Ideally it should be a touch machine. It can be a cheap tablet or a crappy old laptop that you can connect to a touch monitor. If not, that’s ok too, you can always use your mouse to test and get up to speed while you get the real deal. Remember that you need the 64bit version which comes with the Windows Development Tools (Visual Studio 2011 and Blend 5 previews). Alternatively, you can create a virtual machine in your own computer. Check this post I published before on how to do it.

Once you have your OS setup, fire up Visual Studio 2011. Select File/New Project. The New Project window will open allowing you to select from one of the existing project templates. For this example, just select “Windows Metro Style” under Visual C# on the left panel, and then select the “Application” template, which is the simplest of the metro style templates available. Select a location for your new project and name it “HelloWorld”. Click Ok.

Once the project is created, you will see the project structure on the solution explorer on the left (if you don;t have the window open already, search for it on the View menu option).

If you want more details on the different files that are required by Metro Style applications, head to the Build site and look into the talk videos they posted.

For this basic sample, we are just going to include a welcome message, a button and then add the code to make the welcome message change, once the user clicks the button. This is how it looks on the design view inside Visual Studio 2011:

You need to modify the MainPage.xaml file to include the text block and the button inside the grid panel as follows (you can just replace the <Grid/> with the following):

<Grid x:Name="LayoutRoot" Background="#FF0C0C0C">
        <TextBlock x:Name="txtGreeting" Text="Hello World" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="48" />
        <Button Content="Change Greeting" Margin="0,120,0,0" HorizontalAlignment="Center" VerticalAlignment="Center" Click="Button_Click" />
</Grid>

Once that is done, you will be able to reference the message text block from the code behind. When the click event fires, the even handler on the code behind will be able to modify the text block message.

Open the MainPage.xaml.cs and make sure the button click handler is like the following:

private void Button_Click(object sender, RoutedEventArgs e)
{
            txtGreeting.Text = "Well done. Welcome to the Metro Style Ecosystem !"
}
Make sure the rest of the code stays as it was created by the default template. Now run the application.

Congratulations, you have created your first Windows 8 Metro Style application. From now on, everything is fun and exciting.
Be sure to explore the different sessions, code samples and tutorials at the Build web site. There’s is a lot for you to get further down the road on Metro Style development. And remember to keep your Windows Phone sharp too !
Cheers!