Windows Phone 7 Hello World Application

In this tutorial I am going to create a very simple “Hello World” Windows Phone 7 application (check image bellow). Hopefully, after this lesson you will be skilled enough to develop your own application.

For this tutorial you will need Visual Studio 2010 with Windows Phone Developer Tools installed (including Emulator). You can download those tools from here (or simply search for “Windows Phone Developer Tools”).

After you successfully installed WP7 Developer Tools, it is time to open Visual Studio 2010 for the first time and create a new project.

Creating new project

First of all you need to create a new project. To do so open Visual Studio 2010 -> File -> New Project -> select Windows Phone Application in dialog as it is shown on picture bellow. Other project templates I will cover later.

What are the key files in newly created solution?
Manifest file – contains meta-data of an application. You can find more information about it here.
App.xaml – contains all general resources and properties of Windows Phone 7 Application. It also contains Execution Model events.
MainPage.xaml – this Windows Phone Page is launched by default. You can change the default page by modifying NavigationPage attribute of DefaultTask element in Manifest file.

Modifying XAML

Next you will need to modify MainPage XAML. Basically, you can add new UI elements to XAML using drag-and-drop from Toolbox or by adding them to XAML markup by hand. As for me, I find the second way more appropriate for development (of course, it is also possible to add elements programmatically, using C# managed code). After adding a textblock and a button (this time I’ve used drag-and-drop) my MainPage XAML looked like that:

<phone:PhoneApplicationPage
    x:Class="Lesson1_HelloWorld.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"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    shell:SystemTray.IsVisible="True">
 
    <!--LayoutRoot contains the root grid where all other page content is placed-->
    <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="24,24,0,12">
            <TextBlock x:Name="ApplicationTitle" Text="EUGENEDOTNET.COM" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="my first app" Margin="-3,-8,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>
 
        <!--ContentPanel - place additional content here-->
        <Grid x:Name="LayoutRoot" Grid.Row="1">
            <TextBlock Height="36" HorizontalAlignment="Left" Margin="113,106,0,0" Name="textBlock1" Text="MyText" VerticalAlignment="Top" Width="156" />
            <Button Content="Say Hello!" Height="70" HorizontalAlignment="Left" Margin="113,180,0,0" Name="button1" VerticalAlignment="Top" Width="179" Click="button1_Click" />
        </Grid>
    </Grid>
</phone:PhoneApplicationPage>

Handling events in code

As some of you have probably noticed I’ve added a click event for my button control. Now I need to add an event handler for that in code (MainPage.xaml.cs). Clicking the button on MainPage will fill textblock with “Hello World!” string. Check code bellow:

public partial class MainPage : PhoneApplicationPage
{
    // Constructor
    public MainPage()
    {
        InitializeComponent();
    }
 
    private void button1_Click(object sender, RoutedEventArgs e)
    {
        textBlock1.Text = "Hello World!";
    }
}

Running the application

That’s it. Our first Windows Phone 7 application is ready. Just press F5 to run the application in Debug mode. Make sure that “Windows Phone 7 Emulator” is selected as a target for Silverlight for Windows Phone projects.

P.S.
My previous “Hello world” webcast (Spring, 2010). I am still keeping this memory of mine alive