WP7 getting started (2) – A simple application

This is the second in a series of blog posts describing how to get started with Windows Phone 7 development. It is written based on my own experience getting started with Windows Phone 7 development.

The previous entry about installing the tools is available here.

 Idea for an app

The app I’d like to create is a simple tool, that one might use if one was conducting a course on, say, Windows Phone development.

The idea is that as people leave the room, the can indicate if they were satisfied with the presentation they just witnessed by simple pressing a red or green smiley on the screen of a phone, held by a person in the doorway.

The user interface would look something like this drawing:

Below each smiley is a number indicating how many people pressed each smiley.

Creating the UI

Unless you are creating games using XNA, you will be creating your userinterface using XAML. If you do not know XAML, then this is a good introduction to XAML on Windows Phone.

The following is the definition of the UI:



The top half of the screen is a graphical editor, while the botttom half is the XAML editor.

The UI of this application consists of three buttons filling the entire screen. Each button has a smiley (a character from the windings character set) and a count.

The buttons are arranged using a StackPanel with orientation=Horizontal, so they line up next to each other.

Below is shown the complete XAML code for this application:

    mc:Ignorable="d" d:DesignWidth="728" d:DesignHeight="480"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Landscape" Orientation="Landscape"

    <StackPanel x:Name="TitlePanel" Margin="0,0,0,0" Background="Black" Orientation="Horizontal" >
        <Button Name="btnHappy" Background="Green" BorderBrush="{x:Null}" Padding="0" Width="242" Tap="btnHappy_Tap">
            <StackPanel OpacityMask="Black">
                <TextBlock Text="J" FontFamily="Wingdings" FontSize="200" />
                <TextBlock Name="txtHappyCount" TextAlignment="Center" />
        <Button Name="btnNeither"  Background="Orange" BorderBrush="{x:Null}" Padding="0" Width="242" Tap="btnNeither_Tap">
            <StackPanel OpacityMask="Black">
                <TextBlock Text="K" FontFamily="Wingdings" FontSize="200" />
                <TextBlock Name="txtNeitherCount" TextAlignment="Center" />
        <Button Name="btnSad" Background="Red" BorderBrush="{x:Null}" Padding="0" Width="242" Tap="btnSad_Tap">
            <StackPanel OpacityMask="Black">
                <TextBlock Text="L" FontFamily="Wingdings" FontSize="200" />
                <TextBlock Name="txtSadCount" TextAlignment="Center" />

The <phone:PhoneApplicationPage> part of the xaml is standard for a page in a Windows Phone application.

Coding the functionality

During initialization, the  counters on the UI should be initialized to 0.

When you click on a button, the Tap event occurs and the method defined on each button is called. The Tap method will increment the tap counter and update the UI. The complete code looks like this:

(If you’re annoyed by the fact that I’ve only posted a picture of the code, so you cant copy/paste it: It is intentional. I’d like to force you to do a little bit of coding yourself :-)

Testing the finished app

Finally, press F5, press the buttons and verify that the counters works like they should.


The emulator starts with the phone in portrait mode, but you can turn it using the button on the toolbar in the top-right corner:

You might also notice the strange numbers in the top of the screen:

These numbers are performance metrics that would come in handy if you were a game developer. For now, you can just ignore them. They only show up, when the emulator is in debug mode.

That really is all there is to it!

This Post Has 2 Comments

  1. Nice post.Thanks For Sharing.Its Nice to have WINDOWS PHONE 7 DEVELOPMENT is primarily focused on the consumer market rather than the enterprise market. Incorporated with its unique tiles based User Interface (UI),WINDOWS PHONE 7 DEVELOPMENT moves a step ahead from traditional concept of icons.

Leave a Reply