Windows Phone开发（5）第一个SilverLight应用程序

第一， 创建新项目

　　创建 Windows Phone Silverlight 应用程序的第一步是创建新项目。

　　创建新项目的步骤

1. 从 Windows“开始”菜单启动 Microsoft Visual Studio 2010。

2. 通过选择“文件 | 新建项目”菜单命令来创建一个新项目。

3. 将显示“新建项目”窗口。展开 Visual C# 模板，然后选择 Silverlight for Windows Phone 模板。

4. 选择“Windows Phone 应用程序”模板。填写所需的项目“名称”。

   

5. 单击“确定”。将显示 Windows Phone 平台选择窗口。为“目标 Windows Phone 版本”选择 Windows Phone 7.1。

   

6. 单击“确定”。将创建一个新项目并在 Visual Studio 设计器窗口中打开 MainPage.xaml。

第二，页面布局

　　下一步是使用 Visual Studio 设计器对应用程序的控件进行布置。添加控件之后，最终布局将类似于以下屏幕截图。　　

　　  

　　页面布局的XAML代码如下：　　

View Code

 1 <phone:PhoneApplicationPage 
 2     x:Class="MyMiniBroswer.MainPage"
 3     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 4     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 5     xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
 6     xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
 7     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 8     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 9     mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
10     FontFamily="{StaticResource PhoneFontFamilyNormal}"
11     FontSize="{StaticResource PhoneFontSizeNormal}"
12     Foreground="{StaticResource PhoneForegroundBrush}"
13     SupportedOrientations="PortraitOrLandscape" Orientation="Portrait"
14     shell:SystemTray.IsVisible="True">
15 
16     <!--LayoutRoot 是包含所有页面内容的根网格-->
17     <Grid x:Name="LayoutRoot" Background="Transparent">
18         <Grid.RowDefinitions>
19             <RowDefinition Height="Auto"/>
20             <RowDefinition Height="*"/>
21         </Grid.RowDefinitions>
22 
23         <!--TitlePanel 包含应用程序的名称和页标题-->
24         <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
25             <TextBlock x:Name="ApplicationTitle" Text="我的应用程序" Style="{StaticResource PhoneTextNormalStyle}"/>
26             <TextBlock x:Name="PageTitle" Text="我的浏览器" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
27         </StackPanel>
28 
29         <!--ContentPanel - 在此处放置其他内容-->
30         <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0" Height="607" VerticalAlignment="Bottom">
31             <Button Content="Go" HorizontalAlignment="Right" Margin="0,40,0,0" Name="btnGo" VerticalAlignment="Top" Click="btnGo_Click" />
32             <phone:WebBrowser HorizontalAlignment="Stretch" Margin="0,132,0,0" Name="webBrowser1" VerticalAlignment="Stretch" />
33             <TextBox HorizontalAlignment="Stretch" Margin="6,38,89,0" Name="txtUrl" Text="Http://www.xbox.com" VerticalAlignment="Top" />
34         </Grid>
35     </Grid>
36  
37     <!--演示 ApplicationBar 用法的示例代码-->
38     <!--<phone:PhoneApplicationPage.ApplicationBar>
39         <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
40             <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="按钮 1"/>
41             <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="按钮 2"/>
42             <shell:ApplicationBar.MenuItems>
43                 <shell:ApplicationBarMenuItem Text="菜单项 1"/>
44                 <shell:ApplicationBarMenuItem Text="菜单项 2"/>
45             </shell:ApplicationBar.MenuItems>
46         </shell:ApplicationBar>
47     </phone:PhoneApplicationPage.ApplicationBar>-->
48 
49 </phone:PhoneApplicationPage>

需要注意的是：<phone:PhoneApplicationPage 的SupportedOrientations="PortraitOrLandscape"属性是为了支持水平和垂直两个方向的显示，TextBox控件和WebBrowser控件设置的 HorizontalAlignment="Stretch" 和VerticalAlignment="Stretch" 属性，这些设置允许控件在横向和纵向模式下正确地自行调整其位置。

第三，添加后天代码
　　该步骤将添加用来实现“Go”按钮的代码。双击已添加的“Go”按钮控件以添加按钮单击事件的事件处理程序。代码如下

View Code

 1 using System;
 2 using System.Collections.Generic;
 3 using System.Linq;
 4 using System.Net;
 5 using System.Windows;
 6 using System.Windows.Controls;
 7 using System.Windows.Documents;
 8 using System.Windows.Input;
 9 using System.Windows.Media;
10 using System.Windows.Media.Animation;
11 using System.Windows.Shapes;
12 using Microsoft.Phone.Controls;
13 
14 namespace MyMiniBroswer
15 {
16     public partial class MainPage : PhoneApplicationPage
17     {
18         // 构造函数
19         public MainPage()
20         {
21             InitializeComponent();
22         }
23 
24         /// <summary>
25         /// btnGo的单击事件处理函数
26         /// 该代码将获取在文本框中输入的 URL 并导航到 webBrowser1 控件中的该页面。
27         /// </summary>
28         /// <param name="sender"></param>
29         /// <param name="e"></param>
30         private void btnGo_Click(object sender, RoutedEventArgs e)
31         {
32             string url = txtUrl.Text;
33             webBrowser1.Navigate(new Uri(url, UriKind.Absolute));
34         }
35     }
36 }

第四，调试

　　首先选择部署目标，如果没有真机的话，在标准工具栏上，将应用程序的部署目标设置为“Windows Phone 模拟器”。　　

　　

　　点调试按钮或者按F5启动调试。如果你和我的机器的CPU和内存配置不高的话，可能要等的时间会比较长。

　　应用程序最终效果如下图：