WP8.1学习系列(第十二章)——全景控件Panorama开发指南

2014/6/18

 

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

全景体验是本机 Windows Phone 外观的一部分。与旨在适合手机屏幕边界的标准应用不同，全景应用通过使用超出屏幕边界的长水平画布提供了一个查看控件、数据和服务的独特方式。这些固有的动态视图使用分层动画和内容，以便各层以不同的速度流畅地平移，类似于视差效果。

 

本主题包括以下部分。

在应用的底部是 Panorama 控件，该控件本质上是一个较长的水平画布。一个名为 PanoramaItem 的次要控件充当托管其他内容和控件（如链接、网格和列表）的容器。有关全景控件体系结构的详细信息，请参阅Windows Phone 8 的全景控件体系结构。

全景应用的内容可能因以下内容而异：

  • 前后随意浏览，其中鼓励用户采用非任务定向的方式浏览内容。

  • 数据更密集的信息中心，用户可以在其中实现更有意识的目标，如查找特定联系人或要玩的游戏。

人脉中心和图片中心演示了全景应用的外观。

OEM_OemMoAppDevGuide_PeoplePan

 

OEM_OemMoAppDevGuide_PictPan

Windows Phone 全景体验提供对触摸交互和导航的内置支持。因为默认情况下已经启用了手势功能，所以您不必在应用中实施任何特殊的手势功能。全景体验支持以下手势和导航效果：

  • 水平移动（点击并向左/向右拖动）

  • 水平轻拂（点击并向左/向右快速滑动）

  • 导航托管的控件 - 例如，可以点击链接，可以滚动列表

下图演示了当控件从左向右滚动时典型 Panorama 控件的响应方式。

OEM_OemMoAppDevGuide_PanoHorizScrollLeft

全景一直向左滚动

 

OEM_OemMoAppDevGuide_PanoHorizScrollCenter

全景在中心附近滚动

 

OEM_OemMoAppDevGuide_PanoHorizScrollRight

全景一直向右滚动

注意：

在上图中，当您位于特殊的内容部分中时，您将拥有在屏幕上可以看见的下一部分的 24 像素预览。这充当可提供其他内容的某个类型的可视提示。

下表列出了在全景应用中所支持的一系列功能。

 

功能

描述

设计时体验

全景应用将提供添加了一个根 Panorama 控件和多个 PanoramaItem 控件的默认体验。您可以使用 Visual Studio 或 Blend for Visual Studio 中的设计图面执行诸如添加其他 PanoramaItem 控件和在项视图之间切换之类的操作。

匹配 Windows Phone 全景体验

您应用的外观和反应可能与集成的 Windows Phone 全景体验相似。

内置的轻拂和手势支持

全景应用已提供对常见导航的手势支持。您不必在您的应用中实现诸如拖动、轻拂或点击之类的手势。

在运行时隐藏和显示全景项

基于大量方案，可以通过将其 Visibility 属性设置为 Collapsed 来隐藏全景项。例如，在填充内容之前，您可以决定隐藏 PanoramaItem 控件。

在运行时添加和删除全景项

可以采用编程方式在全景控件中添加和删除 PanoramaItem 控件。

2014/6/18

 

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

全景体验包括一个 Panorama 控件以及一个或多个 PanoramaItem 控件。Panorama 控件用作应用的基础，PanoramaItem 控件托管各个内容部分。 基于应用的要求，您可以将多个 PanoramaItem 控件添加到Panorama 控件表面，其中每一个都提供一种具有独特目的的功能。例如，一个 PanoramaItem 可能包含一系列链接和控件，而另一个则是缩略图图像的储存库。用户可以使用 Panorama 应用已提供的手势支持在这些部分之间来回平移。本主题详细介绍 Panorama 控件和 PanoramaItem 控件的体系结构以及具体分析。

 

AP_CoreCon_PanoAnatomyCon

 

本主题包括以下部分。

Panorama 控件是用于全景应用的基础控件，包含三个不同的层。每个层都包含在用作 Panorama 控件的布局根的 Grid 控件中。

 

层

类型

描述

背景

PanningBackgroundLayer

用于显示背景和设置背景动画的面板。

标题

PanningTitleLayer

用于显示标题和设置标题动画的面板。

项

PanningLayer

显示 PanoramaItem 控件的层。

在任何层上执行拖动或平移将导致您应用中的所有三个层一起移动。

背景层

背景层是使用 Panorama 控件上的 Background 属性设置的。不应该将全景控件的 Background 设置为 null。如果设置为 null，则手势响应将不可靠。在默认模板中，Background 在默认情况下设置为Transparent。

您可以应用以下画笔：

所有背景画笔都将被垂直拉伸以填充 Panorama 控件的高度。ImageBrush 将保留 ImageSource 的宽度，GradientBrush 将被拉伸以填充各项的宽度。

重要说明：

如果某个 Panorama 控件使用图像作为背景，则它的“生成操作”应该设置为“资源”；否则，当第一次显示应用时该控件不会立即显示。将“生成操作”设置为“内容”将导致它异步加载。

标题层

该层是全景应用的标题并且它是在 Panorama 控件的 Title 属性中设置的。无论内容大小是否过大还是缺少内容，该层使用的垂直高度都不变。 当您平移经过内容的边缘时，该层也不会重复自己。在选择在PanoramaItem 控件之间更改期间，该层采用动画的形式在之前移动的方向脱离视图并从屏幕的另一侧回到场景。

注意：

如果您从标题中删除文本，则填充将仍然留在该控件上。您可以修订模板标题以占用所需的任意空间。但是，这将不符合 Windows Phone 设计准则。

项层

项层是将包含 PanoramaItem 控件的层。这是用户在应用中主要交互的层。该层通过平移手势采用 1:1 的方式移动，因此从平移开始到手指抬起，手指下的内容保持不变。

PanoramaItem 控件是添加到 Panorama 控件的内容的各个部分。Panorama 控件可以支持多个PanoramaItem 控件并且用户可以使用支持的触摸手势浏览这些部分。PanoramaItem 控件自身由两个元素组成。每个元素都包含在用作 PanoramaItem 控件的布局根的 Grid 中。

 

元素

类型

描述

标题

ContentControl

用于显示标题和设置标题动画的 ContentControl。此标题可选。如果未指定，则不应该为了节省空间而进行折叠。

内容

ContentPresenter

显示 PanoramaItem 内容的 ContentPresenter。

可以在 XAML 代码中指定 PanoramaItem 控件的内容，也可以采用编程方式通过 Content 属性添加该控件的内容。

PanoramaItem 控件既支持水平方向，也支持垂直方向。下面是这些方向的特征：

  • PanoramaItem 控件的垂直方向在手势移动期间将只能对齐到屏幕的左侧。

  • PanoramaItem 控件的水平方向在手势移动期间将能够对齐到屏幕的左侧和右侧。

  • 将 PanoramaItem 控件设置为水平方向将允许在屏幕外放置内容，而不是裁剪内容。

  • 与垂直方向不同，水平方向将允许用户在内容中心平移，但不对齐到新的 PanoramaItem 控件视图   

    如何为 Windows Phone 8 创建全景应用

     

    2014/6/18

     

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

     

    Visual Studio 中有多种方式可以在 Windows Phone 中创建全景体验。

    • 创建新项目时，可以使用名为“Windows Phone 全景应用”的自定义模板。该模板将预填充内容，您可以相应地修改该模板。

    • 在 Visual Studio 中，可以向工具箱中添加 Panorama 控件并将其拖放到您的项目中。

    • 您可以向现有的项目添加 Windows Phone 全景页面。

    本主题将向您演示如何通过向现有的项目添加 Windows Phone 全景页面来创建全景应用。有关全景示例，请参见 Windows Phone 开发人员中心的示例库。

     

    本主题包括以下部分。

     

    在本节中，您将在 Visual Studio 中创建一个全景应用并添加三个 PanoramaItem 控件。此过程将向您的项目中添加一个 Windows Phone 全景页面，该页面预填充一个 Panorama 控件和一些 PanoramaItem 控件。 您将另外添加一个 PanoramaItem 并对 Panorama 控件应用背景图像。

    创建基本全景应用

    1. 从“开始”菜单启动 Visual Studio。

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

    3. 将显示“新建项目”窗口。展开“Visual C#”模板，然后选择“Windows Phone”模板。

    4. 选择 Windows Phone 应用  模板。填写所需的项目“名称”。

    5. 单击“确定”。将创建一个新项目并在 Visual Studio 设计器窗口中打开 MainPage.xaml。

    6. 在“解决方案资源浏览器”中，右键单击该项目，单击“添加”，然后单击“新建项”。选择“Windows Phone 全景页面”，然后单击页面底部的“添加”。 对该项目使用默认名称 PanoramaPage1.xaml。

    7. 在 MainPage.xaml 中，向名为 ContentPanel 的网格中的 XAML 代码中添加以下代码：

      XAML
       
      <HyperlinkButton Content="Panorama Application Example" Height="57" 
HorizontalAlignment="Left" Margin="49,116,0,0" Name="hyperlinkButton1" 
VerticalAlignment="Top" Width="383" NavigateUri="/PanoramaPage1.xaml"/>

      创建此超级链接的目的是为您的应用创建一个起点。在应用程序运行时，用户将点按此超级链接以前移到此全景体验。您不必使用超级链接作为全景应用的默认条目机制；超级链接仅用作本练习中使用的一个示例。可以将全景体验配置为当用户启动应用时立即可见。

    8. 在 PanoramaPage1.xaml 中，XAML 代码中的以下代码应该可见：

      XAML
       
         <!--LayoutRoot contains the root grid where all other page content is placed.-->
    <Grid x:Name="LayoutRoot">
        <controls:Panorama Title="my application">

            <!--Panorama item one-->
            <controls:PanoramaItem Header="item1">
                <Grid/>
            </controls:PanoramaItem>

            <!--Panorama item two-->
            <controls:PanoramaItem Header="item2">
                <Grid/>
            </controls:PanoramaItem>
        </controls:Panorama>
    </Grid>

      前面的代码将创建一个 Panorama 控件并为其分配一个标题。接下来，您将创建两个 PanoramaItem 控件，每个控件分配一个标头。对于此项目，我们将创建三个 PanoramaItem 控件，在下一步中将再创建一个PanoramaItem。

    9. 在 <!--Panorama item two-- >部分后面，向以下代码中再添加一个 PanoramaItem 控件：

      XAML
       
      <!--Panorama item three.-->
       <controls:PanoramaItem Header="item3">
           <Grid/>
      </controls:PanoramaItem>

    下图演示了基本的全景控件并且 PanoramaItem 控件应该出现在此阶段的练习中：

    AP_CoreCon_PanoBase

    在本节中，您将对 Panorama 控件应用图像。对于本主题，使用示例图像 samplePhoto.jpg。在应用中使用大小适当的图像。背景图像应当在 480 x 800 像素和 1024 x 800 像素（宽 x 高）之间，以确保较高的性能、最少的加载时间，以及不需要缩放处理。如果您的图像高度不为 800 像素，则将其拉伸到该高度，而不保持纵横比。

    设置背景图像

    • 向 Panorama 控件代码（ <controls:Panorama Title="my application">）后面的 XAML 代码中添加以下代码：

      XAML
       
      <!--Assigns a background image to the Panorama control.-->
     <controls:Panorama.Background>
        <ImageBrush ImageSource="samplePhoto.jpg"/>
     </controls:Panorama.Background>

      或者，您也可以在代码隐藏文件或页面中采用编程方式更改控件的 Background。向代码隐藏文件添加System.Windows.Media.Imaging 命名空间的 using 指令。若要采用编程方式更改 Background，请向页面构造函数、一个 OnNavigatedTo 重写或者代码中要设置 Panorama 控件的 Background 的某个其他位置添加以下代码。该代码假定您拥有名为 Panorama 的控件 PanoControl。

      C#
       
      BitmapImage bitmapImage = new BitmapImage(new Uri(“samplePhoto.jpg”,UriKind.Relative));
ImageBrush imageBrush = new ImageBrush();
imageBrush.ImageSource = bitmapImage;
PanoControl.Background = imageBrush;

    在本节中，您将向每个 PanoramaItem 控件中添加各种控件和内容。您还将第二个 PanoramaItem 方向翻转为水平，这样便提供了此内容的唯一视角。例如，内容部分将扩展超出屏幕并且用户必须平移才能展示它的其余部分。

    向第一个 PanoramaItem 添加内容

    对于第一个 PanoramaItem，您将添加一对包含换行文本的 TextBlock 控件。 这两个控件都将放置在一个StackPanel 控件中。这是如何显示 PanoramaItem 控件中内容的一个简单演示。

    向第一个 PanoramaItem 中添加内容

    • 向第一个 PanoramaItem（<controls:PanoramaItem Header="item1">）后面的 XAML 代码添加以下代码。您必须首先删除现有的 <Grid/> 标记。

      XAML
       
               <Grid>
         <!--This code creates two TextBlock controls and places them in a StackPanel control.-->
            <StackPanel>
                <TextBlock
                    Text="This is a text added to the first panorama item control"
                    Style="{StaticResource PhoneTextLargeStyle}"
                    TextWrapping="Wrap"/>
                <TextBlock Text=" "/>
                <TextBlock
                    Text="You can put any content you want here..."
                    Style="{StaticResource PhoneTextLargeStyle}"
                    TextWrapping="Wrap"/>
            </StackPanel>
         </Grid>

      第一个 PanoramaItem 应该类似于本主题底部所示的插图。

    向第二个 PanoramaItem 添加内容

    在本节中，您将 PanoramaItem 控件的方向更改为水平。所得到的效果就是内容超出了屏幕并且用户必须水平平移才能展示其余内容。

    更改第二个 PanoramaItem 的方向

    向第二个 PanoramaItem 中添加内容

    • 向第二个 PanoramaItem（<controls:PanoramaItem Header="item2" Orientation=”Horizontal”>）后面的 XAML 代码添加以下代码。您必须首先删除现有的 <Grid/> 标记。

      XAML
       
         <!--Assigns a border to the PanoramaItem control and background for the content section.-->
        <Grid>
            <Border
                BorderBrush="{StaticResource PhoneForegroundBrush}"
                BorderThickness="{StaticResource PhoneBorderThickness}"
                Background="#80808080">
                
                <TextBlock
                    Text="This content is very wide and can be panned horizontally."
                    Style="{StaticResource PhoneTextExtraLargeStyle}"
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center" >                  
                </TextBlock>
                    
            </Border>
         </Grid>

      第二个 PanoramaItem 应该类似于本主题底部所示的插图。

    向第三个 PanoramaItem 添加内容

    对于最后一个 PanoramaItem，您将在 ListBox 控件内放置一系列字符串文本值。目的是表明您能够导航托管的控件。用户将能够上下垂直平移列表内容。

    向第三个 PanoramaItem 中添加内容

    1. 在 PanoramaPage1.xaml 中，在 XAML 代码中添加以下命名空间声明：

      XAML
       
      xmlns:sys="clr-namespace:System;assembly=mscorlib"
      注意：

      引用此程序集是向 ListBox 控件中添加多行字符串文本。

    2. 向第三个 PanoramaItem（<controls:PanoramaItem Header="item3">）后面的 XAML 代码添加以下代码。您必须首先删除现有的 <Grid/> 标记。

      XAML
       
      <!--This code adds a series of string text values.-->
<Grid>
            <ListBox FontSize="{StaticResource PhoneFontSizeLarge}">
                <sys:String>This</sys:String>
                <sys:String>item</sys:String>
                <sys:String>has</sys:String>
                <sys:String>a</sys:String>
                <sys:String>short</sys:String>
                <sys:String>list</sys:String>
                <sys:String>of</sys:String>
                <sys:String>strings</sys:String>
                <sys:String>that</sys:String>
                <sys:String>you</sys:String>
                <sys:String>can</sys:String>
                <sys:String>scroll</sys:String>
                <sys:String>up</sys:String>
                <sys:String>and</sys:String>
                <sys:String>down</sys:String>
                <sys:String>and</sys:String>
                <sys:String>back</sys:String>
                <sys:String>again.</sys:String>         
            </ListBox>
</Grid>

      第三个 PanoramaItem 应该类似于本主题底部所示的插图。

    3. 通过选择“调试” | “启动调试”菜单命令运行应用。这将打开模拟器窗口并启动该应用，或者部署到您选择的设备。

      AP_CoreCon_PanoFinish
posted @ 2015-02-02 23:07  bvin  阅读(480)  评论(0)  编辑  收藏  举报