Use Silverlight for development in Windows Phone 7

Preface

Windows Phone 7 is now available, and some radical developers are using some developer tools to create a new generation of "Angry Birds" or Netflix applications. As we mentioned in previous articles, Microsoft provides a free developer tool to help developers create Windows Phone applications. The Windows Phone architecture allows developers to choose two different frameworks to create Windows Phone applications/games. In this article, we mainly focus on using the Silverlight framework to create a Windows Phone application.

Why is Silverlight used?

We can't help but ask: why should we use the Silverlight framework to create a Windows Phone application?

Silverlight (we generally think that Silverlight is a direct competitor of Flash) allows Web developers to create rich Internet applications. For programs that require good application logic or practicality, you certainly prefer Silverlight.

Getting started with the Silverlight project in Microsoft Visual Studio

After you install the Windows Phone developer tool, you can directly run Visual Studio Express for Windows Phone. Alternatively, if you have installed Visual Studio 2010 Pro SKUs, you can run Visual Studio 2010 Pro SKUs and select "File"> "New"> "Project ", then select "Silverlight for Windows Phone 7" from the template type ".

Figure 1 select Silverlight for Windows Phone 7

These are some templates you need to know. Depending on the specific application type, you can select the most appropriate template.

For our Demo, We will select the basic "Windows Phone Application" template. Name our project as "WindowsPhoneApplicationDemo" and press "Enter" to create this project.

If we press the "Enter" Key, IDE (Integrated development environment) will perform a series of operations and create a large push file-Appl. xaml, MainPage. xaml and other image files ApplicationIcon.png, Background.png and SplashScreenImage.jpg.

Let's see what these files are:

To View the Designer View, right-click MainPage. xaml and click "View Designer" (if the Designer is unavailable ). This is the designer's appearance and background code:

Figure 2 designer View

For our application, we plan to create a simple calculator that allows users to convert between Celsius and Fahrenheit. To start this operation, press Ctrl + Alt + X to bring up the ControlBox, and then place the two TextBlock controls and the two TextBox controls, drag and Drop a "Button" control to the designer, as shown in:

Figure 3 corresponding controls

Now, let's start customizing our applications.

In MainPage. xaml. find the following code segment in cs, and change the "Text" attribute of "ApplicationTitle" to "My cool convertor ", change the "Text" attribute 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 the TextBox next to the "Degrees" TextBlock, click "Properties", and double-click the "TextChanged" event to automatically create a new event: "textBox1_TextChanged ". To convert the input value to the Fahrenheit temperature in the TextBox next to the "Fahrenheit" TextBlock, this code should be added:

 
 

  
  
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";  
  
  
              
  
  
        } 
 
 

You can click the "Build" menu and select "Build Solution" to compile the application. Fix all syntax errors you encounter. Press F5 to start debugging. Note: The first time you start a debugging session, it will be slow. This is because the Windows Phone simulator is loading. We recommend that you do not disable the simulator after debugging. Instead of clicking "Debug"> "Stop Debugging" when you complete the Debugging session ". This ensures that the debugging session load will be faster in the future. When you start the debugger, you will find that your application has been displayed on the simulator.

To start entering the Celsius temperature, click the TextBox next to "Degrees.

When you start typing, you will find that the TextBox next to the "Fahrenheit" TextBlock is automatically updated, which is similar to Google's automatic prompt function.

Click "Clear" to change the Celsius temperature to 0 and the Fahrenheit temperature to 32 (equal to 0 degree Celsius ). If you have trouble creating a project, you can use the sample project in this article.

Summary

In this article, we can see how simple it is to create a simple Silverlight application for Windows Phone. In future articles, I will discuss how to create an XNA-based application for Windows Phone 7.

(This article is reproduced from 51cto, translator Zhou Xuefeng)