Welcome to the first in this two part series on developing Metro application in Windows 8. Part two is available here
In this two part series, I will demonstrate just how easy it is to create your first Windows Metro application, and highlight some of the changes that you will need to be aware of if you are coming from a WPF, Silverlight or Windows Phone background. The series will concentrate specifically on the three different types of Metro application available to you in Visual Studio.
The first part will demonstrate how to create a blank Metro application, familiarise yourself with the location of the resources and files, and finally demonstrate how to load some data from your computer using the new async and await keywords in C# 5.0.
The second part will demonstrate how to create a Grid and Split Application, highlighting the differences between the two, and also show you the amazing “Simulator” that incidentally, will please project managers no end, as they will have to purchase far less hardware to test their Metro applications on.
- The first thing to do, is ensure you download the tools. In order to create a Windows Metro application, you will need to be running Windows 8 (consumer preview available here) and Visual Studio 11 (beta available here or any of the express editions. If you are using Windows 7 and Visual Studio 11 beta, or Visual Studio Express, then the metro templates will not be available to you in Visual Studio.
Visual Studio 11
Creating a Simple Metro Application
If you run Visual Studio, select New Project and then the Windows Metro Style template (Visual Basic template is at the bottom of this screenshot), also note that there are three application types available that are highlighted in yellow. Select the Blank Application Template and name the project BlankApplication and click OK
The first thing to notice is that your solution explorer has an Assets folder and a Common folder
In the Common Folder you have a StandardStyles.xaml file that (as you might guess) contains the styles all Metro applications use, and since one of the Metro Guidelines is that “a Metro Style app should look like a Metro application”, these styles are invaluable. If you also look at both the XAML and code being of the App.xaml you will see that this works like WPF or Silverlight if you have ever used the navigation framework and it also explain why when you hit F5 you get a blank page
Viewing Images from my computer
If you double click on the BlankPage.xaml and add the following mark-up and code to click a button and load some images from your computer. Also be aware that everything in WinRT is asynchronous. Since it is Olympic year, I have a folder in “My Pictures” on my computer with some aerial photos of the Olympic Village as a work in progress
If you select F5 in Visual Studio, and click on Find Pictures
Here you can see the text that you added to the command in the code behind
Finally here you can view all the images that I have in the My Pictures folder on my computer
As you can see there are a lot of similarities for WPF and Silverlight developers coming to WinRT, and though some libraries will differ it will not be that difficult to incorporate these differences to your existing toolset.