Creating a Silverlight Application for Windows Phone 7

Introduction

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



Creating a Silverlight Application for Windows Phone 7

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.

[MainPage_with_Controls_added.png]
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}"/>
           </StackPanel>
   
   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" />
           </Grid>
 

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();
               }
               else
                   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.

Summary

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





About the Author

Vipul Vipul Patel

Vipul Patel is a Software Engineer currently working at Microsoft Corporation, working in the Office Communications Group and has worked in the .NET team earlier in the Base Class libraries and the Debugging and Profiling team. He can be reached at vipul_d_patel@hotmail.com

Comments

  • There are no comments yet. Be the first to comment!

Leave a Comment
  • Your email address will not be published. All fields are required.

Top White Papers and Webcasts

  • On-demand Event Event Date: December 18, 2014 The Internet of Things (IoT) incorporates physical devices into business processes using predictive analytics. While it relies heavily on existing Internet technologies, it differs by including physical devices, specialized protocols, physical analytics, and a unique partner network. To capture the real business value of IoT, the industry must move beyond customized projects to general patterns and platforms. Check out this webcast and join industry experts as …

  • Today's agile organizations pose operations teams with a tremendous challenge: to deploy new releases to production immediately after development and testing is completed. To ensure that applications are deployed successfully, an automatic and transparent process is required. We refer to this process as Zero Touch Deployment™. This white paper reviews two approaches to Zero Touch Deployment--a script-based solution and a release automation platform. The article discusses how each can solve the key …

Most Popular Programming Stories

More for Developers

RSS Feeds