Select the Menu option from File | New Project (or press Ctrl + Shift + N).

In the New Project window, we will select Visual C# from Installed | Templates. Then select the Windows Store app style and finally the Grid App (XAML) template. We will give it a proper name such as OurFirstMetroApp, and location, and click on the OK button.

Next, Visual Studio will create the project for us.

We will build the solution from the menu option Build | Build Solution (or press F7) and then debug it from the menu option Debug | Start Debugging (we can also press F5 or click on the play icon on the actions bar). If everything is working properly, we should get the following output:

Now, we can scroll horizontally, click (or touch if we have a tactile screen) on a group title to open the group view, and click on an item title to open the item view. In the item view, we have buttons at the edges of the screen to navigate through the group items.

We will go back to the Windows 8 desktop mode, then to Visual Studio 2012 and stop the debugging session (or press Shift + F5).

Next, we will go to Solution Explorer and double-click on the Package.appxmanifest file.

Once the Application Manifest Editor window opens, we will go to the Capabilities tab and uncheck the Internet (client) capability option, as our current application does not need outbound access to the Internet.

To add a new item to the project, on the Visual Studio 2012 Solution Explorer right-click on the project and select Add | New Item… (or Ctrl + Shift + A).

Select the Windows Store app style, and from there select the Basic Page item, name it HelloPage.xaml, and then click on the Add button at the lower-right corner of the window.

Open HelloPage.xaml, expand the design view, and then click on the Unfold button on the section that separates the WYSWIG render view of the XAML from the XAML code. There we will select Fit all at the left-hand side of the screen.

Let's add the finishing touches to our Visual Studio XAML workspace. To do so, we will expand the TOOLBOX and the DOCUMENT OUTLINE panels and pin them.

To use our project-defined name, we will comment the page's 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>

Next, we will add a grid control to the bottom section of the design area by dragging it from the TOOLBOX panel and dropping it just below the title. It will be added inside the first grid and will appear on the DOCUMENT OUTLINE panel following the hierarchy.

We also want it to occupy all the available space on the grid row and column where we created it, so we will right-click on the grid, select Reset Layout, and then select All.

As the grid will handle the body section's layout, we will name it grBody. Select the grid and change the property Name on the Properties panel, or we can change it directly in the DOCUMENT OUTLINE panel.

Next, we will add a row separator to the 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.

We will continue and change the size of the row to a fixed one. Select the row and move the cursor to the left-hand side of the blue zone that defines the row manipulation section. A pop-up menu will appear where we will choose the Pixel option for a fixed bottom row.

Next, we will add a TextBlock control on the top row of the grid that we just divided (adding a row separator creates two rows). We will reset the layout of the TextBlock control as we did previously with the grid.

Next, we will style the TextBlock using a default style by right-clicking on the TextBlock and then selecting the option Edit Style | Apply Resource | PageSubheaderTextStyle.

To finish the TextBlock, we will edit the Text property in the Properties panel by writing This is our First Windows Store App.

We will drag a Button control from TOOLBOX to the lower row of the grid that we added recently. We will change some of its properties in the Properties panel, setting its HorizontalAlignment and VerticalAlignment to Center, its FontSize to 20, its Name to btnStart, and its Content to Start.

Next, we will change its font style property. For this we will click on the box next to the property and select System Resource and then ContentControlThemeFontFamily.

We will double-click on the start button and then the code behind 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");
}

We will open the 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)))

Next, we will save all from the menu or with the Ctrl + Shift + S shortcut.

We will build the solution and debug our first Windows Store app. We should see that our application launches and shows the page we just added.