Windows Phone 7 Quick Tutorials: Part 1 – Hello World

Developing applications for the Windows Phone 7 is possible either in Silverlight or XNA. This series of articles is about developing with Silverlight.
In this article I will show how to write a simple, classic “Hello World” application.

Tools

Before you start writing applications for WP7 you’ll need the WP7 Developer Tools. They are available to download for free here. The following will be installed:

  • Visual Studio 2010 Express for Windows Phone
  • Express Blend 4 for Windows Phone
  • Silverlight for Windows Phone 7
  • XNA Game Studio for Windows Phone 7
  • Windows Phone Emulator
  • Phone Registration Tool

Of course, if you already have VS 2010 the setup will only add the necessary support to developer for WP7 to your IDE.

Read more about the tools on Scott Guthrie’s blog.

Note: Making the application available to the marketplace is another story and will not be discussed in this series.

Create a Simple Windows Phone Application

Having installed the WP7 Developer Tools you are ready to start writing WP7 applications. If you open Visual Studio 2010 you’ll see several templates under the category “Silverlight for Windows Phone”. The one we’ll use in this article is the first one, simply called “Windows Phone Application”. We’ll call this first application WP7HelloWorld. This application will display a list of available languages and when selecting one language, the application will greet us with “hello world” in that language.

the application will greet us with

The wizard will create a project that looks like this:

wizard will create a project

There are two XAML files, one App.xaml for the Application class, and the other MainPage.xaml for the main page of your application. In addition there are several images including an application icon (though all of them are PNGs). If you open the MainPage.xaml you’ll see an image of the page in the design pane.

open the MainPage.xaml you'll see an image of the page in the design pane

The XAML code of the page is listed below.

<phone:PhoneApplicationPage
    x_Class="WP7HelloWorld.MainPage"
    
    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">

    <!--LayoutRoot is the root grid where all 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="12,17,0,28">
            <TextBlock x_Name="ApplicationTitle" Text="MY APPLICATION" 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"></Grid>
    </Grid>

    <!--Sample code showing usage of ApplicationBar-->
    <!--<phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1"/>
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/>
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem Text="MenuItem 1"/>
                <shell:ApplicationBarMenuItem Text="MenuItem 2"/>
            </shell:ApplicationBar.MenuItems>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>-->

</phone:PhoneApplicationPage>

You can see the code is defining the following:

  • The root element is an PhoneApplicationPage control
  • The page content is placed into a grid, called by default LayoutRoot; this grid has two rows one for the title and one for the content
  • A stack panel with two text blocks, for the application and page title; these stack represents the title panel.
  • A grid, by default called ContentPanel, where you can place additional content
  • An ApplicationBar control, which is commented out by default

The content of the page can be customized to your needs, but this is the default the wizard creates for you.

Adding Content to the Main Page

The application will have the title “hello world” and the page title “greetings”. The content area will be represented by a list whose items will be various languages. When the user will click on an item, the page title will display the text “hello world” in that language.

So the first step is to define a list. The XAML code of the MainPage will change to:

<Grid x_Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <ListBox x_Name="LanguageList"
                Grid.Row="0"
                SelectionChanged="LanguageList_SelectionChanged">
    </ListBox>
</Grid>

The translations for the “hello world” text are stored in a dictionary, whose key is the language (if I got the translations wrongs, it’s Google Translator’s fault). When the user selects a new item, handler LanguageList_SelectionChanged is called and the page title is updated.

public partial class MainPage : PhoneApplicationPage
{
    Dictionary<string, string> greetings;

    // Constructor
    public MainPage()
    {
        InitializeComponent();

        greetings = new Dictionary<string, string>();
        greetings["English"] = "Hello world";
        greetings["French"] = "Bonjour tout le monde";
        greetings["German"] = "Hallo Welt";
        greetings["Spanish"] = "Hola mundo";
        greetings["Portuguese"] = "OlC! mundo";
        greetings["Italian"] = "Ciao a tuti";
        greetings["Romanian"] = "Salutare lume";

        LanguageList.ItemsSource = greetings.Keys;
    }

    private void LanguageList_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        PageTitle.Text = greetings[LanguageList.SelectedItem as string];
    }
}

Related Articles

More by Author

Must Read