Windows Phone Developer Tools RTW new feature-panorama Control

I practiced the ghost control yesterday. Today, I am playing a hot role to continue to look at the new feature-panorama control added to Windows Phone Developer Tools RTW. For details about the panorama control, refer to the "Panorama Control for Windows Phone" document on msdn. You can also browse the Chinese version of wpmind: the first version of Windows Phone 7 UI design and human-computer interaction guide. The second version of PDF files can be downloaded here: UI design and interaction guide for Windows Phone 7 V2.0.

Introduction to the panorama Control

The panoramic view is part of the core Windows Phone 7 experience. Standard applications are limited by cell phone screen limitations. Unlike standard applications, the panoramic view application uses a long horizontal canvas that is beyond the limits of the mobile phone screen to provide a unique way to browse controls, data, and services. These internal dynamic applications use layered animations and content to achieve smooth transition between layers at different speeds, which is similar to the parallax effect. Currently, no panoramic application template or control is provided as part of the standard application platform. However, developers can use Silverlight to create similar application experiences.

The user interface of a panoramic application consists of four layers: the background image, the panoramic title, the panoramic area, and the panoramic area title. They have their own action logic.

Background Image

The background image is located at the bottom of the panoramic application to give a magazine-like experience. A background image is usually a panorama, which may be the most intuitive part of an application. To create a good application experience, we must remember the following factors during the design process:

• Uses a monochrome background or a span to display a panoramic image. If you decide to use images, you may use JPG images based on the size, but any UI image types supported by Silverlight are acceptable.
• You can use multiple images as the background, but only one of them can be displayed at any time.
• To ensure good program performance, the minimum loading time and no cropping are required, the image size should be 800x480 and 800x1024 pixels (high x width.
• For an application with four panoramic areas, use a 16x9 screen aspect ratio.
• To improve text readability, use a transparent black or white filter.
• Do not use drop-down shadow effects on dynamic UI elements ).
• Use a certain proportion of the actions related to the panning gesture. The width of the panning gesture and the top-layer content is related to the width ratio of the background image.
• Animation is used only when background art appears in an application.
• When your pan gesture exceeds the image width, It is disabled and the visible area is returned.

Panorama title)

The panoramic title is the title of the whole panoramic application. The purpose is to allow the user to identify the application. It must be visible no matter how it enters the application. The following are the design suggestions for the panoramic title:

• Use concise text or images, such as a logo as a panoramic title. It is acceptable to use multiple UI elements, such as a logo and text (or other UI elements.
• Make sure that the font or image color matches the entire background, and the title visibility does not depend on the background image.
• To maintain a consistent experience, the application name in the Start menu is consistent with the title.
• Avoid title animation or dynamically change the title Font.
• Using a certain proportion of actions is slower than the top-level content, but faster than the bottom-layer image.
• When your pan gesture exceeds the image width, It is disabled and the visible area is returned.

Panoramic area (Panorama sections)

A panoramic area is an integral part of a panoramic application. It encapsulates other controls and content. The following are the design suggestions for the panoramic area:

• Maximize the use of four panoramic areas to ensure smooth performance of panoramic applications.
• It is acceptable to use vertical scrolling in the list or grid, provided that it is in the panoramic area and does not appear simultaneously with horizontal scrolling.
• Vertical scrolling is acceptable as long as the width of the panoramic area is smaller than the screen width.
• All custom and standard controls are supported.
• The ratio is the same as that of the drag-and-drop finger.
• Enable screen animation when the user directs to a new area.
• Design the layout of the panoramic area to make a small number of next panoramic areas visible. A slight overlap is provided, allowing users to intuitively use the pan gesture to switch applications.
• The panoramic area is displayed only when there is content to be expressed in the panoramic area.

Panorama section titles)

The title of the panoramic area is an optional part of the panoramic area. If you provide a title, consider the following design suggestions:

• Although images can be used, it is best to use concise text. It is also possible to use multiple elements, such as an image and text (or other UI elements.
• Make sure that the title of the panoramic area does not depend on the background image.
• Avoid title animation because titles can be moved.
• Spans the entire area, even if multiple controls exist.
• Enable screen animation when the user directs to a new area.

Panorama control practices

1. Enable Visual Studio 2010 express for Windows Phone, create a C # project, and select the Windows Phone application template named panoramademo.

2. Add a new project to the project. Select Windows Phone panorama page and name it panoramapage1.xaml, as shown in:

3. InMainpage. XAMLFile, which isContentpanelAdd a new element. The Code is as follows:

<Hyperlinkbutton content = "Panorama application example" Height = "57" horizontalalignment = "Left" margin = "49,116, 383 "name =" hyperlinkbutton1 "verticalignment =" TOP "width =" "navigateuri ="/panoramapage1.xaml "/>

4. Add a new panoramaitem to the panoramage1.xaml file. The Code is as follows:

<! -- Panorama item three. -->
<Controls: panoramaitem header = "item3">
<GRID/>
</Controls: panoramaitem>

5. Add a background image for Panorama. The Code is as follows:

<! -- Assigns a background image to the panorama control. -->
<Controls: panorama. Background>
<Imagebrush imagesource = "samplephoto.jpg"/>
</Controls: panorama. Background>

6. add controls and content for Panorama item. Add textblock control for the first panoramaitem. The Code is as follows:

<Grid>
<! -- This Code creates two textblock controls and places them in a stackpanel control. -->
<Stackpanel>
<Textblock
TEXT = "this is a text added to the first panorama item control"
Style = "{staticresource phonetextlargestyle }"
Textwrapping = "Wrap"/>
<Textblock text = ""/>
<Textblock
TEXT = "You can put any content you want here ..."
Style = "{staticresource phonetextlargestyle }"
Textwrapping = "Wrap"/>
</Stackpanel>
</GRID>

Add text for the second panoramaitem and set the direction to horizontal. The Code is as follows:

<Controls: panoramaitem
Header = "item2"
Orientation = "horizontal">

<! -- Assigns a border to the panoramaitem control and background for the content section. -->
<Grid>
<Border
Borderbrush = "{staticresource phoneforegroundbrush }"
Borderthickness = "{staticresource phoneborderthickness }"
Background = "#80808080">
<Textblock
TEXT = "This content is very wide and can be panned horizontally ."
Style = "{staticresource phonetextextralargestyle }"
Horizontalalignment = "center"
Verticalalignment = "center">
</Textblock>
</Border>
</GRID>

Add ListBox to the third panoramaitem and write some strings to it. Vertical scrolling is supported. The Code is as follows:

<! -- This Code adds a series of string text values. -->
<Grid>
<ListBox fontsize = "{staticresource phonefontsizelarge}">
<SYS: String> This </sys: String>
<SYS: String> item </sys: String>
<SYS: String> has </sys: String>
<SYS: String> A </sys: String>
<SYS: String> short </sys: String>
<SYS: String> List </sys: String>
<SYS: String> of </sys: String>
<SYS: String> strings </sys: String>
<SYS: String> that </sys: String>
<SYS: String> You </sys: String>
<SYS: String> can </sys: String>
<SYS: String> scroll </sys: String>
<SYS: String> up </sys: String>
<SYS: String> and </sys: String>
<SYS: String> down </sys: String>
<SYS: String> and </sys: String>
<SYS: String> back </sys: String>
<SYS: String> again. </sys: String>
</ListBox>
</GRID>

In addition, to enable the ListBox control to support multiline strings, you must add references:

Xmlns: SYS = "CLR-namespace: system; Assembly = mscorlib"

7. Compile the code and debug the simulator, as shown in:

Attached source code: panoramademo.rar

Video demo address: http://v.youku.com/v_show/id_XMjA4MTk3NDQ0.html

 

Reference link:

Panorama Control for Windows Phone

First version of Windows Phone 7 UI design and human-computer interaction Guide

UI design and interaction guide for Windows Phone 7 V2.0