此页面有用吗?
您对此内容的反馈非常重要。 请告诉我们您的想法。
更多反馈?
1500 个剩余字符
MSDN Library
信息
您所需的主题如下所示。但此主题未包含在此库中。

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

2014/6/18

适用于:Windows Phone 8 和 Windows Phone Silverlight 8.1 | Windows Phone OS 7.1

 

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

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

说明注意:

此应用的完整版本已可供下载。有关更多信息,请参见 Windows Phone 开发人员中心的示例库

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

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

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

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

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

完整的应用如下所示。

The app in the emulator

本主题包括以下部分。

 

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

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

创建应用项目的步骤

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

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

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

  3. 在应用类型列表中,单击 Windows Phone 应用 

  4. “名称”框中键入 AppBarTester

  5. 单击“确定”。

    将显示 Windows Phone 平台选择对话框。

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

    将创建新的应用项目并在 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. “生成”菜单上,单击“生成解决方案”。(Ctrl+Shift+B)

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

    Target on Standard Toolbar selecting emulator

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

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

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

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

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

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

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

向应用添加图标按钮图像

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

  2. 将该文件夹命名为 Images

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

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

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

    C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v8.0\Icons\dark

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

    • delete.png

    • feature.settings.png

    • questionmark.png

    • save.png

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

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

    属性

    生成操作

    内容

    复制到输出目录

    如果较新则复制

    警告说明警告:

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

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

    旧名称

    新名称

    delete.png

    delete.png

    feature.settings.png

    settings.png

    questionmark.png

    help.png

    save.png

    save.png

显示:
© 2015 Microsoft