65.9K
CodeProject 正在变化。 阅读更多。
Home

Windows Phone 7的Hello World应用程序

rd.sandeep
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.69/5 (13投票s)

2012年1月11日

CPOL

7分钟阅读

viewsIcon

62169

downloadIcon

714

编写Windows Phone 7应用程序的入门指南。

下载 HelloWorldApp.zip - 69.94 KB

简介

让我们为 Windows Phone 7 创建一个简单的 Hello World 应用程序，然后对其进行解析。

背景

首先，请从此处下载 Windows Phone SDK 7.1：- App Hub。

这是一个免费下载，为您提供了开发 Windows Phone 7 设备应用程序和游戏所需的所有工具。安装后，请打开 Visual Studio 2010 Express for Windows Phone。

ScreenShot1.PNG

创建项目

在“开始页”中，选择“新建项目”。也可以通过从“文件”菜单中选择“新建项目”或使用快捷键组合 Ctrl+Shift+N 来完成。

此时将出现“新建项目”对话框，如下图所示。

ScreenShot2.PNG

在“已安装的模板”中，选择“Silverlight for Windows Phone”，然后选择“Windows Phone Application”模板。键入应用程序名称：HelloWorldApp。浏览到要存储项目的文件夹，然后单击“确定”。

此时将出现如下提示。由于我们要开发最新版本，即代号为“Mango”的 Windows Phone 7.1 操作系统，因此请继续并单击“确定”。

ScreenShot3.PNG

您的屏幕应如下所示。它包括应用程序的设计视图和代码视图。

ScreenShot4.PNG

创建应用程序

现在，打开“工具箱”。为此，请从“视图”菜单中选择“其他窗口”，然后选择“工具箱”。其中包含一个可用于您应用程序的控件列表。

单击并将“按钮”控件拖到设计区域。

ScreenShot5.PNG

您可以将按钮拖到设计视图中的任何位置。将其放置在屏幕中央。

ScreenShot6.PNG

接下来，让我们更改按钮的文本。从“属性”窗口中选择“内容”属性，并将其更改为“Click Me!”（不带双引号）。然后按 Enter 键，您将看到更改反映在按钮上。

同样，在按钮下方添加一个“文本块”控件，然后从“属性”窗口中删除其“文本”内容。“文本块”现在变成了一个空白矩形。

ScreenShot7.PNG

现在，在设计窗格中双击“按钮”控件。这将打开另一个名为 MainPage.xaml.cs 的文件，其中包含应用程序的主要逻辑。请注意，已为您自动创建了一个按钮单击事件处理程序。

ScreenShot8.PNG

您只需在方法中添加一行代码，使其看起来像这样

private void button1_Click(object sender, RoutedEventArgs e)
{
    textBlock1.Text = "Hello World!!!";       //line to be added
}

另外，不要忘记通过选择“标题”并将其“文本”属性更改为 HELLO WORLD APP 来更改应用程序名称，就像您为“文本块”所做的一样。

ScreenShot9.PNG

瞧！您的应用程序已准备就绪。单击上面的绿色箭头或按 F5 键即可启动您的应用程序。

这将生成您的应用程序，创建一个 xap 文件。如果您已按照上述所有说明进行操作，则不会看到任何错误。Windows Phone 模拟器将自动启动，然后将程序包部署到其中。您的应用程序应自动启动。单击“Click Me!”按钮，您将看到如下所示的消息。

ScreenShot10.PNG

是不是很简单？？？

解析

现在，让我们深入了解一下，看看在创建第一个项目时到底发生了什么。

解决方案资源管理器

在 Visual Studio 中加载项目后，请检查“解决方案资源管理器”窗口。您会发现 IDE 为您创建了许多文件。我们将逐一进行检查。

Shot1.PNG

App.xaml 和 MainPage.xaml 文件是可扩展应用程序标记语言 (XAML) 文件，而 App.xaml.cs 和 MainPage.xaml.cs 是 C# 代码文件。这两个代码文件实际上是与这两个 XAML 文件关联的“代码隐藏”文件。它们提供了支持标记的代码。我们稍后将详细介绍这些内容。

其他文件是应用程序使用的图像。ApplicationIcon.png 是代表您应用程序在手机应用程序列表中的图标图像。Background.png 是您应用程序的磁贴图像。当您将应用程序固定到“开始”屏幕时，会显示此图像。最后一个图像是 SplashScreenImage.jpg，它会在应用程序启动时短暂显示，在此期间会将内容加载到内存中。

“引用”部分包含一个库（程序集）列表，这些库提供应用程序正常运行所需的服务和功能。“属性”部分包含三个文件：

  • AppManifest.xml 是生成应用程序包所需的应用程序清单文件。
  • AssemblyInfo.cs 包含嵌入到生成程序集中的名称和版本元数据。
  • WMAppManifest.xml 是一个清单文件，其中包含与 Windows Phone Silverlight 应用程序相关的特定元数据。

App.xaml 和 App.xaml.cs

现在，打开 App.xaml.cs 文件。您会看到一个与项目名称相同的命名空间定义，以及一个名为 App 的类，该类派生自 Silverlight 类 Application。所有 Silverlight 程序都包含一个派生自 Application 的 App 类。这里执行应用程序级初始化、启动和关闭等操作。

namespace HelloWorldApp
{
    public partial class App : Application
    {
        public PhoneApplicationFrame RootFrame { get; private set; }

        public App()
        {
            ...
        }
        ...
    }
}

接下来，查看 App.xaml。您会认出它是一个 XML 文件，更准确地说，它是一个 XAML 文件。您应该使用此文件来存储应用程序中使用的颜色方案、渐变画笔和样式等资源。请注意，根元素是 Application，这与我们之前遇到的 Silverlight 类相同。它包含四个 XML 命名空间声明（“xmlns”）。

<Application 
    x:Class="HelloWorldApp.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"       
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone">
    ...
</Application>

第一个 XML 命名空间声明是 Silverlight 的标准命名空间，它有助于编译器查找和识别 Application 本身等 Silverlight 类。第二个 XML 命名空间声明与 XAML 本身相关联。这允许文件引用 XAML 的某些元素和属性，而不是专门引用 Silverlight。前缀“x”表示 XAML。最后两个是手机特有的。

App.xaml 和 App.xaml.cs 文件实际上定义了同一个 App 类的两个部分。在编译期间，Visual Studio 会解析 App.xaml 并生成另一个代码文件 App.g.cs。此生成的文件包含 App 类的另一个部分定义。它包含一个名为 InitializeComponent 的方法，该方法在 App.xaml.cs 文件中的构造函数中被调用。

因此，当应用程序运行时，App 类会创建一个 PhoneApplicationFrame 类型的对象，并将其设置为自身的 RootVisual 属性。此框架宽度为 480 像素，高度为 800 像素，占据手机的整个显示表面。然后，PhoneApplicationFrame 对象将导航到名为 MainPage 的对象（有点像浏览器）。

MainPage.xaml 和 MainPage.xaml.cs

现在，检查 MainPage.xaml.cs。它包含许多 using 指令。以 System.Windows 开头的指令是用于 Silverlight 类的。Microsoft.Phone.Controls 命名空间包含 Silverlight 对手机的扩展。名为 MainPage 的部分类派生自 Silverlight 类 PhoneApplicationPage。这个类定义了您在运行应用程序时实际在屏幕上看到的视觉效果。

namespace HelloWorldApp
{
    public partial class MainPage : PhoneApplicationPage
    {
        public MainPage()
        {
            InitializeComponent();
        }
        ...
    }
}

打开 MainPage.xaml 文件。前四个 XML 命名空间声明与 App.xaml 中的相同。“d”（设计器）和“mc”（标记兼容性）命名空间声明是为了 XAML 设计程序的方便。程序编译还会生成另一个名为 MainPage.g.cs 的文件，其中包含 MainPage 的另一个部分类定义，并在 MainPage.xaml.cs 中的构造函数中调用 InitializeComponent 方法。

<phone:PhoneApplicationPage 
    x:Class="HelloWorldApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True">

    <Grid x:Name="LayoutRoot" Background="Transparent">
        ...
    </Grid>
</phone:PhoneApplicationPage>

您还会在 MainPage.xaml 中看到适用于整个页面的 FontFamily、FontSize 和 Foreground 设置。MainPage.xaml 文件的正文在父子层次结构中包含多个名为 Grid、StackPanel 和 TextBlock 的嵌套元素。

我们简单的应用程序只有一个页面，称为 MainPage。这个 MainPage 包含一个 Grid，其中包含一个 StackPanel（命名为 'TitlePanel'）和几个 TextBlock 元素，以及另一个 Grid（命名为 'ContentPanel'）。两个文本块分别用于应用程序标题和页面标题。

<Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="HELLO WORLD APP" 
                       Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0" 
                       Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Button Content="Click Me!" Height="72" HorizontalAlignment="Left" 
                    Margin="146,143,0,0" Name="button1" VerticalAlignment="Top" 
                    Width="160" Click="button1_Click" />
            <TextBlock Height="59" HorizontalAlignment="Left" Margin="146,287,0,0" 
                       Name="textBlock1" Text="" VerticalAlignment="Top" Width="160" />
        </Grid>
</Grid>

当您将 Button 控件和 TextBlock 控件从工具箱拖到设计区域时，Visual Studio 会自动在此文件中添加相应的行。这些控件的属性可以在 XAML 本身中进行修改。因此，您可以直接在此处将 Button 的 Content 属性设置为 'Click Me!'，而不是去属性窗口。

接下来，当您双击按钮时，您（或者说 Visual Studio）会为按钮创建一个单击事件处理程序，并将您重定向到 C# 代码文件，直接进入该方法。在那里，您只写了一行代码来修改 TextBlock 的 text 属性。

按下 F5 后，Visual Studio 会检查项目的错误，对其进行编译，然后将整个应用程序构建成一个 xap 文件，该文件本质上是一个 zip 文件，其中包含程序在 Windows Phone 设备/模拟器上运行所需的所有资源。

© . All rights reserved.