Windows Phone 7 user experience-panorama do you understand?

Which of the following controls is the most popular among developers in Windows Phone 7? Not panorama. This is a good user experience. But ...... At present, there seems to be some abuse. Both in major forums and on marketplace, we have repeatedly bumped into the introduction and application of helloworld panorama, which is completely out of the box.

 

So today, let's talk about Panorama's novel usage and some things to be aware.

 

The biggest feature of panorama is its "Asynchronous sliding" background image. There is a sliding speed difference between the front content and the background image, which gives users a sense of spatial lag. However, the vast majority of application cases only implement the "double-layer" Panorama, that is, the background image of panorama is counted as the first layer, and the foreground content is counted as the second layer.

In this article, I will introduce"Layer 3"Panorama implementation method. An extra layer is provided, and the Space stereoscopy is enhanced a lot!

Let's take a look at the running results:

You are welcome to download the source code. You can experience it on a simulator or mobile phone and enjoy a more intuitive experience.

Download Code

 

The interface consists of three layers:

Level 1: Rainbow, small clouds, volcano, green waves;

Layer 2: medium clouds, blue waves;

Layer 3: large clouds, coconut trees, ApplicationsProgramData and content;

The above three layers produce relative displacement in the panorama Sliding Process, which brings the user a sense of attention and space.

How is it implemented? Take a look at the following and you will know:

 

Note:

In, layoutroot is the first grid control under the page root node (we usually generate a new phone page by default ). The background image size of this control should be 400x800 pixels (400x768 pixels if systemtray is displayed ). The background image is not moved.

The background image with panorama in the middle layer is horizontally displaced as it is dragged. Some of the image elements embedded in the top-level panoramaitem pages have the largest horizontal displacement speed and amplitude. In this way, the three layers of image elements become misaligned with the movement of the gesture, which will create a more obvious sense of attention.

How is it? It's actually quite easy.

 

For this usage, you also need to point out the following points:

1. The underlying background image (that is, the layoutroot background image) should adopt image resources in. jpg format. The reason is that the operating system of Windows Phone 7 has different decoding speeds for images of different formats, and the decoding of. jpg images is much faster than that of. PNG images. For more information, see http://msdn.microsoft.com/en-us/library/ff967560 (V = vs.92). aspx # bkmk_images

2. The first two layers of images should adopt. PNG format, because only. PNG format images support transparency. To make the three layers of images visible to users, the blank areas on the first two layers must be transparent.

 

In addition, here are some precautions for panorama:

1. the pagination (panoramaitem) in the panorama control should not exceed four, otherwise it will be very bad in both performance and appearance;

2. the initialization logic of panorama and runtime is different during loading. When a volume is loaded, only the first page to be displayed is initialized, while panorama initializes all pages. Therefore, even if the content of each page is completely consistent, the loading speed of panorama will be slower than that of snapshot. If a page contains a time-consuming initialization logic, the loading of panorama will be significantly affected. At this time, if you still insist on using panorama, you should consider the time-consuming logic for lagging processing.

For best practices on Panorama usage, see: http://msdn.microsoft.com/en-us/library/ff941107 (V = vs.92). aspx

 

Well, let's talk about panorama.

Thank you very much!