Windows phone7 Study Notes 13 -- panorama and workshop

Windows Phone provides the Panorama and ghost controls for users to switch the navigation mode horizontally to display pages with relatively relevant content. This article describes the two controls, including how to use them.

　1. What do panorama and ghost controls have in common?

(1) make the application easier to navigate and use, and present richer content
(2) You can easily use XAML and APIs to develop a wide range of UI applications.
(3) fully supports data binding and content, templates, and styles.
(4) automatically supports system topics
(5) touch events with built-in group navigation, such as flick and pan
(6) animated effects with built-in sliding (animations)
(7) When the last item continues to be translated, it will automatically return to the first item

 

2,Panorama Control

The panorama control is used to display relevant content on a very long horizontal panel. content outside the screen can be pushed to the screen in turn, and can be switched by sliding left and right. When you see an element, you can display the content of the next screen on the right side of the screen, so that you can know that there is still content on the next screen of the current screen. When the last screen of the content is viewed and the switch continues, the first screen is returned. In addition, the panorama control has built-in touch and navigation functions. Generally, these functions are sufficient and basically do not need to be used to implement special gesture functions.

(1) Panorama is widely used in Windows phones, such as people, music + video, and Office Hub.
(2) having a basemap larger than the screen size
(3) users can select different information by tapping and moving.
(4) When presenting the current item, it also displays a part of the information next to the item
(5) A maximum of four items are recommended.

　　

 

Example:

<! -- Layoutroot is the root mesh that contains all page content -->
<Grid X: Name = "layoutroot" background = "Transparent">

<! -- Panorama control -->
<Controls: panorama Title = "waiter">
<Controls: panorama. Background>
<Imagebrush imagesource = "panorama.jpg" opacity = "0.5"/>
</Controls: panorama. Background>

<! -- Panorama project 1 -->
<Controls: panoramaitem header = "Learn">
<! -- Dual-line list with text surround -->
<ListBox margin = "0, 0,-12, 0" itemssource = "{binding items}">
<ListBox. itemtemplate>
<Datatemplate>
<Stackpanel margin = "432," width = "" Height = "78">
<Textblock text = "{binding lineone}" textwrapping = "Wrap" style = "{staticresource phonetextextralargestyle}"/>
<Textblock text = "{binding linetwo}" textwrapping = "Wrap" margin = "12,-6, 12, 0" style = "{staticresource phonetextsubtlestyle}"/>
</Stackpanel>
</Datatemplate>
</ListBox. itemtemplate>
</ListBox>
</Controls: panoramaitem>

<! -- Panorama project 2 -->
<! -- Use orientation = "horizontal" to place the Panel horizontally -->
<Controls: panoramaitem header = "play">
<! -- Dual-line list with image placeholders and text surround -->
<ListBox margin = "0, 0,-12, 0">
<Stackpanel orientation = "horizontal" margin = ",">
<Image Height = "100" width = "100" Source = "icons/tictactoe.png" margin = ","/>
<Stackpanel width = "311">
<Textblock text = "tic tac toe" textwrapping = "Wrap" style = "{staticresource phonetextextralargestyle}"/>
<Textblock text = "the classic two player game" textwrapping = "Wrap" margin = "12,-6, 12, 0" style = "{staticresource phonetextsubtlestyle}"/>
</Stackpanel>
</Stackpanel>
<Stackpanel orientation = "horizontal" margin = ",">
<Image Height = "100" width = "100" Source = "icons/numbers.png" margin = ","/>
<Stackpanel width = "311">
<Textblock text = "Numbers" textwrapping = "Wrap" style = "{staticresource phonetextextralargestyle}"/>
<Textblock text = "Learn your digits from 1-20" textwrapping = "Wrap" margin = "12,-6, 12, 0" style = "{staticresource phonetextsubtlestyle}"/>
</Stackpanel>
</Stackpanel>
<Stackpanel orientation = "horizontal" margin = ",">
<Image Height = "100" width = "100" Source = "icons/wordsearch.png" margin = ","/>
<Stackpanel width = "311">
<Textblock text = "word search" textwrapping = "Wrap" style = "{staticresource phonetextextralargestyle}"/>
<Textblock text = "find as your words as you can" textwrapping = "Wrap" margin = "12,-6, 12, 0" style = "{staticresource phonetextsubtlestyle}"/>
</Stackpanel>
</Stackpanel>
<Stackpanel orientation = "horizontal" margin = ",">
<Image Height = "100" width = "100" Source = "icons/animals.png" margin = ","/>
<Stackpanel width = "311">
<Textblock text = "Animals" textwrapping = "Wrap" style = "{staticresource phonetextextralargestyle}"/>
<Textblock text = "hear and learn your favorites" textwrapping = "Wrap" margin = "12,-6, 12, 0" style = "{staticresource phonetextsubtlestyle}"/>
</Stackpanel>
</Stackpanel>
<Stackpanel orientation = "horizontal" margin = ",">
<Image Height = "100" width = "100" Source = "icons/alphabet.png" margin = ","/>
<Stackpanel width = "311">
<Textblock text = "Alphabet" textwrapping = "Wrap" style = "{staticresource phonetextextralargestyle}"/>
<Textblock text = "Learn your letters" textwrapping = "Wrap" margin = "12,-6, 12, 0" style = "{staticresource phonetextsubtlestyle}"/>
</Stackpanel>
</Stackpanel>
</ListBox>
</Controls: panoramaitem>

<! -- Panorama project 3 -->
<Controls: panoramaitem header = "all">

</Controls: panoramaitem>
</Controls: panorama>
</GRID>

 

　　2. Pivot Control)

The datasets control is used to filter a large number of datasets, view them in different views, or switch different views for the same data. The keyboard control is similar to the tab control, but it is specially designed for Windows Phone and touch interface. It allows users to navigate back and forth using the built-in touch function through horizontal switching between views. You can regard the volume control as an effective control that can provide users with different "layers" of the same data. They present the same data, but are in two completely different views. Another application of the pivot control is to classify projects.

(1) The same data source is presented in different forms, such as calendarhub
(2) filter and present a data source by category, for example, emailhub
(3) instead of the original tab control, organize information of a large category, such as system settings
(4) The content is optimized and only displayed on one screen
(5) a maximum of 7 items are recommended.

 

　　3. panorma PK renew

Panorama
(1) richer User Experience
(2) item can set the screen direction to horizontal and support display of one additional Screen
(3) background images of any size can be used, and panorama automatically scales to fit the size.
(4) do not use application bar
Bytes
(1) Items that support more data volumes. Note that a maximum of 7 data records are recommended.
(2) Use more space to present data
(3) It is easier to operate using code. For example, selectedindex and selecteditem can be used for callback, but not panorama.
(4) The application bar can be used.

 

　　4. Which one is used?

(1) Whether application bar is required
(2) whether to use a large background image
(3) What content is presented and what is the relationship between content gradually?
(4) A total of several items
(5) The program is mainly for commercial use or entertainment

 

　　5. Suggestions

　　Panorama

(1) try to control the number of panoramaitems up to four.

(2) Unless the panoramaitems displays content, it is best to set the visibility attribute to collapsed to hide it.

(3) set the orientation attribute to horizontal so that panoramaitems can display content that is wider than the screen boundary.

(4) use the appropriate background image size. The recommended size is 800 pixels in height and the width is less than 2000 pixels.

(5) set the title attribute of panorama as the name of the application on the Start interface.

(6) avoid adding animations or dynamically changing the title size of panorama.

　　Bytes

(1) considering the performance, reduce the number of effectitem as much as possible.

(2) Try to load the content in real time, instead of loading all the content at the beginning of the program.

(3) Use the widgets control to display elements or data of the same type.

(4) do not use the navigation control to implement functions similar to those of the navigation tool.

(5) do not use the application bar to provide navigation. If the effect of navigation is used, it is abuse.

Reference: http://www.cnblogs.com/aspnetx/archive/2011/10/27/2227162.html

Http://bbs.51aspx.com/showtopic-42954.html

In addition, it is not listed here on msdn.