Panorama control architecture for Windows Phone 8
[ This article is for Windows Phone 8 developers. If you’re developing for Windows 10, see the latest documentation. ]
A panorama experience consists of a Panorama control and one or more PanoramaItem controls. The Panorama control serves as the base for the app, and the PanoramaItem controls host individual content sections. Based on the requirements of the app, you can add multiple PanoramaItem controls to the Panorama control surface with each offering distinct functional purpose. For example, one PanoramaItem may contain a series of links and controls while another is a repository for thumbnail images. A user can pan back and forth through these sections using the gesture support already provided by the panorama app. This topic will detail the architecture and anatomy of both the Panorama control and PanoramaItem control.
.png)
This topic contains the following sections.
- Panorama Control
- PanoramaItem Control
- Related Topics
Panorama Control
The Panorama control is the base control for a panorama app and comprises three different layers. Each layer is contained within a Grid control that serves as the layout root for the Panorama control.
Layer |
Type |
Description |
|---|---|---|
Background |
The panel that is used to display and animate the background. |
|
Title |
The panel that is used to display and animate the title. |
|
Items |
The layer that displays the PanoramaItem controls. |
A drag or pan performed on any layer will cause all three layers to move in unison in your app.
Background Layer
The background layer is set with the Background property on the Panorama control. You should not set a Panorama control’s Background to null. If it is set to null, gesture response will be unreliable. The Background is set to Transparent by default in the default template.
You can apply the following brushes:
SolidColorBrush – Applies a color to the background.
ImageBrush – Applies an image to the background.
GradientBrush – You can use either a linear or radial brush for the background.
All background brushes will be stretched vertically to fill the height of the Panorama control. The ImageBrush will retain the width of the ImageSource, and the GradientBrush will be stretched to fill the width of the items.
.gif "Important note") Important Note: |
|---|
If a Panorama control is using an image for the background, its Build Action should be set to Resource; otherwise, it will not appear immediately when the app is first displayed. Setting the Build Action to Content would cause it to be loaded asynchronously. |
Title Layer
This layer is the title of the panoramic app and it is set in the Panorama control Title property. The vertical height this layer consumes is constant regardless of whether there is oversized content or lack of content. The layer also does not repeat itself when you pan past the edges of the content. Instead, during a selection change between PanoramaItem controls, it animates out of view in the direction it was previously moving and animates back into the scene from the other side of the screen.
Note
If you remove the text from the title, the padding will remain on the control. You can revise the template title to take up as much space as you need. However, this would not be following the Windows Phone design guidelines.
Items Layer
The items layer is the layer that will contain the PanoramaItem controls. This is the layer that users will primarily interact with in the app. The layer moves in a 1:1 fashion with the pan gesture; so whatever content is beneath the finger at the beginning of the pan remains until the finger is lifted.
PanoramaItem Control
PanoramaItem controls are individual sections of content that are added to a Panorama control. A Panorama control can support multiple PanoramaItem controls and the user can navigate through these sections using supported touch gestures. The PanoramaItem control itself comprises two elements. Each element is contained within a Grid that serves as the layout root for the PanoramaItem control.
Elements |
Type |
Description |
|---|---|---|
Header |
The ContentControl that is used to display and animate the header. This header is optional. If it is not specified the space should not be reserved and collapsed. |
|
Content |
The ContentPresenter that displays the PanoramaItem content. |
The contents of a PanoramaItem control can either be specified in the XAML code or be added programmatically through its Content property.
PanoramaItem controls support both horizontal and vertical orientations. The following are characteristics of these orientations:
A vertical orientation for a PanoramaItem control will snap only to the left side of the screen during a gesture movement.
A horizontal orientation for a PanoramaItem control will snap to both the left and the right sides of the screen during a gesture movement.
Setting the PanoramaItem control to a horizontal orientation allows for the content to be placed off the screen instead of being clipped.
Unlike a vertical orientation, a horizontal orientation allows for a user to pan around the center contents without snapping to a new PanoramaItem control view.