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
- In Visual STudio 2012 select ‘New Project’ , choose ‘Blank App (XAML)
Create a new project, choose Blank App
Creating the basic view
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.
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”
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.
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
Comments
Leave a comment below, or by email. awsomedevsigner
Last modified on 2012-08-27