First things first; we will start with the creation of our first base application that we will re-use for most of the following recipes in this chapter, improving it one step (or more) at a time. This recipe will show you how to implement a basic application and help you get familiar with Visual Studio 2012 and Blend for Visual Studio 2012.
In order to use this recipe, you should have a Windows 8 operating system, Visual Studio 2012, and Blend for Visual Studio 2012. We will also need a Windows 8 developer license to create Windows Store apps, which we can get for free from Visual Studio 2012, as shown in the following image:
First we will open Visual Studio 2012 in Windows 8 and create a new project. For this we must perform the following steps:
OurFirstMetroApp
, and location, and click on the OK button.Package.appxmanifest
file.HelloPage.xaml
, and then click on the Add button at the lower-right corner of the window.AppName
resource, which is now overriding the global AppName
resource. We will go and comment the line defining this on the <Page.Resources>
tag of HelloPage.xaml, which is located in the topmost area of the XAML code, similar to the following code:<Page.Resources> <!-- TODO: Delete this line if the key AppName is declared in App.xaml --> <!--<x:String x:Key="AppName">My Application</x:String>--> </Page.Resources>
grBody
. Select the grid and change the property Name on the Properties panel, or we can change it directly in the DOCUMENT OUTLINE panel.grBody
grid. We will move our cursor to the left-hand side of the grid, and an orange marker with the shape of an arrow will appear, indicating a grid separator. Clicking on that region, we will be able to add, modify, or delete a row. The same applies to the columns. We will add a row about 150 pixels from the bottom.This is our First Windows Store App
.btnStart
, and its Content to Start
.HelloPage.xaml
will be seen, where an empty method has been created. There we will enter the following code (note that for this to work, we will have to add the data to the namespace):private void btnStart_Click(object sender, RoutedEventArgs e) { this.Frame.Navigate(typeof(GroupedItemsPage), "AllGroups"); }
App.xaml.cs
code behind the file and comment the Navigate
instruction on the OnLaunched
event, adding a new one that brings us to HelloPage.xaml
://if (!rootFrame.Navigate(typeof(GroupedItemsPage), "AllGroups")) if (!rootFrame.Navigate(typeof(HelloPage)))
We created an application from the Grid Application template, which does a lot of work for us, creating an app that allows us to navigate through a hierarchy of groups and group items. We can explore them in the touch-ready Windows Store app GridView
(the Windows Store app control that displays a grid of data items) and from there we can go to the group view and the item view, where we can navigate to other items.
If we look at the structure that has been created for us by the project template, we have the typical Properties and References sections of a Visual Studio .NET project. The App.xaml
file is the entry point to our application and has the same meaning and overall structure as the same file on Silverlight, WPF, or Windows Phone projects containing defined or referenced global resources. When the application starts, it creates a frame-based navigation system, similar to that of the Windows Phone, and navigates to our first page, in our case, HelloPage.xaml.
To move between pages, the code behind App.xaml
creates a frame and adds it as the application's main content. The navigation actions just change the page contained by the frame, and the navigation stack is maintained for us so we can go forward and navigate back automatically. The following diagram explains it clearly:
So, we can navigate to a particular page with the following instruction:
this.Frame.Navigate(typeof(GroupedItemsPage), "AllGroups");
The previous instruction indicates the page we want to navigate to and the navigation parameter. Additionally we can navigate back with the following instruction:
if (this.Frame.CanGoBack) { this.Frame.GoBack(); }
Note that the CanGoback
check is not obligatory, but not doing so can throw an exception.
We have also specified the application's capabilities through the Package.appxmanifest
designer.
We added a basic page of type LayoutAwarePage
, which provides layout awareness, that is, this page is now able to detect changes in how it is viewed. This can be either portrait, landscape, snapped, or filled. Being the two last ones (snapped and filled) special views of the application provided by the Windows Store App design style that our application is expected to support.
On our basic page, we deleted a resource so the page could get the app.xaml
file predefined. The AppName
resource added a grid with some layout and two controls to it, TextBlock and Button. Then we adjusted their layout and properties to change the default application behavior with the click event of the start button. We finally changed the default code of the App.xaml.cs OnLaunched
method to navigate to our new page instead of the previous GroupedItemsPage
location.
Moreover, we have been doing several tasks in various ways with Visual Studio 2012 so now we should be more familiar with it.
Other options to create our Windows Store app would be to create a blank application or a split application. The blank application creates an extremely basic application structure for us to fill. The split application shows information in a master-detail way, showing the master information on one half of the screen and the details on the other half.
There are also the classic Class Library and Unit Test Library templates.
We have built this first project as a grid application as we will use it for further recipes, adding more features to it so that it becomes a fully compliant Windows Store app style application.
With this recipe, we have also created an application and extended it with a first page and made it compliant with the Windows Store app style design and principles, providing a clean and open layout that minimizes distractions, with enough breathing room and a clear information hierarchy founded on a clean typography.