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
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)
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
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.
If you press F5 to build you should have the following
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.
3 thoughts on “Introduction to Windows 8 Metro & WinRT (part 2)”
Pingback: Windows 8 Developer Links – 2012-04-16 | Dan Rigby
Excellent introduction to the Visual Studio project templates. Took a while to find, but well worth it.
Why, thank you, kind Sir!