The Panorama
is composed of three layers:
Background layer
Title layer
Items layer
Each layer is contained within a Grid
control that serves as the layout root for the Panorama
control (see Figure 11.8).
The background represents the bottom layer of the Panorama
, with sections sitting above. The background layer is represented by a PanningBackgroundLayer
within the Panorama
class. This layer is set with the Background
property on the Panorama
control.
You can set the background of the Panorama
to an image using an ImageBrush
. Alternatively, a color or gradient can be used by assigning the Background
property to a SolidColorBrush
or GradientBrush
.
Note
You should not set a Panorama
control’s Background
to null. If it is set to null, gesture response is unreliable. The Background
is set to Transparent by default in the default template.
The background is stretched vertically to fill the height of the Panorama
. The ImageBrush
retains the width of the ImageSource
, and the GradientBrush
is stretched to fill the width of the items.
The default template for the Panorama
uses bitmap caching for the Panorama
’s Background
property. Clipping occurs for UI elements with bitmap caching enabled if they exceed 2000 by 2000 pixels. Therefore, restrict the size of your background image to less than this size.
Bitmap caching helps to improve performance by storing visual elements as bitmaps after the first time they are rendered. After an element has been cached as a bitmap, it no longer needs to be included as part of the render phase when the UI refreshes. This means less processing needs to be done, because just the cached bitmap is rendered. Cached bitmaps can take advantage of hardware acceleration using the phone’s GPU, which has the potential of yielding significant performance improvements in some situations.
Tip
Avoid positioning the background according to the content position. The Panorama
title moves at a different rate than its section titles, as the user moves across the Panorama
.
The title layer is represented by a PanningTitleLayer
within the Panorama
class. This layer presents the title of the app and is assigned using the Panorama.Title
property.
The Panorama Title
can be specified as text; however, there is also a TitleTemplate
property, which allows you to completely customize the appearance of the Title
.
The vertical height of this layer remains constant and is unaffected by oversized content or the absence of content. The layer does not wrap back on itself but rather animates back to the starting position when you pan past the final section.
Best Practice
Avoid animating the Panorama
title or dynamically changing its size after it has loaded. Doing so can interfere with the Panorama
’s built-in animations.
The items layer is represented by a PanningLayer
within the Panorama
class. This layer contains the content of the PanoramaItem
controls. A pan gesture causes this layer to move at the same rate. Therefore, the content beneath the finger at the beginning of the pan gesture remains beneath the finger until the finger leaves the display.
18.118.126.248