Creating a Silverlight Application for Windows Phone 7

by Vipul Vipul Patel

Windows Phone 7 architecture allows developers to choose between two different frameworks for application development. In this article, we see how easy it is to create a Silverlight based application for the Windows Phone 7 platform.


With Windows Phone 7 now hitting the shelves, there will be a rush of developers heading out with the developer tools to make the next "Angry Birds" or the Netflix app. As we say in an earlier article, Microsoft has done a great job of providing a great set of developer tools to work on to build applications for the Windows Phone at the right price, free. Yes, you heard it right, free. The developer tools are free and you can see all the details on how to get started in an earlier article (point a link to that "Getting started with windows phone developer tools article here) Windows Phone architecture allows developers to choose between 2 different frameworks for making applications/games for the Windows Phone. In this article we will focus on using the Silverlight framework for making Windows Phone applications.

Why Silverlight?

A fair question to ask is why use the Silverlight framework to make applications on the Windows Phone.

Silverlight, often called a Flash compete offering from Microsoft, has provided web developers the ability to make rich internet applications. For programs which require application-logic or are utilities, you will want to use Silverlight. A complete scenario analysis on which framework to select for your Windows Phone application is provided in the article linked above.

Getting Started with Silverlight Projects in Microsoft Visual Studio

After you are done installing the developer tools for Windows Phone, you can fire up Visual Studio Express for Windows Phone or if you have Visual Studio 2010 Pro SKUs already installed, you can launch that and choose File -> New -> Project and select Silverlight for Windows Phone 7 from the template types.

select Silverlight for Windows Phone 7 from the template types
Figure 1

Here you will notice a bunch of templates. Depending on the type of application, you can choose the most appropriate template for the job.

WP7 - Choose the most appropriate template for the job

For our demo, we will choose the basic "Windows Phone Application" template. Let's name our Project WindowsPhoneApplicationDemo and press Enter to create the project.

Once we click Enter, the IDE goes into actions and creates a bunch of files - Appl.xaml, MainPage.xaml and other image files ApplicationIcon.png, Background.png and SplashScreenImage.jpg.

Let us look at what these files are:

Created Files from template

To see the Designer view, right click on MainPage.xaml and click View Designer (if the designer is not already available). Here you should be able to see the Designer as well as the code behind.

two TextBox controls and one Button control
Figure 2

For our application, we plan to create a simple calculator, which will convert temperature between Degrees and Fahrenheit. To get started, Click Ctrl + Alt + X to pop the ControlBox, and drag and drop two TextBlock controls, two TextBox controls and one Button control onto the designer as show below.

Figure 3

Now, let us start customizing our app.

Locate the following snippet in MainPage.xaml.cs and change the Text field of ApplicationTitle to "My cool convertor" and Text field of PageTitle to "Let's rock WP7".

   <!--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}"/>
   Also change the following snippet in MainPage.xaml.cs as highlighted.
   <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
               <TextBlock Height="30" HorizontalAlignment="Left" Margin="29,71,0,0" Name="textBlock1" Text="Degrees" VerticalAlignment="Top" />
               <TextBox Height="72" HorizontalAlignment="Left" Margin="162,54,0,0" Name="textBox1" Text="0" VerticalAlignment="Top" Width="245"></TextBox>
               <TextBlock Height="30" HorizontalAlignment="Left" Margin="29,177,0,0" Name="textBlock2" Text="Fahrenheit" VerticalAlignment="Top" />
               <TextBox Height="72" HorizontalAlignment="Left" Margin="162,162,0,0" Name="textBox2" Text="0" VerticalAlignment="Top" Width="245" />
               <Button Content="Clear" Height="72" HorizontalAlignment="Left" Margin="139,320,0,0" Name="button1" VerticalAlignment="Top" Width="160" />

Click on the Textbox next to the Degrees TextBlock and Click Properties and Double click on the TextChanged Event to automatically create a new event textBox1_TextChanged. Here we will add code to convert the value currently entered to be converted to Fahrenheit in the textbox next to the Fahrenheit textblock.

   private void textBox1_TextChanged(object sender, TextChangedEventArgs e)
               if (int.TryParse(textBox1.Text, out degrees))
                   fahrenheit = 9 / 5.0 * degrees + 32;
                   textBox2.Text = fahrenheit.ToString();
                   textBox1.Text = "0";

Compile the Application by going to the Build menu and choosing Build Solution. Fix any errors you find here resulting from typos. Press F5 to start debugging. One thing to note: The first time you launch the debugging session, the experience will be slow. This is because the Windows Phone Emulator is getting loaded. Our advice is not close the emulator when you are done debugging. Rather, click Debug->Stop Debugging when you complete your debugging session. This will ensure your subsequent debugging sessions load up faster. When you launch the debugger, you will notice your application will show up on the emulator.

Click on the textbox next to degrees to start typing your temperature in degrees.

As you start typing you will notice that the textbox next to Fahrenheit textBlock gets automatically updated, almost like the Auto-suggest feature of Google.

Clicking on Clear changes the degree to 0 and the temperature in Fahrenheit changes to 32 (the equivalent of 0 degrees). If you are having trouble creating a project, a sample project is available with the article.


In this article we have seen how simple it is to create a simple Silverlight application for the Windows Phone. In the upcoming articles, I will discuss how to create XNA based applications for the Windows Phone 7.

Related Article

This article was originally published on Monday Nov 29th 2010
Mobile Site | Full Site