Windows Phone 系列 创建第一个 Silverlight 应用程序

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

创建新项目的步骤

1. 确保下载并安装了 Windows Phone SDK。有关更多信息，请参阅安装 Windows Phone SDK。

2. 从 Windows“开始”菜单启动 Visual Studio 2010 Express for Windows Phone。如果显示“注册”窗口，则可以进行注册或暂时关闭该窗口。

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

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

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

   

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

   

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

  添加控件

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

添加应用程序控件的步骤

1. 重命名应用程序窗口标题。在 Visual Studio 设计器中右键单击 MY APPLICATION 文本并选择“属性”。将在右下角显示“属性”窗口。

   

2. 在“文本”属性中，将名称更改为 My First Application。

3. 在设计器中单击“页面名称”文本。将“文本”属性更改为“Mini Browser”。

4. 添加对横向和纵向的支持。单击 XAML 代码的第一行，以便 PhoneApplicationPage 属性显示在“属性”窗口中。将SupportedOrientation 属性更改为 PortraitOrLandscape。

5. 通过选择“查看 | 其他窗口 | 工具箱”菜单命令在 Visual Studio 中打开该工具箱（如果尚未打开）。

6. 从“Windows Phone 控件”中，通过从工具箱拖放到设计器图面上将 TextBox 控件添加到设计器图面。将 TextBox 放置在“Mini Browser”文本的正下方。使用鼠标将该控件的大小调整为上面布局图像中显示的大概宽度。可以保留文本框的默认名称 textBox1。

   在“属性”窗口中，设置 textBox1 的下列属性。

    

   属性	值
   Text	http://www.xbox.com
   Height	Auto
   Width	Auto
   HorizontalAlignment	Stretch
   VerticalAlignment	Top

   这些设置允许控件在横向和纵向模式下正确地自行调整其大小位置。使用鼠标重新确定控件相对于边缘的位置，以便为“Go”按钮留出空间。

7. 将一个“按钮”控件拖放到您刚刚添加的文本框的右侧。将该控件的大小调整为上面图像中显示的大概宽度。可以保留该按钮的默认名称button1。

   在“属性”窗口中，设置 button1 的下列属性。

    

   属性	值
   Content	Go
   Height	Auto
   Width	Auto
   HorizontalAlignment	Right
   VerticalAlignment	Top

   这些设置允许控件在横向和纵向模式下正确地自行调整其位置。

8. 通过从工具箱中进行拖放向您的应用程序中添加一个 Windows Phone 的 WebBrowser 控件。将该控件置于您在上面步骤中添加的两个控件下面。使用鼠标调整该控件的大小以使其填充剩余的空间。可以保留控件的默认名称 webBrowser1。

   注意：

   有关 WebBrowser 控件的更多信息，请参阅 Windows Phone 的 WebBrowser 控件概述和 Windows Phone 的 WebBrowser 控件安全最佳做法。

   在“属性”窗口中，设置 webBrowser1 的下列属性。

    

   属性	值
   Height	Auto
   Width	Auto
   HorizontalAlignment	Stretch
   VerticalAlignment	Stretch

   这些设置允许控件在横向和纵向模式下正确地自行调整其大小。

   现在，您的布局应该已经完成了。在 MainPage.xaml 中的 XAML 代码中，查找包含您的控件的网格。它应该类似于以下内容。如果您想获得的布局与上图中显示的布局完全相同，则复制并粘贴下面的 XAML 并使用它来替换 MainPage.xaml 文件中的网格布局。

   XAML

   <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
       <TextBox Height="Auto" HorizontalAlignment="Stretch" Margin="0,0,120,0" Name="textBox1" Text="http://www.xbox.com" VerticalAlignment="Top" />
       <Button Content="Go" Height="Auto" HorizontalAlignment="Right" Name="button1" VerticalAlignment="Top" Width="Auto" />
       <phone:WebBrowser HorizontalAlignment="Stretch" Margin="0,84,0,0" Name="webBrowser1" VerticalAlignment="Stretch" Height="Auto" Width="Auto" />
   </Grid>

  添加代码

该步骤将添加用来实现“Go”按钮的代码。

添加代码的步骤

1. 双击已添加的“Go”按钮控件以添加按钮单击事件的事件处理程序。您将看到类似于以下内容的 MainPage.xaml.cs 文件。

   C#

   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 MiniBrowser
   {
       public partial class MainPage : PhoneApplicationPage
       {
           // Constructor
           public MainPage()
           {
               InitializeComponent();
           }
   
   
           private void button1_Click(object sender, RoutedEventArgs e)
           {
   
           }
       }
   }
   

2. 双击“Go”按钮也将更新 XAML 以包含 button1_Click 事件处理程序。

   XAML

   <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
       <TextBox Height="Auto" HorizontalAlignment="Stretch" Margin="0,0,120,0" Name="textBox1" Text="http://www.xbox.com" VerticalAlignment="Top" />
       <Button Content="Go" Height="Auto" HorizontalAlignment="Right" Name="button1" VerticalAlignment="Top" Width="Auto" Click="button1_Click" />
       <phone:WebBrowser HorizontalAlignment="Stretch" Margin="0,84,0,0" Name="webBrowser1" VerticalAlignment="Stretch" Height="Auto" Width="Auto" />
   </Grid>
   

3. 在 MainPage.xaml.cs 中，将 button1_Click 事件处理程序替换为以下代码行。该代码将获取在文本框中输入的 URL 并导航到webBrowser1 控件中的该页面。

   C#

   private void button1_Click(object sender, RoutedEventArgs e)
   {
       string site = textBox1.Text;    
       webBrowser1.Navigate(new Uri(site, UriKind.Absolute));
   }

  生成和调试应用程序

现在，应用程序已经完成。该步骤将允许您生成、运行和调试应用程序。

重要说明：

测试应用程序之前，确保您的台式计算机具有 Internet 访问权限。

生成和调试应用程序的步骤

1. 通过选择“调试 | 生成解决方案”菜单命令来生成解决方案。应该生成该项目并且“错误列表”窗口中没有任何错误。您可以通过选择“查看 | 其他窗口 | 错误列表”菜单命令来打开“错误列表”窗口（如果该窗口尚未打开）。如果出现错误，检查以上步骤并改正错误，然后再次生成解决方案。

2. 在标准工具栏上，将应用程序的部署目标设置为“Windows Phone 模拟器”。

   

3. 通过选择“调试 | 开始调试”菜单命令运行该应用程序。这将打开模拟器窗口并启动该应用程序。

4. 您可以通过单击“Go”按钮并验证浏览器窗口是否导航到给定的网站来测试您的应用程序。

   注意：

   根据您的 Internet 连接和台式机 CPU 的速度，该网站在模拟器中加载可能需要几秒钟的时间。

5. 按模拟器上的旋转控件之一。

    或

   模拟器将旋转为横向模式。控件将调整自身大小以适合横向屏幕格式。

   

6. 您可以通过将光标放在所需的代码行上并选择“调试 | 切换断点”菜单命令在代码中设置调试断点。

7. 若要停止调试，您可以选择“调试 | 停止调试”菜单命令。