Day 2: Building a Metro App with Visual Studio 11 Express

Yesterday I blogged about using my Windows 8 tablet as my main machine for work and device for play. Today I will share my experience in using the device for building a Metro app.

The first application that I ever wrote was 19 years ago for the Timex Sinclair 1000. (I can’t believe that I am that old!) I’ve come a long way now writing for a touch enabled device (but the TS 1000 was about the same size of an iPad.). Keeping with tradition, I will write a simple “Hello World” and see how it goes.

Step 1: Load Visual Studio

Sounds easy, right? Remember this is Windows 8, so we have to tap Visual Studio in the Metro start screen and then wait for it to load in “desktop mode.”  Ok, it was pretty easy. I’m using Visual Studio 11 Express Edition, the one that came with the machine. (I have not downloaded the Ultimate edition yet, I will do so shortly and get back to you.)

Step 2: Create the Project

When you load Visual Studio, you will notice that there are only Metro project templates. I select Visual C# and the most basic type of project an “Application.” This is a blank container for a Metro application.

Step 3: Write Some XAML

I could not seem to open the project in Expression Blend 5 Preview, so I had to code the XAML by hand. I inserted a Button and a TextBlock. I’ll do the classic “Hello World” using a tapped event.

<UserControl x:Class="SuperCoolMetroApp.MainPage" ...> 

 <Grid x:Name="LayoutRoot" Background="Green"> 

 <Button Name="MyButton" Content="Metro
Button" Tapped="Button_Tapped" 

 HorizontalAlignment="Left" VerticalAlignment="Top" 

 Width="166" Margin="338,106,0,0"/>

 <TextBlock Name="MyTextBlock" HorizontalAlignment="Left" 

 TextWrapping="Wrap" FontSize="20" Text="" 

 VerticalAlignment="Top" Margin="535,106,0,0" 

 Height="74" Width="391"/>

 </Grid> 

</UserControl>

Step 4: Write an Event Handler

After fiddling around for a while, I realized I was thinking way too much like a Silverlight/WPF developer and not a Metro developer. I quickly discovered the “Tapped” event and wrote an event handler for it.

//my first C# code for
WinRT!

private void Button_Tapped(object sender,
Windows.UI.Xaml.Input.TappedEventArgs e)

{

 //Hey,
it's a start ;)

    MyTextBlock.Text = "Hello
Touch!";

}

As I looked over the new events and properties, I realize the power of .NET. While I was using something familiar (XAML and C#), I was also using something new (a touch based API). The .NET framework abstracted away the WinRT API for me into something I can deal with and understand. Very quickly I was able to come up to speed with the object model for XAML touch enabled controls. (You can also do checks to see if they are touch enabled and provide a classic “click” event for example.) I think people may pass over this point too quickly, we are finally getting the true promise of the .NET framework: we are using the CLR and C# on top of a NEW platform/API for the first time (unless you are a MONO developer.)

Step 5: Running your App

Time to run the app. I hit F5 and took a video for you to enjoy. Notice that I swipe to get back to the desktop mode after I am done using the application. Cool.

That’s it! In just a few easy steps, I became a device/tablet developer. Try that in Objective-C.