101 Windows Phone 7 apps Reading Notes-alphabet flashcards

Course Content

Ø slide effect switching

Someone recently asked me how to write a slide ApplicationProgramIn this application, they can switch between different pages, just like browsing an image set in the pictures hub or Facebook application. After careful consideration, I found that no panel or other UI elements are available to achieve this interaction. A simple scroll viewer does not work, because we need each image to be "magic", and all the remaining image views cannot be in an out-of-the-box position.

Although the outputs and panorama controls are more distinctive than the needs of this task, they provide the simplest way to create this interaction mode. We only need to hide the title and header and make some adjustments to the layout. With loadingjavastitem and unloadingjavastitem events, the upload control is more suitable for dynamic loading/unloading of records. However, Panorama allows us to switch between the previous and next images. Therefore, it is more suitable for Imitating slides.

Therefore, the alphabet flashcards application uses the panorama control to provide slide viewing effects for each card of 26 letters. Parents can use this application to teach their children to recognize English letters.

Note: Do not place too many records in Panorama!

Panorama was not designed to hold too many records. The performance is acceptable for 27 records of this application. However, if more and more complex records are added, the performance of the application will be significantly reduced and more memory will be occupied.

The User Interface

 

Alphabet flashcards uses the panorama control of 27 panorama items. One is used as the title page, and the other 26 are used to display 26 English letters. Figure 28.1 shows the user experience for switching from the first page (title) to the second page (letter.

 

Figure 28.1 Effect of switching from the first panorama page to the second page

 

For full screen slides, Panorama and its items on this page do not use any title or header. Item also uses the top margin of the negative page to occupy the wasted space. The 48-pixel space on the right of the control consists of the following two parts: the page margin occupies 12 pixels, And the content on the left of the next page occupies 36 pixels. Because we do not want to add the preview function to this application, we only need to ensure that the content on each page has a left margin of 36 pixels in width. Before switching images, this application not only needs to buffer the content on the next page, but also center the content. However, in Landscape mode, it does force the maximum width of the content to be 384 (480-48 × 2 ). Figure 28.2 clearly shows this scenario. It sets the panorama background to orange, the first page background to green, the second to blue, and the third to purple.

 

Figure 28.2 background of panorama during page Switching

 

If we want to leave a small margin on the margin, we can set the margin of panorama ". If we want to further enrich the appearance of panorama, we can apply a new style to panorama and provide an adjusted control template to panorama item.

 

Note:

Adding 27 panorama items in the XAML layout, instead of usingCodeSet itemssource of panorama to the URI string of a group of images. Panorama uses the item template to embed each image into the grid. In order to achieve the effect shown in 28.1, you need to set some margins.

Panorama contains more things than panoramaitem, such as strings used in this application. The main content and header of each item are used to display the detailed information of the record. Therefore, the application explicitly sets the headertemplate of each item to null, so that each URI used in the text block is not displayed above each image.

The build action attribute of the images used in this application is set to Resource, so that the panorama control and background images are loaded simultaneously when the program is running.

The Code-behind

In addition to filling the item for Panorama, the CS Code also saves and restores the item selected by the user for the application so that the application can restore its previous state.

Here, defaultitem is used properly. In this application, the defaultitem problem discussed in the previous chapter will no longer be troubled, because there is no clear panorama title or background here.