Windows Phone 的全景控件体系结构

2012/2/9

全景体验包括一个 Panorama 控件以及一个或多个 PanoramaItem 控件。Panorama 控件可用作应用程序的基础,而 PanoramaItem 控件可托管个别内容部分。根据应用程序的要求,您可以向 Panorama 控件表面添加多个 PanoramaItem 控件,每个控件提供不同的功能。例如,一个 PanoramaItem 可能包含一系列链接和控件,而另一个是缩略图图像的存储库。用户可以使用 Panorama 应用程序已提供的手势支持在这些部分之间来回平移。本主题详细介绍 Panorama 控件和 PanoramaItem 控件的体系结构以及具体分析。

 

AP_CoreCon_PanoAnatomyCon

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

  • 背景

  • 标题

类型

说明

背景

PanningBackgroundLayer

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

标题

PanningTitleLayer

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

PanningLayer

显示 PanoramaItem 控件的层。

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

背景层

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

您可以应用以下画笔:

  • SolidColorBrush:对背景应用一种颜色。

  • ImageBrush:对背景应用图像。

  • GradientBrush:可以对背景使用线性或径向画笔。

所有背景画笔都将被垂直拉伸以填充 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 控件视图。

显示: