For anyone paying attention to the Microsoft space since September 2011, Windows Runtime (WinRT) has been a hot topic among the developer crowd as the
platform for developing the next generation of Windows 8 immersive applications. The most exciting thing about WinRT is that both today's web
developers and XAML developers have a place in this new environment: WinRT runs just as well when using HTML5 and JavaScript as it does when using XAML
and C#. This means that, a few API changes aside, skill reuse is at a maximum. Anyone who is currently working with Silverlight or Windows Presentation
Foundation (WPF) should have no problem transitioning into WinRT.
With that in mind, let's take a closer look at WinRT. In this article, we will first explore one of the pre-defined templates in WinRT to see how it
compares with the XAML we know today. Then we will start a new application from scratch using our existing XAML and C# skills.
Diving In
The first step in creating any application for WinRT is to open Visual Studio. With the Windows 8 Developer Preview, we also received access to the
Visual Studio 11 Express Developer Preview, giving us everything we need to develop, run, and debug a WinRT application even in this early stage of
WinRT's life. Opening Visual Studio 11, we are presented with a familiar start screen, so we can click New Project to see what templates are installed
with Visual Studio 11. Figure 1 shows the New Project screen.
Figure 1: New Project screen in Visual Studio 11
We can see options for JavaScript, Visual Basic, Visual C#, and Visual C++; we'll choose Visual C#. Doing so presents us with five options to choose
from for a new project:
-
Application: an empty application, a blank slate to work from
-
Grid Application: an application with predefined views for viewing hierarchical data. In this case, the default setup works well for an RSS
reader-style app because it has logic for navigating through items of multiple collections as well as placeholders for visual elements.
-
Split Application: a typical list-and-details style application that allows for browsing through a condensed view of items in one list while a
details view offers more specific information
-
Class Library: same as in .NET, a class library that can be used within a WinRT application
-
Unit Test Library: also the same as in .NET, this provides a library for adding unit testing to your application.
Now we will explore what an in-process WinRT Metro application looks like. We'll first select the Split Application type and click OK. Before writing a
line of code, click Run, and you'll see an application that looks a lot like the one in Figure 2.
Figure 2: Split Application example
You can choose different items from the left-hand list to see the full details on the right, or alternatively, click the back-arrow button to see the
main hub of the application and the different collections that are available.
Split Application XAML Looks Like Silverlight XAML…
The project will begin with CollectionPage.xaml open, so let's look at that page to see some of what is taking place in this application. For your
reference, CollectionPage is the page you would have seen if you clicked the Back button on the start-up page for the application, as it normally
starts on SplitPage.xaml.
The first line we see is a UserControl, shown in Figure 3 -- a familiar item for both Silverlight and WPF developers. This works
essentially the same as in both of those platforms, providing a component that allows for easy reuse throughout your application. In this case, all the
UserControls within the application are being used full-screen, but you still have the option to load other controls onto your page. Stepping down a
few lines, we can also see that the UserControl has a Resources collection containing a CollectionViewSource with both an x:Name and x:Key -- meaning
that we can still set names to reference from code as well as keys to be used for referring to resources.
Stepping down a bit further, we get to our page content, with the main layout panel being a Grid. This has the same properties you would expect from
WPF and Silverlight, including Row and Column definitions as well as a VisualStateManager (VSM). In WinRT immersive applications, the VSM becomes very
important because it allows for state transitions between Full (landscape), Portrait, and Snapped views. For anyone unfamiliar with these views, the
breakdown is as follows:
-
Full: a landscape view of the application taking up the entire screen (the typical Metro/immersive application)
-
Portrait: as the name suggests, a view that has been turned on its side. Using the tablet form factor as an example, Windows 8 tablets will
generally always default to a landscape setup; however, in some scenarios a Portrait view may benefit your application.
-
Snapped: Windows 8 allows for a "snapped" view in which one application takes up a portion of the screen while a main application is still in
use. Not providing a view for the Snapped view state could make your application unusable if users want to have two applications running side by side.