Hello World Application in Windows Phone 7

Download HelloWorldApp.zip - 69.94 KB

Introduction

Let's create a simple Hello World application for Windows Phone 7 and then dissect it.

Background

First, go and grab the Windows Phone SDK 7.1 from here:- App Hub.

It is a free download and provides you all the tools that you need to develop applications and games for Windows Phone 7 devices. After installing it, open Visual Studio 2010 Express for Windows Phone.

Creating the Project

From the Start Page, select New Project. This can also be done by choosing New Project from the File menu or by using the shortcut key combination: Ctrl+Shift+N.

A New Project dialog is brought up as shown below.

From the Installed Templates, choose Silverlight for Windows Phone and then select the Windows Phone Application template. Type in the name of the application: HelloWorldApp. Browse to the folder you want the project to be stored in, and then click OK.

This displays a prompt as shown below. Since, we want to develop for the latest version, i.e., Windows Phone 7.1 OS codenamed "Mango", so go ahead and click OK.

Your screen should look like the one below. It consists of the design view and the code view of your application.

Creating the Application

Now, bring up the Toolbox. To do this, select Other Windows from the View menu and then select Toolbox. This contains a list of the controls that can be used in your application.

Click and drag the Button control into the design area.

You can drag the button to any location in the design view. Position it in the center of the screen.

Next, let's change the text of the button. Select the Content attribute from the Properties Window and change it to "Click Me!"(without the double quotes). Then hit Enter and you will see the change reflected on the button.

Similarly, add a Textblock control just below the button, and then delete its Text content from the Properties Window. The Textblock now turns into an empty rectangle.

Now, double click on the Button control in the design pane. This will open up another file called MainPage.xaml.cs which will contain the main logic behind your application. Note that, a button click event handler has been automatically created for you.

You just need to add a line of code in the method, so that it looks like this:

private void button1_Click(object sender, RoutedEventArgs e)
{
    textBlock1.Text = "Hello World!!!";       //line to be added
} 

Also, don't forget to change the application name, by selecting the Title and then changing its Text property to HELLO WORLD APP just as you had done for the Textblock.

Voila! Your app is ready. Click on the green arrow as shown above or Hit F5 to start your application.

This builds your application, creating a xap file. If you had done everything as instructed above, then you would not see any error. The Windows Phone emulator will start up automatically and then the package will be deployed to it. Your application should start up automatically. Click on the "Click Me!" button and you will see the message as shown below.

How easy was it, huh???

The Dissection

Now, let's go behind the scenes to see what exactly happened when you created your first project.

The Solution Explorer

After loading the project in Visual Studio, examine the Solution Explorer window. You will find many files that the IDE has created for you. We will examine them one by one.

The App.xaml and MainPage.xaml files are Extensible Application Markup Language (XAML) files whereas the App.xaml.cs and MainPage.xaml.cs are C# code files. The two code files are actually "code-behind" files associated with the two XAML files. They provide code in support of the markup. We will examine these in detail a little later.

The other files are images that are used by the application. The ApplicationIcon.png is the icon image that represents your application in the phone's application list. The Background.png is the tile image of your application. This appears when you pin the app to the Start screen. The last image is SplashScreenImage.jpg which appears for a brief moment when you start the application, during which it loads content into memory.

The References section contains a list of libraries(assemblies) that provide services and functionality that the application requires to work. The Properties section contains three files:-

• AppManifest.xml is an application manifest file required to generate the application package.

• AssemblyInfo.cs contains the name and version metadata that is embedded into the generated assembly.

• WMAppManifest.xml is a manifest file that includes specific metadata related to a Windows Phone Silverlight application.

App.xaml and App.xaml.cs

Now, open the App.xaml.cs file. You will see a namespace definition that is the same as the project name and a class named App that derives from the Silverlight class Application. All Silverlight programs contain an App class that derives from Application. This is where operations like application-wide initialization, startup and shutdown are performed.

namespace HelloWorldApp
{
    public partial class App : Application
    {
        public PhoneApplicationFrame RootFrame { get; private set; }

        public App()
        {
            ...
        }
        ...
    }
}  

Next, look at App.xaml. You will recognize it as XML, but more precisely it is a XAML file. You should use this file for storing resources such as color schemes, gradient brushes and styles that are used throughout the application. Notice that the root element is Application, which is the same Silverlight class that we came across earlier. It contains four XML namespace declarations ('xmlns').

<Application 
    x:Class="HelloWorldApp.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"       
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone">
    ...
</Application> 

The first XML namespace declaration is the standard namespace for Silverlight which helps the compiler locate and identify Silverlight classes such as Application itself. The second XML namespace declaration is associated with XAML itself. This allows the file to reference some elements and attributes that are a part of XAML rather than specifically Silverlight. The prefix 'x' refers to XAML. The last two are unique to the phone.

The App.xaml and App.xaml.cs files really define two halves of the same App class. During compilation, Visual Studio parses App.xaml and generates another code file App.g.cs. This generated file contains another partial definition of the App class. It contains a method named InitializeComponent that is called from the constructor in the App.xaml.cs file.

So, when the application is run, the App class creates an object of type PhoneApplicationFrame and sets that object to its own RootVisual property. This frame is 480 pixels wide and 800 pixels tall and occupies the entire display surface of the phone. The PhoneApplicationFrame object then navigates to an object called MainPage(kinda like a browser).

MainPage.xaml and MainPage.xaml.cs

Now, examine MainPage.xaml.cs. It contains many using directives. The ones beginning with System.Windows are for the Silverlight classes. The Microsoft.Phone.Controls namespace contains extensions to Silverlight for the phone. The partial class named MainPage derives from the Silverlight class PhoneApplicationPage. This is the class that defines the visuals that you actually see on the screen when you run the application.

namespace HelloWorldApp
{
    public partial class MainPage : PhoneApplicationPage
    {
        public MainPage()
        {
            InitializeComponent();
        }
        ...
    }
}  

Open the MainPage.xaml file. The first four XML namespace declarations are the same as in App.xaml. The 'd'(designer) and 'mc'(markup compatibility) namespace declarations are for the benefit of XAML design programs. The compilation of the program also generates another file named MainPage.g.cs that contains another partial class definition for MainPage with the InitializeComponent method called from the constructor in MainPage.xaml.cs.

<phone:PhoneApplicationPage 
    x:Class="HelloWorldApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True">

    <Grid x:Name="LayoutRoot" Background="Transparent">
        ...
    </Grid>
</phone:PhoneApplicationPage> 

You will also see settings in MainPage.xaml for FontFamily, FontSize and Foreground that apply to the whole page. The body of the MainPage.xaml file contains several nested elements named Grid, StackPanel and TextBlock in a parent-child hierarchy.

Our simple application has only one page, called MainPage. This MainPage contains a Grid, which contains a StackPanel(named 'TitlePanel') with a couple of TextBlock elements, and another Grid(named 'ContentPanel'). The two textblocks are for the application title and the page title.

<Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="HELLO WORLD APP" 
                       Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0" 
                       Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Button Content="Click Me!" Height="72" HorizontalAlignment="Left" 
                    Margin="146,143,0,0" Name="button1" VerticalAlignment="Top" 
                    Width="160" Click="button1_Click" />
            <TextBlock Height="59" HorizontalAlignment="Left" Margin="146,287,0,0" 
                       Name="textBlock1" Text="" VerticalAlignment="Top" Width="160" />
        </Grid>
</Grid> 

When you dragged a Button control and a TextBlock control from the Toolbox onto the design area, Visual Studio automatically added the appropriate lines in this file. The properties of these controls can be modified in the XAML itself. So, you could have set the Content property of the Button to 'Click Me!' here, instead of going to the Properties window.

Next, when you double-clicked on the button, you, or rather, Visual Studio created a click event handler for the button and redirected you to the C# code file, right into the method. There you just wrote one line that modified the text property of the TextBlock.

On pressing F5, Visual Studio checked your project for errors, compiled it and then built the whole application into a xap file which is essentially a zip file containing all the assets that your program needs to run on a Windows Phone device/emulator.