Panorama Anatomy

,

The Panorama is composed of three layers:

Image Background layer

Image Title layer

Image Items layer

Each layer is contained within a Grid control that serves as the layout root for the Panorama control (see Figure 11.8).

Image

FIGURE 11.8 The Panorama control anatomy.

Background Layer

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.


Note

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.


Title Layer

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.


Items Layer

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.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.118.126.248