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

2014/6/18

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

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

本主题包括以下部分。

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

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

创建项目

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

创建项目的步骤

确保您已下载并安装了 Windows Phone SDK。有关更多信息，请参见获取 SDK。
从 Windows“开始”屏幕启动 Visual Studio。如果显示“注册”窗口，您可以注册产品或暂时关闭该提示。
通过选择“文件” | “新建项目”菜单命令来创建一个新项目。
在“新建项目”窗口中，展开已安装的“Visual C#”或“Visual Basic”模板，然后选择“Windows Phone”模板。
在“Windows Phone”模板列表中，选择Windows Phone 应用模板。
在“新建项目”窗口的底部，输入 MiniBrowser 作为项目的名称。
单击“确定”。在“新建 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 设备上运行。
单击“确定”。这样将会创建新项目并在 Visual Studio 中打开它。设计器将显示 MainPage.xaml，它包含您的应用的用户界面。主 Visual Studio 窗口包含以下项：
- 中间窗格包含 XAML 标记，用以为页面定义用户界面。
- 左侧窗格包含显示 XAML 标记输出的皮肤。
- 右侧窗格包含解决方案资源管理器，列出了项目中的文件。
- 相关代码隐藏页面（MainPage.xaml.cs 或 MainPage.xaml.vb）包含处理用户与页面交互的代码，默认情况下并不开放也不显示该代码。

创建 UI

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

创建 UI

通过选择“查看 | 属性窗口”菜单命令，在 Visual Studio 中打开“属性”窗口（如果尚未打开）。将在 Visual Studio 窗口的右下角打开“属性”窗口。
更改应用标题。
1. 在 Visual Studio 设计器中，单击以选择 MY APPLICATION TextBlock 控件。该控件的属性显示在“属性”窗口中。
2. 在 Text 属性中，将名称更改为MY FIRST APPLICATION，以重命名应用窗口标题。如果属性是按照“属性”窗口中的类别进行分组的，则您可以在“常见”类别中找到Text。
更改页面的名称。
1. 在设计器中，单击以选择 page name TextBlock 控件。
2. 将 Text 属性更改为Mini Browser，以重命名应用的主页。
更改支持的方向。
1. 在 XAML 代码窗口中，单击 XAML 代码的第一行。PhoneApplicationPage 的属性显示在“属性”窗口中。
2. 将 SupportedOrientations 属性更改为PortraitOrLandscape，以添加对纵向和横向方向的支持。如果属性是按照“属性”窗口中的类别进行分组的，则您可以在“常见”类别中找到SupportedOrientations。
通过选择“查看 | 工具箱|”菜单命令在 Visual Studio 中打开工具箱（如果尚未打开）。工具箱一般在 Visual Studio 窗口的左侧打开，它显示用于构建用户界面的可用控件列表。默认情况下，工具箱会在不使用时折叠。

为 URL 添加一个文本框。

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

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

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

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

添加“执行”按钮。

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

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

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

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

添加 WebBrowser 控件。

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

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

在“属性”窗口中，设置新 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>

添加代码

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

添加代码的步骤

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

复制

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"/>

在 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 访问权限。

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

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

如果发生错误，它们将在“错误列表”窗口中列出。您可以打开“错误列表”窗口，如果未打开该窗口，可以通过选择“视图 | 错误列表”菜单命令打开它。如果出现错误，检查以上步骤并改正错误，然后再次生成解决方案。
在标准工具栏上，请确保应用的部署目标已设置为Windows Phone 模拟器的某个值，例如“模拟器 WVGA 512MB”。
通过按 F5 或通过选择“调试 | 开始调试”菜单命令运行应用。这会打开模拟器窗口并启动该应用。如果这是首次启动模拟器，可能会花费几秒钟时间来启动您的应用。

Windows Phone 8 模拟器具有特殊的硬件、软件和配置要求。如果您对模拟器存在任何疑问，请参见以下主题。
要测试您正在运行的应用，请单击“执行”按钮并验证浏览器转到了指定的网站。
要在横向模式中测试应用，请按模拟器工具栏上的旋转控件之一。

或

模拟器将旋转到横向模式。控件将调整自身大小以适合横向屏幕格式。
若要停止调试，您可以选择 Visual Studio 中的“调试 | 停止调试”菜单命令。

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