Hands on: building an app for Windows 8 Metro

How difficult is it to build an app for the Windows Runtime (WinRT), which powers Metro-style apps in Windows 8?

Here is how I created a simple calculator app (this is one in an occasional series) using Visual Studio 11 beta. I started with a new Visual C# Windows Metro Style project, choosing a blank template.

image

A slight complication is that you are prompted to install a Developer License, which means logging into your Windows Live account.

image

Next, I had to layout the controls. Visual Studio creates a single-page app with a main page called BlankPage.xaml. I renamed this to Calc.xaml. I also used Visual Studio’s refactor menu to rename the page class from BlankPage to Calc.

image

The default application has a black background, which seems gloomy. I changed the Background of the container grid to white.

My basic calculator design is based on six rows and four columns, so I added 6 RowDefinitions and 4 ColumnDefinition to the XAML grid. The units for RowDefinitions and ColumnDefinitions can be set to Auto, Pixel or Star. Star means the unit is a weight which is calculated at runtime. For example, if you set the value of one RowDefinition.Height to 2 and the others to 1, the first one would be twice as high as the others. Here is my basic grid:

image

Next, I placed controls in the grid. The easiest way to get them to fill the space neatly is to set their HorizontalAlignment and VerticalAlignment properties to Stretch. Then you control the margin round the control with the Margin property. You can have a control fill more than one cell by using the Grid.ColumnSpan and Grid.RowSpan properties.

I found it easier to add the controls in code using copy and paste.

Page 1 of 3 | Next page

Related posts:

  1. Windows Phone, Windows 8, and Metro Metro Metro feature in Microsoft’s last keynote at CES
  2. Run Metro apps in a window on Windows 8
  3. Hands on: Building a PhoneGap app with Dreamweaver CS 5.5
  4. Building Windows – when Microsoft shows its hand
  5. Infragistics: upbeat on Windows Phone but also building for Apple iOS, Google Android