Aug 272012
 
 August 27, 2012  Posted by at 12:36 pm WinRT Tagged with: , , , ,  Add comments

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”

3. 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.

4. 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

  2 Responses to “WinRT app guide: Step 3: Creating the basic UI”

  1. Hi Iris! Nice post! Thank you for the inspiration!

  2. […] For this task I’ve chosen to use Visual Studio Express 2012 for Windows 8…”WinRT app guide: Step 3: Creating the basic UI (Iris Classon)“Finally time to get down to business! On this app we will start with the UI, […]

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(required)

(required)

What is 15 + 10 ?
Please leave these two fields as-is:
IMPORTANT! To be able to proceed, you need to solve the following simple math (so we know that you are a human) :-)