Creating Hello World Silverlight Application in Windows Phone 7

Introduction

In this article we are going to see how to create a Silverlight Windows Phone 7 Application using the Visual Studio IDE. In our earlier article we have seen the software and the hardware requirement in order to start develop a windows phone application. Here in this article we will create a Hello World Application and try to run it in the Windows Phone 7 Emulator to check the working model of the application. Let us jump start to see the step by step process on how to design the application using the Visual Studio 2010 IDE.

Steps

As we discussed in our earlier article, after installing the Windows Phone 7 SDK, we can see the new template options available with the Visual Studio 2010. The new templates are one for creating Silverlight for Windows Phone Application and other one is for XNA Game Studio 4.0  which will help us to develop respective applications as per the requirement as shown in the screen below.

In this series we are going to concentrate more on the Silverlight for Windows Phone application development for the enterprise and commercial application builders. Also we will see how to create a XNA Game studio application as well so that it will give some idea on the difference between selecting the appropriate project. Let us create a Silverlight for Windows Phone 7 Hello world application, to start with first select the Windows Phone Application and provide the decent name to the project as shown in the screen below.

Clicking on OK will create the application, we can see a popup window asking to select the version of the Windows Phone 7 OS. We will go with selecting the latest platform, Windows Phone OS 7.1 as shown in the screen below.

Clicking on OK will open the project in Visual Studio 2010 IDE, we can see the windows phone 7 interface designer view and the XAML code view as shown in the screen below.

Now drag and drop the controls from the toolbox to get some user input and show output Hello World. Also alternatively we can write the XAML code to get the controls based on the requirement. Once we have the controls on to the designer our screen looks like below.

The XAML code for the above design is given in the below code block to get fair idea on the type of control used and the properties assigned for each control to get a better user interface. Just we can copy and paste this below XAML code on to any Windows Phone 7 Page to get this design. Here we have added 4 Text block, 2 text box for inputs and a button control to trigger some event. Also if you have noticed we have the header with message F5DEBUG APPLICATION in upper case which is the standard we should consider while developing our application.

XAML Code

<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="F5DEBUG APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
        <TextBlock x:Name="PageTitle" Text="F5Debug" 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">
        <TextBlock Height="30" HorizontalAlignment="Left" Margin="25,106,0,0" Name="textBlock1" Text="First Name" VerticalAlignment="Top" />
        <TextBox Height="72" HorizontalAlignment="Left" Margin="140,84,0,0" Name="textBox1" Text="" VerticalAlignment="Top" Width="310" />
        <TextBlock Height="30" HorizontalAlignment="Left" Margin="25,167,0,0" Name="textBlock2" Text="Last Name" VerticalAlignment="Top" />
        <TextBox Height="72" HorizontalAlignment="Left" Margin="140,145,0,0" Name="textBox2" Text="" VerticalAlignment="Top" Width="310" />
        <Button Content="Button" Height="72" HorizontalAlignment="Left" Margin="39,241,0,0" Name="SUBMIT" VerticalAlignment="Top" Width="377"
Click="SUBMIT_Click" />
        <TextBlock Height="51" HorizontalAlignment="Left" Margin="25,354,0,0" Name="textBlock3" Text="" VerticalAlignment="Top" Width="413" />
        <TextBlock Height="50" HorizontalAlignment="Left" Margin="159,28,0,0" Name="textBlock4" Text="HELLO WORLD" VerticalAlignment="Top" 
Width="173" />
</Grid>
</Grid>

Now we are done with the design, now go to the code behind Submit button Event and write the below code which get the user input from the 2 text boxes (First Name and Last Name ) to provide a welcome message to the user as shown in the code behind.

C# Code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;
namespace F5debugWp7HelloWorld
{
    public partial class MainPage : PhoneApplicationPage
    {
        // Constructor
        public MainPage()
        {
            InitializeComponent();
        }
        private void SUBMIT_Click(object sender, RoutedEventArgs e)
        {
            string strFname = textBox1.Text.ToString();
            string strLname = textBox2.Text.ToString();
            textBlock3.Text = &quot; Welcome & quot; +strFname.ToString() + &quot; &quot; +strLname.ToString();
        }
    }
}

Now build the application and execute the project to check the output by pressing F5 from the keyboard directly or by pressing the play button from the IDE tool bar and we can see the output in the Windows Phone 7 Emulator as shown in the screen below.

Note - We need to check if the target to run the application is pointed to Windows Phone Emulator and not Windows Phone Device.

Now we can enter the test inputs and click on Submit button to get the welcome message as shown in the screen below.

Conclusion

So in this article we have seen how to create a Hello world application in Windows Phone 7 application for Silverlight and we also seen how to use the controls with the designer.