瓷片的诱惑
上QQ阅读APP看本书，新人免费读10天
设备和账号都新为新人
上一章目录下一章

1.4 第一个Silverlight for Windows Phone应用程序

以下过程演示Silverlight for Windows Phone应用程序的创建过程，并测试应用程序的运行。同时，还详细介绍了Silverlight for Windows Phone应用程序的构成结构，以及主要程序文件的作用。

1.4.1 创建第一个应用程序

在Windows操作系统中，选择“开始”→“所有程序”→“Microsoft Visual Studio 2010 Express”→“Microsoft Visual Studio 2010 Express for Windows Phone”命令，启动如图1-13所示的开发工具。

图1-13 Microsoft Visual Studio 2010 Express for Windows Phone开发工具

1.新建应用程序项目

在“Start Page”页上，单击“New Project…”或者选择“File”→“New Project…”命令。在如图1-14所示的新建工程“New Project”窗口中，在左侧项目模板选择“Other Languages” →“Visual Basic”，然后在中间的项目模板列表中选择“Windows phoneApplication”，设置项目名称为“GuessNumber”，并指定项目文件存放的路径。单击“OK”按钮，创建新应用程序项目。

图1-14 新建工程

2.选择Windows phonePlatform

在如图1-15所示的窗口中，选择目标Windows phone操作系统为Windows phoneos7.1。单击“OK”按钮，进入项目设计窗口，如图1-16所示。

图1-15 选择“Windows phoneOS7.1”操作系统

图1-16 设计窗口

项目设计窗口分为3部分。左侧是可视化的模拟器预览窗口，可以通过图形方式查看和设计Windows phoneMango应用程序的界面效果。中间是代码编辑窗口，在此窗口中可以查看和编辑XAML代码，这些代码用于定义Windows phoneMango应用程序的界面与行为效果。模拟器预览窗口和代码编辑窗口是联动的，在模拟器预览窗口中对Windows phoneMango应用程序的界面进行修改时，对应的XAML代码会反映到代码编辑窗口中，反之亦然。右侧是解决方案（Solution Explorer）与属性（Properties）窗口，解决方案窗口（Solution Explorer）可以管理项目中的所有文件，单击底部的“Class View”，可以切换到类视图窗口，可以查看本项目引用和生成的类；属性（Properties）窗口可以设置和查看项目中各种对象的属性。

3.修改程序主窗口页面标题

在解决方案窗口（Solution Explorer）中双击MainPage.xaml文件，打开该文件。在代码编辑窗口中，修改名称为“PageTitle”的TextBlock控件的Text值为“Guess Number”。在左侧的模拟器预览窗口中可以看到页面标题相应地由“PageTitle”改为“Guess Number”。

4.修改页面内容

找到“<Grid x：Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"></Grid>”，并将之修改为如下所示代码。

XAML代码：

<StackPanel Grid.Row="1" Name="ContentPanel" Orientation="Horizontal" Height="80" HorizontalAlignment="Center">
         <Button Name="GuessButton1" Content="Guess1" Tag="1"/>
         <Button Name="GuessButton2" Content="Guess2" Tag="2"/>
         <Button Name="GuessButton3" Content="Guess3" Tag="3" />
</StackPanel>

完成后，完整的XAML代码如下。

XAML代码：

<phone：PhoneApplicationPage
  x：Class="GuessNumber.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">
  <!--LayoutRoot is the root grid where all page content is placed-->
  <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="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
        <TextBlock x：Name="PageTitle" Text="Guess Number" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
     </StackPanel>
     <!--ContentPanel-place additional content here-->
     <StackPanel Grid.Row="1" Name="ContentPanel" Orientation="Horizontal" Height="80" HorizontalAlignment="Center">
        <Button Name="GuessButton1" Content="Guess1" Tag="1"/>
        <Button Name="GuessButton2" Content="Guess2" Tag="2"/>
        <Button Name="GuessButton3" Content="Guess3" Tag="3" />
     </StackPanel>
  </Grid>
</phone：PhoneApplicationPage>

左侧模拟器预览窗口显示的效果如图1-17所示。

5.添加页面加载事件

在模拟器预览窗口中，双击空白区域，或者在属性（Properties）窗口中，保持对象名称为“PhoneApplicationPage”，选择“Events”项（即事件）。在事件列表中，选中“Loaded”，然后双击右侧的空白单元格，一个名称为“PhoneApplicationPage_Loaded”的事件会被添加，如图1-18所示。Microsoft Visual Studio 2010 Express for Windows Phone会在程序代码编辑窗口中打开MainPage.xaml.vb文件，这是MainPage.xaml对应的程序代码文件，如图1-19所示。

图1-17 模拟器预览窗口显示的效果

图1-18 属性窗口中添加页面加载事件

图1-19 程序代码编辑窗口

6.添加程序代码

在如图1-19所示的程序代码编辑窗口中，找到代码“Public Sub New（）”，并在此之前，添加如下代码，定义两个页面可用的公共变量。

VB.NET代码：

  Dim GuessNumber As Integer
  Dim rnd As Random

找到步骤5中生成的PhoneApplicationPage_Loaded事件，修改代码如下。

VB.NET代码：

Private Sub PhoneApplicationPage_Loaded（sender As System.Object，e As System.Windows.RoutedEventArgs）Handles MyBase.Loaded
      rnd=New Random（System.DateTime.Now.Second）
      GuessNumber=rnd.Next（1，3）
  End Sub

7.添加按钮事件及处理代码

在如图1-19所示窗口中，单击代码编辑窗口顶部的“MainPage.xaml”标签，切换到页面设计窗口。双击模拟器预览窗口中的“GuessButton1”按钮（即显示内容为“Guess1”的按钮），系统会为按钮添加“GuessButton1_Click”事件，并跳转到程序代码编辑窗口。

修改按钮的事件处理代码如下。

VB.NET代码：

  Private Sub GuessButton1_Click（sender As System.Object，e As System.Windows.RoutedEventArgs）Handles GuessButton3.Click，GuessButton1.Click，GuessButton2.Click
      Dim button As Button=CType（sender，Button）
      If GuessNumber=CInt（button.Tag）Then
         MessageBox.Show（"哈哈，真厉害，这也让您猜到了！"，"结果"，MessageBoxButton.OK）
         GuessNumber=rnd.Next（1，3）
      Else
         MessageBox.Show（"哦，喔喔！没猜到！再试试！"，"结果"，MessageBoxButton.OK）
      End If
  End Sub

1.4.2 测试应用程序

完成后的应用程序可以在模拟器中（Windows phoneEmulator）进行测试，也可以部署到实体手机上进行测试。一般，在开发阶段以模拟器测试为主，在工具栏中选择“Select target for Windows phoneprojects”项为“Windows phoneEmulator”，即在模拟器上运行Windows phone应用程序。

单击工具栏中的“Save All”按钮，保存上述设计内容。单击工具栏中“Start Debugging（F5）”按钮，或直接按“F5”键，测试应用程序。系统会启动“Windows phoneEmulator”，并打开应用程序，如图1-20所示。

在模拟器中，单击“Guess1”、“Guess2”、“Guess3”各按钮，测试程序运行情况，可以得到如图1-21所示的各种情况。

图1-20 模拟器Windows phoneEmulator运行应用程序

提示：

Windows phoneEmulator模拟器在程序调试过程中，最好不要关闭，这样可以节约模拟器的启动时间。为了便于书籍印刷，在后续实例测试时，模拟器的Theme背景会修改为Light，这样模拟器的背景是白色显示的。为适应白色背景，应用程序背景与文字颜色等也进行了相应调整。

图1-21 程序运行情况

1.4.3 Silverlight for Windows Phone应用程序分析

1.Silverlight for Windows Phone应用程序结构

从文件结构来看，一个Visual Basic.NET语言开发的Silverlight for Windows Phone的应用程序一般都包含App.xaml、App.xaml.vb、ApplicationIcon.png、Background.png、MainPage.xaml、MainPage.xaml.vb、SplashScreenImage.jpg和My Project、References等文件与文件夹。其中，My Project文件夹中还包含AppManifest.xml、AssemblyInfo.vb、WMAppManifest.xml等文件，References文件夹包含对系统类与用户自定义的引用。

这些文件在应用程序中的作用与含义分别如下。

1）App.xaml/App.xaml.vb

App.xaml/App.xaml.vb定义了一个继承自Application的类，此类是Silverlight 应用程序所必需的，它定义了程序的入口点、程序范围可用的资源等。

默认的App.xaml如下。

XAML代码：

<Application
   x：Class="GuessNumber.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 Resources-->
   <Application.Resources>
   </Application.Resources>
   <Application.ApplicationLifetimeObjects>
      <!--Required object that handles lifetime events for the application-->
      <shell：PhoneApplicationService
         Launching="Application_Launching" Closing="Application_Closing"
         Activated="Application_Activated" Deactivated="Application_Deactivated"/>
   </Application.ApplicationLifetimeObjects>
</Application>

在上述代码中，x：Class="GuessNumber.App"告诉系统定义了一个App类型的类，类的名称为GuessNumber。这个类的定义代码在App.xaml.vb代码中，从App.xaml.vb代码中可以看到App继承自Application，即应用程序类。Xmlns标记定义应用程序用到的XML名称空间，如xmlns="http：//schemas.microsoft.com/winfx/2006/xaml/presentation"表示引入Silverlight标准名称空间，其中包含了常用的Grid、Button、TextBlock等控件。<Application.Resources>与</Application.Resources>节点间，可以定义在整个应用程序范围内可用的资源，如样式、图片、模板等。<Application.ApplicationLifetimeObjects>与</Application.ApplicationLifetimeObjects>间的代码定义了应用程序生命周期内的事件绑定，如Launching="Application_Launching"和Closing="Application_Closing"分别表示为应用程序启动时，载入Application_Launching，关闭时执行Application_Closing，Application_Launching和Application_Closing的执行代码可以在App.xaml.vb中进行定义。

2）ApplicationIcon.png

ApplicationIcon.png是一个图标文件。应用程序在模拟器中调试时，此图标会出现在模拟器的应用程序列表中，部署到实体手机时同样会出现在手机应用程序的列表中。ApplicationIcon.png的默认图标如图1-22所示，大小为62像素×62像素，如本例“GuessNumber”在模拟器应用程序列表中的显示效果如图1-23所示，这是系统默认提供的图标。

图1-22 ApplicationIcon.png图标

图1-23 应用程序列表中显示的图标

用户可以根据需要修改ApplicationIcon.png，最简单的方式是采用同名文件覆盖系统默认的ApplicationIcon.png文件，另一种方式是修改WMAppManifest.xml中的相关定义，详见WMAppManifest.xml。

3）Background.png

Background.png也是个图标文件。与ApplicationIcon.png不同的是，Background.png将会出现在模拟器或手机的开始页中（如果用户将程序钉到开始页）。Background.png的默认图标如图1-24所示，大小为173像素×173像素，本例“GuessNumber”在开始页中显示效果如图1-25所示。

图1-24 Background.png图标

图1-25 开始页中显示的图标

用户同样可以自定义Background.png，修改方式与ApplicationIcon.png类似。

4）MainPage.xaml/MainPage.xaml.vb

MainPage是应用程序用户页，MainPage.xaml用XAML代码定义了要在程序中显示的界面，可以将Grid、Button、TextBlock、ListBox等定义在XAML代码中。MainPage.xaml.vb是与MainPage.xaml对应的程序代码文件。在Silverlight for Windows Phone应用程序设计中，页面设计与程序代码设计是可以分别进行的，页面设计师可以设计页面，并将最终结果以XAML文件的形式提交，而程序员可以专注于代码设计，最终代码形成.vb文件。这种可视界面与程序代码独立设计的方式，可以充分发挥设计师和程序员各自的特长。

在MainPage.xaml中，默认包含如下代码：

FontFamily="{StaticResource PhoneFontFamilyNormal}"
   FontSize="{StaticResource PhoneFontSizeNormal}"
   Foreground="{StaticResource PhoneForegroundBrush}"
   SupportedOrientations="Portrait" Orientation="Portrait"
   shell：SystemTray.IsVisible="True">

前3项定义了页面整体的字型、字体大小、前景色，这些项的值绑定了系统资源（或样式）PhoneFontFamilyNormal、PhoneFontSizeNormal、PhoneForegroundBrush。这些资源（或样式）是Silverlight for Windows Phone为方便用户程序设计预先设置的，比较符合Windows Phone运行环境，用户可以根据需要调用，详情请见“第5章 资源样式与模板”。SupportedOrientations="Portrait" Orientation="Portrait"定义了应用程序在屏幕上放置的效果，SupportedOrientations="Portrait"表示应用程序支持竖屏显示，SupportedOrientations还可以取其他值，取值及含义如表1-2所示。Orientation项多用于设计时模拟器预览窗口显示的效果。

表1-2 SupportedOrientations的取值及含义

shell：SystemTray.IsVisible="True"，此代码定义了系统状态栏的显示状态，在Windows phoneMango中，系统状态栏是指位于屏幕顶部，用于显示通信信号强度、电池容量、响铃（或振动）、WIFI连接情况等状态。设置值为“True”可以显示状态栏，设置为“False”可以隐藏状态栏。

另外，MainPage.xaml默认定义如下代码：

<StackPanel x：Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x：Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
 <TextBlock x：Name="PageTitle" Text="Guess Number" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>

分别用于显示应用程序标题和页面标题，可以通过修改Text值进行定制。

系统默认以MainPage.xaml作为应用程序运行的首页面，在实际使用中可以进行更改。事实上，应用程序中也可以没有MainPage.xaml文件。这些修改需要在WMAppManifest.xml文件中完成。

5）SplashScreenImage.jpg

SplashScreenImage.jpg是个图片文件，默认图片如图1-26所示。该图片会在应用程序启动，但尚未载入首页面（如MainPage.xaml）之前显示。同样与Background.png和ApplicationIcon.png类似，用户也可以修改该图片。

图1-26 SplashScreenImage.jpg

6）AppManifest.xml

AppManifest.xml是Silverlight应用程序的基础结构文件，保存的是应用程序生成时所必需的文件清单，一般不需要手工改动。

7）AssemblyInfo.vb

AssemblyInfo.vb文件记录了应用程序生成时的元数据，包括程序的名称、版本、企业、版权所有方等信息。这些元数据会嵌入到最终生成的Xap文件中。如在本例中，AssemblyInfo.vb文件的内容如下。

VB.NET代码：

Imports System
Imports System.Reflection
Imports System.Runtime.InteropServices
Imports System.Resources
' Review the values of the assembly attributes
<Assembly： AssemblyTitle（"GuessNumber"）>
<Assembly： AssemblyDescription（""）>
<Assembly： AssemblyConfiguration（""）>
<Assembly： AssemblyCompany（"Guess Corp."）>
<Assembly： AssemblyProduct（"GuessNumber"）>
<Assembly： AssemblyCopyright（"Copyright © Guess Corp.2010"）>
<Assembly： AssemblyTrademark（""）>
<Assembly： AssemblyCulture（""）>
<assembly： ComVisible（false）>
' The following GUID is for the ID of the typelib if this project is exposed to COM
<assembly： Guid（"f1b1febc-3400-4f4f-a40b-f00e14551236"）>
<assembly： AssemblyVersion（"1.0.0.0"）>
<assembly： AssemblyFileVersion（"1.0.0.0"）>
<Assembly： NeutralResourcesLanguageAttribute（"zh-CN"）>

这些内容也可以通过项目属性进行修改，操作过程如下：在解决方案管理器窗口中，用鼠标右键单击项目名称，如本例的“GuessNumber”，在弹出快捷菜单中选择“Properties”（属性）命令。在如图1-27所示的窗口单击“Assembly Information…”按钮，可以在如图1-28所示的“Assembly Information”对话框中，设置应用程序生成的元数据信息。这些数据变动会实时更新到AssemblyInfo.vb文件中。

图1-27 “GuessNumber”窗口

图1-28 “Assembly Information”对话框

8）WMAppManifest.xml

WMAppManifest.xml用于应用程序在操作系统Windows phoneMango中的运行方式、显示状态，是应用程序的清单。如本例“GuessNumber”项目的WMAppManifest.xml内容如下：

<？xml version="1.0" encoding="utf-8"？>
<Deployment xmlns="http：//schemas.microsoft.com/windowsphone/2009/deploy ment" AppPlatformVersion="7.1">
  <App xmlns="" ProductID="{91b9b9f0-67bd-4be6-83d9-358561e38f4f}" Title="GuessNumber" RuntimeType="Silverlight" Version="1.0.0.0" Genre="apps.normal" Author="GuessNumber author" Description="Sample description" Publisher="Gu essNumber">
    <IconPath IsRelative="true" IsResource="false">ApplicationIcon.png</I conPath>
    <Capabilities>
      <Capability Name="ID_CAP_GAMERSERVICES"/>
      <Capability Name="ID_CAP_IDENTITY_DEVICE"/>
      <Capability Name="ID_CAP_IDENTITY_USER"/>
      <Capability Name="ID_CAP_LOCATION"/>
      <Capability Name="ID_CAP_MEDIALIB"/>
      <Capability Name="ID_CAP_MICROPHONE"/>
      <Capability Name="ID_CAP_NETWORKING"/>
      <Capability Name="ID_CAP_PHONEDIALER"/>
      <Capability Name="ID_CAP_PUSH_NOTIFICATION"/>
      <Capability Name="ID_CAP_SENSORS"/>
      <Capability Name="ID_CAP_WEBBROWSERCOMPONENT"/>
      <Capability Name="ID_CAP_ISV_CAMERA"/>
      <Capability Name="ID_CAP_CONTACTS"/>
      <Capability Name="ID_CAP_APPOINTMENTS"/>
    </Capabilities>
    <Tasks>
      <DefaultTask Name="_default" NavigationPage="MainPage.xaml"/>
    </Tasks>
    <Tokens>
      <PrimaryToken TokenID="GuessNumberToken" TaskName="_default">
        <TemplateType5>
        <BackgroundImageURI IsRelative="true" IsResource="false">Background.png</BackgroundImageURI>
          <Count>0</Count>
          <Title>GuessNumber</Title>
        </TemplateType5>
      </PrimaryToken>
    </Tokens>
  </App>
</Deployment>

其中，ProductID是在Windows Phone操作系统用于标识该应用程序的GUID（Globally Unique Identifier）编号，这是全局唯一的编号，可以与其他程序进行区分。Title项值代表应用程序的名称，RuntimeType可识别应用程序的类型，值“Silverlight”表示这是一个Silverlight程序，如果值是“XNA”则表示是一个XNA程序。另外，<IconPath IsRelative="true" IsResource="false"> ApplicationIcon.png</IconPath>指定了应用程序的图标，<DefaultTask Name="_default" NavigationPage="MainPage.xaml"/>指定应用程序启动时载入的首页面为“MainPage.xaml”，<BackgroundImageURI IsRelative="true" IsResource="false">Background.png</BackgroundImage URI>指定了应用程序在操作系统开始页中的图标。因此，修改这些项的值，可以定制应用程序的运行状态。

WMAppManifest.xml文件与应用程序属性是相关联的，也就是说，可以通过对应用程序属性的修改来更改WMAppManifest.xml中的内容。具体可以在如图1-27所示的窗口中进行操作。

2.代码含义

本程序代码比较简单，也易懂，程序代码都集中在MainPage.xaml.vb中。完整代码及说明如下。

VB.NET代码：

Partial Public Class MainPage
    Inherits PhoneApplicationPage
    '定义两个页面级公共变量
    Dim GuessNumber As Integer
    Dim rnd As Random
Public Sub New（）
       InitializeComponent（）
    End Sub
    Private Sub PhoneApplicationPage_Loaded（sender As System.Object，e As System.Windows.RoutedEventArgs）Handles MyBase.Loaded
       '页面载入时，调用随机函数，生成随机值，随机值取值范围为1～3，整型值，然后赋给'页面全局变量GuessNumber
       rnd=New Random（System.DateTime.Now.Second）
       GuessNumber=rnd.Next（1，3）
    End Sub
    '将3个按钮的单击事件都绑定到GuessButton1_Click，并判断所单击按钮值是否与'GuessNumber值相同，并根据结果给出提示
    Private Sub GuessButton1_Click（sender As System.Object，e As System.Windows.RoutedEventArgs）Handles GuessButton3.Click，GuessButton1.Click，GuessButton2.Click
        Dim button As Button=CType（sender，Button）
        If GuessNumber=CInt（button.Tag）Then
           MessageBox.Show（"哈哈，真厉害，这也让您猜到了！"，"结果"，MessageBoxButton.OK）
           GuessNumber=rnd.Next（1，3）
        Else
           MessageBox.Show（"哦，喔喔！没猜到！再试试！"，"结果"，MessageBoxButton.OK）
        End If
    End Sub
End Class
上一章目录下一章