Iris Classon
Iris Classon - In Love with Code

WinRT app guide: Step 3: Creating the basic UI

To read the other steps in the step by step guide for creating a Metr/ WInRT application go here

Finally time to get down to business! On this app we will start with the UI, but before we do that we need to create a new project.

You have to run Windows 8 and Visual Studio 2012 to be able to create a Metro style / Windows 8 style application. I run Windows 8 on a virtual machine.

Create a new project
  1. In Visual STudio 2012 select ‘New Project’ , choose ‘Blank App (XAML)

Create a new project, choose Blank App

Creating the basic view
  1. Add a grid with 3 rows and 3 columns. To follow padding/margin guidelines there should be 140 pixels padding from the top and 120 pixels padding from the left and right to the main content. Use the * in the second row and column for height and width to indicate that it should fill the rest of the page. The third column is used for padding, 120 px, third row sets a 100 px padding.

  2. Add a second grid in the non-padded area (second row and second column, don’t forget that counting starts at 0, so the second row and column is 1 not 2).
    Add 3 columns and set the fraction sizes. Se

Tip! When using the first column or row you don’t have to explicitly set this in the markup as an elemented nested in a grid will always be given Grid.Column=”0” and Grid.Row=”0”

  1. Add a listview to the first column, a button to the second, aligned horizontally centered and vertically at the top, and a flipview in the third column. Add two identical flipviewitems that contain a two-row grid with a Border and textblock in the second row.

  2. Add an appbar at the bottom by using App.BottomAppBar.

The basic layout of the application and the hierarchy of the components

Creating the UI

The layout you should end up with


Leave a comment below, or by email.
8/27/2012 12:38:37 PM
Hi Iris! Nice post! Thank you for the inspiration! 

Last modified on 2012-08-27

comments powered by Disqus