演练:为 Windows Phone 创建应用程序栏测试应用程序

2012/2/9

在本演练中,您生成一个应用程序栏测试应用程序。您在本演练中创建的应用程序能够测试不同的应用程序栏属性,如不透明度、颜色和模式。也可以在普通页面、Pivot 页面和全景页面上测试应用程序栏。

应用程序每个页面的用户界面都包含针对每个应用程序栏属性的单选按钮。当您单击单选按钮时,应用程序栏会动态更改,从而允许您测试不同的属性以及彼此之间的交互。有关更多信息,请参阅 Windows Phone 的应用程序栏概述

注意注意:

此应用程序的完整版本已可供下载。有关更多信息,请参阅 Windows Phone 的代码示例

在本演练中,您将执行下列任务。

  • 创建一个具有四个图标按钮和两个菜单项的应用程序栏。

  • 动态更改该应用程序栏的属性。

  • 为该应用程序栏单击事件创建处理程序。

  • 使用导航服务在应用程序的页面之间导航。

完整的应用程序如下所示。

完整的解决方案包含以下组件。

模拟器中的应用程序解决方案资源管理器中的文件

为了完成本演练,计算机上必须安装 Windows Phone SDK:有关更多信息,请参阅安装 Windows Phone SDK

首先,创建一个新的名为 AppBarTester 的 Windows Phone 应用程序项目。在后面的步骤中,您将向您的应用程序中添加代码,假定该应用程序名称为 AppBarTester。如果要为应用程序选择不同的名称,则必须更改代码中的命名空间引用。

创建应用程序项目的步骤

  1. 在 Visual Studio 中的“文件”菜单中,指向“新建”,然后单击“项目”

    将显示“新建项目”对话框。

  2. 在左窗格中,单击“已安装模板”,展开“Visual C#”“Visual Basic”,然后单击“Silverlight for Windows Phone”

  3. 在项目类型列表中,单击“Windows Phone 应用程序”

  4. “名称”框中键入 AppBarTester

  5. 单击“确定”

    将显示“新建 Windows Phone 应用程序”对话框。

  6. “Windows Phone 目标版本”下拉列表中,选择“Windows Phone 7.1”,然后单击“确定”

    将创建新的应用程序项目并在 Visual Studio 中打开。

该应用程序包含一个主页,该主页包含指向三个次要页面的链接。主页仅用于导航;三个次要页面是您测试应用程序栏的位置。在此过程中,您创建主页,添加三个次要页面,并设置导航。在后面的过程中,您向次要页面中添加应用程序栏。

创建主页的步骤

  1. “解决方案资源管理器”中,双击 MainPage.xaml 以在设计器中打开它。

  2. 在 XAML 代码中,找到名为 LayoutRoot 的 GRID 元素。将从此处到文件结尾的所有内容替换为以下代码。该代码创建三个指向次要页面的链接。

        <!--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="App Bar Tester" Style="{StaticResource PhoneTextNormalStyle}"/>
                <TextBlock x:Name="PageTitle" Text="main page" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
            </StackPanel>
    
            <StackPanel Grid.Row="1">
                <TextBlock Text="experiment with an Application Bar on different page types:" Margin="24" Style="{StaticResource PhoneTextLargeStyle}" TextWrapping="Wrap" />
    
                <HyperlinkButton Content="a plain page" Name="linkPlainPage" Margin="24" Click="linkPlainPage_Click" />
                <HyperlinkButton Content="a pivot page" Name="linkPivotPage" Margin="24" Click="linkPivotPage_Click" />
                <HyperlinkButton Content="a panorama page" Name="linkPanoramaPage" Margin="24" Click="linkPanoramaPage_Click" />
            </StackPanel>
        </Grid>
    </phone:PhoneApplicationPage>
    
  3. “解决方案资源管理器”中,右键单击 MainPage.xaml,然后单击“查看代码”以在代码编辑器中打开代码隐藏文件。

  4. MainPage 类的构造函数后面添加以下代码。该代码为三个链接创建单击事件处理程序。每个方法中的代码导航到相应的页面。在下面的过程中您将创建页面。

    private void linkPlainPage_Click(object sender, RoutedEventArgs e)
    {
        NavigationService.Navigate(new Uri("/PlainPage.xaml", UriKind.Relative));
    }
    
    private void linkPivotPage_Click(object sender, RoutedEventArgs e)
    {
        NavigationService.Navigate(new Uri("/PivotPage.xaml", UriKind.Relative));
    }
    
    private void linkPanoramaPage_Click(object sender, RoutedEventArgs e)
    {
        NavigationService.Navigate(new Uri("/PanoramaPage.xaml", UriKind.Relative));
    }
    

添加次要页面的步骤

  1. “解决方案资源管理器”中,右键单击该项目,指向“添加”,然后单击“新项”

    将显示“添加新项”对话框。

  2. 选择“Windows Phone 纵向页面”,输入名称 PlainPage.xaml,然后单击“添加”

  3. 重复步骤 1,选择“Windows Phone Pivot 页面”,输入名称 PivotPage.xaml,然后单击“添加”

  4. 重复步骤 1,选择“Windows Phone 全景页面”,输入名称 PanoramaPage.xaml,然后单击“添加”

在此过程中,您运行该应用程序以测试该应用程序结构和导航。

测试应用程序的步骤

  1. “文件”菜单上,单击“全部保存”。(Ctrl+Shift+S)

  2. “生成”(或 Visual Studio 2010 Express for Windows® Phone 7.1 中的“调试”菜单)上,单击“生成解决方案”。(Ctrl+Shift+B)

  3. 在标准工具栏上,将应用程序的部署目标设置为“Windows Phone 模拟器”

    选择模拟器的标准工具栏上的目标

  4. “调试”菜单上,单击“启动调试”。(F5)

    此应用程序会在模拟器中启动,并且显示主页面。

  5. 点按第一个链接并验证您是否导航到正确的页面。

  6. “返回”按键返回主页。

  7. 测试其他两个链接并验证它们是否导航到正确的页面。

  8. “调试”菜单上,单击“停止调试”。(F5)

在此过程中,您向应用程序中添加四个图像文件,以用作应用程序栏按钮图标。图像文件是随 Windows Phone SDK 一起安装的标准图标集的一部分。有关更多信息,请参阅 Windows Phone 的应用程序栏图标按钮

向应用程序中添加图标按钮图像的步骤

  1. “解决方案资源管理器”中,右键单击项目,指向“添加”,然后单击“新文件夹”

  2. 将该文件夹命名为 Images

  3. “解决方案资源管理器”中,右键单击文件夹 Images,指向“添加”,然后单击“现有项”

    将显示“添加现有项”对话框。

  4. 浏览下列位置之一并找到标准图标:

    C:\Program Files\Microsoft SDKs\Windows Phone\v7.1\Icons\dark

    C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.1\Icons\dark

  5. 选择以下所有文件,然后单击“添加”

    • appbar.delete.rest.png

    • appbar.feature.settings.rest.png

    • appbar.questionmark.rest.png

    • appbar.save.rest.png

  6. “解决方案资源管理器”中,选择所有四个新文件。

  7. “属性”窗口中,为新文件设置下列属性。

    属性

    生成操作

    内容

    复制到输出目录

    如果较新则复制

    警告说明警告:

    “生成操作”必须设置为“内容”才能将图标用作按钮图像。

  8. 根据下表中的信息重命名文件。

    旧名称

    新名称

    appbar.delete.rest.png

    delete.png

    appbar.feature.settings.rest.png

    settings.png

    appbar.questionmark.rest.png

    help.png

    appbar.save.rest.png

    save.png

显示: