MSDN Library
信息
您所需的主题如下所示。但此主题未包含在此库中。

如何创建您的第一个 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 中创建新项目。

创建项目的步骤

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

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

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

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

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

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

    GetStartedNewProject
  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 设备上运行。

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

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

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

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

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

    New project open in the Visual Studio designer.

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

GetStartedFirstAppLayout

创建 UI

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

  2. 更改应用标题。

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

      GetStartedProperties

    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 窗口的左侧打开,它显示用于构建用户界面的可用控件列表。默认情况下,工具箱会在不使用时折叠。

    Visual Studio Toolbox
  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 文件中的网格布局。

<!--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 代码页面中看到空事件处理程序。

    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 事件处理程序。

        <Button x:Name="Go" Content="Go" HorizontalAlignment="Right" Margin="346,10,0,0" VerticalAlignment="Top" Click="Go_Click"/>
    
    
  2. MainPage.xaml.csMainPage.xaml.vb 中,向空 Go_Click 事件处理程序添加突出显示的代码行。该代码将获取在文本框中输入的 URL,然后导航到微型浏览器控件中的该 URL。

    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”

    Target on Standard Toolbar selecting emulator

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

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

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

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

    rotate left buttonrotate right button

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

    GetStartedFirstAppRunningLandscape
  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 开发入门

显示:
© 2016 Microsoft