如何创建您的第一个 Windows Phone 应用

http://msdn.microsoft.com/zh-cn/library/windows/apps/ff402526(v=vs.105).aspx

2014/6/18

本主题提供分步指导以帮助您为 Windows Phone 创建第一个应用。您将要创建一个基本的 Web 浏览器。该简单的应用允许用户输入一个 URL，然后在用户单击“执行”按钮时加载网页。

您可以下载采用 C# 或 Visual Basic.NET 编写的完整微型浏览器示例 。

本主题包括以下部分。

• 开始之前
• 创建项目
• 创建 UI
• 添加代码
• 运行应用
• 后续步骤

 

开始之前

---

本演练假设您将在模拟器中测试应用。如果您希望在手机上测试应用，则需要执行额外的一些步骤。有关更多信息，请参见如何注册您的手机以面向 Windows Phone 8 进行开发。

本主题中的步骤假设您正在使用 Visual Studio Express 2012 for Windows Phone。如果使用 Visual Studio Professional 2012 或更高版本，或者如果您已经对 Visual Studio 中的布局或菜单进行了自定义，您可以看到窗口布局或菜单命令中发生的一些变化。

创建项目

---

创建 Windows Phone 应用的第一步是在 Visual Studio 中创建新项目。

创建项目的步骤

1. 确保您已下载并安装了 Windows Phone SDK。有关更多信息，请参见获取 SDK。

2. 从 Windows“开始”屏幕启动 Visual Studio。如果显示“注册”窗口，您可以注册产品或暂时关闭该提示。

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

4. 在“新建项目”窗口中，展开已安装的“Visual C#”或“Visual Basic”模板，然后选择“Windows Phone”模板。

5. 在“Windows Phone”模板列表中，选择Windows Phone 应用  模板。

6. 在“新建项目”窗口的底部，输入 MiniBrowser 作为项目的名称。

   

7. 单击“确定”。在“新建 Windows Phone 应用程序”对话框中，选择“Windows Phone OS 8.0”作为“Windows Phone OS 目标版本”。

   • 当您选择“Windows Phone OS 8.0”作为目标版本时，您的应用将仅能在 Windows Phone 8 设备上运行。

   • 当您选择“Windows Phone OS 7.1”时，您的应用将能够同时在 Windows Phone OS 7.1 和 Windows Phone 8 设备上运行。

   

8. 单击“确定”。这样将会创建新项目并在 Visual Studio 中打开它。设计器将显示 MainPage.xaml，它包含您的应用的用户界面。主 Visual Studio 窗口包含以下项：

   • 中间窗格包含 XAML 标记，用以为页面定义用户界面。

   • 左侧窗格包含显示 XAML 标记输出的皮肤。

   • 右侧窗格包含解决方案资源管理器，列出了项目中的文件。

   • 相关代码隐藏页面（MainPage.xaml.cs 或 MainPage.xaml.vb）包含处理用户与页面交互的代码，默认情况下并不开放也不显示该代码。

   

创建 UI

---

下一步是使用 Visual Studio 设计器对组成应用的 UI 的控件进行布局。添加控件之后，最终布局将类似于以下屏幕快照。

创建 UI

1. 通过选择“查看 | 属性窗口”菜单命令，在 Visual Studio 中打开“属性”窗口（如果尚未打开）。将在 Visual Studio 窗口的右下角打开“属性”窗口。

2. 更改应用标题。

   1. 在 Visual Studio 设计器中，单击以选择 MY APPLICATION TextBlock 控件。该控件的属性显示在“属性”窗口中。

      

   2. 在 Text 属性中，将名称更改为 MY FIRST APPLICATION，以重命名应用窗口标题。如果属性是按照“属性”窗口中的类别进行分组的，则您可以在“常见”类别中找到 Text。

3. 更改页面的名称。

   1. 在设计器中，单击以选择 page name TextBlock 控件。

   2. 将 Text 属性更改为 Mini Browser，以重命名应用的主页。

4. 更改支持的方向。

   1. 在 XAML 代码窗口中，单击 XAML 代码的第一行。PhoneApplicationPage 的属性显示在“属性”窗口中。

   2. 将 SupportedOrientations 属性更改为 PortraitOrLandscape，以添加对纵向和横向方向的支持。如果属性是按照“属性”窗口中的类别进行分组的，则您可以在“常见”类别中找到 SupportedOrientations。

5. 通过选择“查看 | 工具箱|”菜单命令在 Visual Studio 中打开工具箱（如果尚未打开）。工具箱一般在 Visual Studio 窗口的左侧打开，它显示用于构建用户界面的可用控件列表。默认情况下，工具箱会在不使用时折叠。

   

6. 为 URL 添加一个文本框。

   1. 从工具箱的“常见 Windows Phone 控件”组中，通过从工具箱将 TextBox 控件拖放到设计器图面上，将它添加到设计器图面。将 TextBox 放置在微型浏览器文本的正下方。使用鼠标将该控件的大小调整为上面布局图像中显示的大概宽度。在右侧为“执行”按钮留出空间。

   2. 在“属性”窗口中设置新文本框的以下属性。

      属性	值
      名称	URL
      文本	http://www.xbox.com
      TextWrapping	NoWrap
      高度	自动
      宽度	自动
      HorizontalAlignment	拉伸
      VerticalAlignment	返回顶部

      借助这些设置，控件能够在横向和纵向模式下正确地自行调整其大小位置。

7. 添加“执行”按钮。

   1. 重新调整文本框大小，以为“执行”按钮留出空间。然后，从工具箱的“常见 Windows Phone 控件”组中，通过拖放添加 Button 控件。将其放置在刚刚添加的文本框右侧。将该按钮的大小调整为前面的图像中显示的大概宽度。

   2. 在“属性”窗口中设置新按钮的下列属性。

      属性	值
      名称	执行
      内容	执行
      高度	自动
      宽度	自动
      HorizontalAlignment	向右
      VerticalAlignment	返回顶部

      借助这些设置，控件能够在横向和纵向模式下正确地自行调整其大小位置。

8. 添加 WebBrowser 控件。

   1. 从工具箱中的“所有 Windows Phone 控件”组中，通过拖放 WebBrowser 控件，将其添加到您的应用中。将该控件置于您在上面步骤中添加的两个控件下面。使用鼠标调整该控件的大小以使其填充剩余的空间。

      若您想要了解有关 WebBrowser 控件的更多信息，请参见 Windows Phone 8 的 WebBrowser 控件。

   2. 在“属性”窗口中，设置新 WebBrowser 控件的下列属性。

      属性	值
      名称	MiniBrowser
      高度	自动
      宽度	自动
      HorizontalAlignment	拉伸
      VerticalAlignment	拉伸

      借助这些设置，控件能够在横向和纵向模式下正确地自行调整其大小位置。

现在您的布局已完成。在 MainPage.xaml 中的 XAML 代码中，查找包含您的控件的网格。它将与以下内容类似。如果您想要布局与前面示图中显示的布局完全相同，则复制并粘贴下面的 XAML 以替换 MainPage.xaml 文件中的网格布局。

XAML

复制

<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <TextBox x:Name="URL" Margin="10,10,85,0" Text="http://www.xbox.com" VerticalAlignment="Top"/>
    <Button x:Name="Go" Content="Go" HorizontalAlignment="Right" Margin="346,10,0,0" VerticalAlignment="Top"/>
    <phone:WebBrowser x:Name="MiniBrowser" Margin="10,82,0,0"/>
</Grid>

添加代码

---

进行测试应用之前的最终步骤是添加实现“执行”按钮的代码。

添加代码的步骤

1. 在设计器中，双击已添加的“执行”按钮控件以创建按钮的 Click 事件的空事件处理程序。您将在MainPage.xaml.cs 选项卡上的 C# 代码页面中或者 MainPage.xaml.vb 选项卡上的 Visual Basic 代码页面中看到空事件处理程序。

   C#

   VB

   复制

   using System;
   using System.Collections.Generic;
   using System.Linq;
   using System.Net;
   using System.Windows;
   using System.Windows.Controls;
   using System.Windows.Navigation;
   using Microsoft.Phone.Controls;
   using Microsoft.Phone.Shell;
   using MiniBrowser.Resources;
   
   namespace MiniBrowser
   {
       public partial class MainPage : PhoneApplicationPage
       {
           // Constructor
           public MainPage()
           {
               InitializeComponent();
           }
   
           private void Go_Click(object sender, RoutedEventArgs e)
           {
   
           }
       }
   }
   

   双击“执行”按钮时，Visual Studio 也会更新 MainPage.xaml 中的 XAML，以将按钮的 Click 事件连接到Go_Click 事件处理程序。

   XAML

   复制

       <Button x:Name="Go" Content="Go" HorizontalAlignment="Right" Margin="346,10,0,0" VerticalAlignment="Top" Click="Go_Click"/>
   
   

2. 在 MainPage.xaml.cs 或 MainPage.xaml.vb 中，向空 Go_Click 事件处理程序添加突出显示的代码行。该代码将获取在文本框中输入的 URL，然后导航到微型浏览器控件中的该 URL。

   C#

   VB

   复制

   private void Go_Click(object sender, RoutedEventArgs e)
   {
       string site = URL.Text;
       MiniBrowser.Navigate(new Uri(site, UriKind.Absolute));
   }
   

运行应用

---

现在，您已经完成了您的第一个 Windows Phone 应用！接下来，您将要生成、运行和调试应用。

在您测试应用之前，请确保您的计算机具有能够测试 Web 浏览器控件的 Internet 访问权限。

在模拟器中运行应用的步骤

1. 通过选择“生成 | 生成解决方案”菜单命令生成解决方案。

   如果发生错误，它们将在“错误列表”窗口中列出。您可以打开“错误列表”窗口，如果未打开该窗口，可以通过选择“视图 | 错误列表”菜单命令打开它。如果出现错误，检查以上步骤并改正错误，然后再次生成解决方案。

2. 在标准工具栏上，请确保应用的部署目标已设置为Windows Phone 模拟器 的某个值，例如“模拟器 WVGA 512MB”。

   

3. 通过按 F5 或通过选择“调试 | 开始调试”菜单命令运行应用。这会打开模拟器窗口并启动该应用。如果这是首次启动模拟器，可能会花费几秒钟时间来启动您的应用。

   Windows Phone 8 模拟器具有特殊的硬件、软件和配置要求。如果您对模拟器存在任何疑问，请参见以下主题。

   • Windows Phone 8 模拟器的系统要求

   • 如何为 Windows Phone 8 模拟器启用 Hyper-V

   • Windows Phone 8 模拟器疑难解答

4. 要测试您正在运行的应用，请单击“执行”按钮并验证浏览器转到了指定的网站。

   

5. 要在横向模式中测试应用，请按模拟器工具栏上的旋转控件之一。

    或 

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

   

6. 若要停止调试，您可以选择 Visual Studio 中的“调试 | 停止调试”菜单命令。

   当您结束调试会话时，最好仍保持模拟器运行。下次运行应用时，应用会更快启动，因为模拟器已经在运行中。

恭喜！您已经成功完成了您的第一个 Windows Phone 应用。

后续步骤

---

开始面向 Windows Phone 进行开发。

注册您的手机

注册您的手机，以便在手机上安装、运行并调试应用。

如何注册您的手机以面向 Windows Phone 8 进行开发

下载其他示例应用

在大量示例中进行挑选以了解特定的控件、功能和应用类型的工作方式。

Windows Phone 开发人员中心的示例库

从联机课程了解详细信息

观看视频并按照演示操作以了解您感兴趣的功能。

面向完全新手的 Windows Phone 8 开发（分为 35 个部分）

生成适用于 Windows Phone 8 Jump Start 的应用（分为 21 个部分）

再次查看“入门”检查表

了解您可以使用 SDK 完成的任务，并找到生成出色应用的指南。

Windows Phone 8 开发入门

顶