Welcome to the second in this two part series on developing Metro applications in Windows 8. The first part is available here

Introduction to Windows 8 Metro & WinRT (part 1)

In the first part you saw how to create a Metro/WinRT application using the Blank Application Template. In this part you see how to utilise both the Grid and Split application templates

Grid Application

If you open Visual Studio (or the Visual Basic or C# Express editions) and select the Grid Application Template and call the project GridApplication (take note of the information on the right in the New Project Dialogue that explains the core features of this template). This template (in a nutshell) allows you to create Master/Detail views of your data in a touch friendly way.

After clicking OK, it is best that you hit F5 and ensure you build the project as there are custom resources that need to be built, if you fail to do this then the XAML designer will show errors.

Note:  I am also experiencing a bug where the project is blank in the solutions explorer, if you run into this issue, close the application in Visual Studio, and restart it, and it should show up now. I have also (this morning) been offered some updates for Visual Studio that I hope resolve some of these issues in Visual Studio, I recommend you update

If you look at your solution explorer you will find that there are some additional folders and files. Take special note of the DataModel folder, and the three pages highlighted below

If you (like me) have been using MVVM religiously in your WPF, Silverlight or Windows Phone applications, a lot of the structure of the application should be familiar. If you go into GroupedItemsPage.xaml you will find the following XAML where the SampleDataSource is bound. Also note that there are two main Views in the XAML. When viewing data normally the GridView is used (wrapped in a scroll viewer) but when you pin the application to the side of your screen, the ListView is used instead.

Look at the code behind of the App.xaml file, here you will see how the data gets populated and fed to the windows that will display the data by creating an instance of  the SampleDataSource and passing the ItemGroups into the constructor of the page.

If you run the application you will find you have this master page

.

If you select any items in the list you will be taken to this details view

If you select the group title (look at the arrows in the master page image) you will have this view

Also take note of the touch friendly handles

If you move your mouse to the top of the screen so a little hand cursor show, and then drag the app to the right hand corner, you can pin the application to the side (this is the aforementioned ListView). Dragging the Grid Splitter to the left will restore full screen mode

In your Visual Studio Solution, if you navigate to your DataModel folder, you will find the SampleDataSource.cs. This (as you might have guessed) contains the data that you see in the application in the following four classes (as a best practice you will want to move these classes into their own files)

The Simulator

A really useful tool in Visual Studio is called the Simulator. This in essence, allows the ability to run the application in Simulation mode, where you can test how you app will respond to different screen resolutions for example. If you toggle the build setting to simulator and build

you will have the following

You can rotate the application 90 degrees to see what it looks like

If you want to see what the application looks like on a bigger screen

Split Application

If you open Visual Studio (or the Visual Basic or C# Express editions) and select the Split Application Template and call the project SplitApplication (take note of the information on the right in the New Project Dialogue that explains the core features of this template).

The assets and files for the SplitApplication are almost identical to the GridApplication except here you have a SplitPage and an ItemsPage.

Main View

If you press F5 to build you should have the following

Split View

 

As you can see Visual Studio makes it very easy for you to get started and create applications that look beautiful and can bind to data sources very easily. I really love the Expression Designer they have included in Visual Studio 11,  it really makes working with mark-up like XAML so much easier.