101 Windows Phone 7 apps Reading Notes-groceries

Course Content

Ø panarama Control

Groceries is a simple shopping list application that we can use to create a custom shopping list step by step. You can name and add as many shopping pages as possible based on your preferences. Records can be easily added, which is a feature of this application, such as batch addition, selection of favorite products, and selection of recently purchased products.

The groceries application displays the panorama control, a symbolic user control on the Windows Phone platform. It is widely used in the "Hub" interface (such as contacts and pictures) on mobile phones ). Roughly speaking, the panorama Control performs a similar behavior as the panorama control, which allows horizontal switching between different parts of a page. What makes panorama different is its appearance and dynamic switching.

Panorama's core philosophy is to make users feel like they are browsing a long horizontal painting. This control provides users with visual elements to guide them through horizontal switching. For example, the title displayed by an application is larger than the screen size (unless the title is too short), and the size of each section is slightly smaller than the screen size, the left boundary of the next section can be displayed on this interface. Panorama supports horizontal rollback, and continues to switch to the right in the last section, it will return to the first section. Similarly, if you switch from the first section to the left, the system will navigate to the last section page.

Figure 27.1 shows the usage of the panorama control in the groceries application. The first section contains the entire shopping list, and the last section contains the shopping cart (items that the user has purchased ). You can dynamically add multiple sections between the two sections to store the list of items you want to purchase and show whether these items have been placed in the shopping cart.

Figure 27.1 The panorama control in the groceries application shows the shopping list.

Although the Long Horizontal picture is consistent with the panorama control's interface style, the background pictures in these five sections are not completely continuous. In fact, this mechanism is more complex. The panorama control consists of three different layers with different moving speeds to achieve a parallax effect. The background translation speed is the slowest, followed by the title. The fastest translation speed is the content, which is translated at the normal rolling/switching speed. Figure 27.2 shows the page content displayed on the screen when accessing each section in Figure 27.1.

Figure 27.2 page content displayed when you access each section of panorama in Figure 27.1.

In the application, how should we choose to use the panorama or ghost control?

The main consideration is the visual appearance that the application wants to present to the user. Compared with the background, the panorama control with a background image can provide more attractive and interesting user interfaces. Even if a background image is used in the sequence, it cannot achieve the panorama effect, mainly because of the parallax translation effect provided by panorama. In addition, Panorama supports better horizontal scrolling in the same section, which makes it easier to implement section with variable width.

In other aspects, tranquility also has an advantage over panorama. Explain shows the more real status of each section. When there are too many content or records, the explain performance is better. There are three reasons: the appearance and transition are more concise, and the delayed Loading Mechanism of content is adopted, provides APIs for delayed loading and uninstallation. You can still use the application bar (or program status bar) in the programs, but they are not applicable in Panorama. Therefore, if we want to display some page-based behaviors, the scheme with the application bar should be a better choice.

The groceries application is more suitable for applications than panorama, because each page is only a different filtering page for the same dataset. Sections in a typical panorama are richer and more vivid than those in the groceries application, with more thumbnails (as we see in the marketplace application ). However, by using panorama, Groceries impressed users and made them more interesting to use.

The panorama Control

After reading the "controls" Control in the previous chapter, the panorama control looks familiar. The panorama control is located in the Microsoft. Phone. Controls namespace of the Microsoft. Phone. Controls binary set. It is an item control that is used with the panoramaitem content control.

Although the panorama control is much more complex than tranquility, it provides fewer APIs. Like tranquility, Panorama has the title and titletemplate attributes, where the headertemplate attribute uses the header in the custom control. Generally, you do not need to use this attribute because the control has provided a good appearance and feeling. Because the title of panorama is a type object, it is acceptable to set it as a logo rather than a Text object. This is what the famous Facebook app does.

Panoramaitem has the header attribute, but unlike javastitem, it also provides the headertemplate attribute for custom headers of different appearances (of course, we can directly set heade as a user-defined UI element, without the headertemplate attribute ). At the same time, panoramaitem has a screen direction attribute, which can indicate a reasonable scroll direction when the content is inappropriate. The default value of this attribute is vertical. When it is set to horizontal, the horizontal expansion width of a single panorama item can be greater than the width of the entire screen. Note: If you want the panorama item to scroll vertically, you must add the scroll viewer control. In the horizontal panorama item, we don't want to use the scroll viewer control, and panorama will automatically process it. Each horizontal panorama item has a maximum width, which is the size of the two screens (960 pixels ).

Horizontal panorama items and their headers

The panorama control in the system's built-in applications. When the panorama item is in the horizontal state and wider than the screen, its title translation speed is slower than the content translation speed (this ensures that we can only see part of the title content when viewing the panorama Item Page ). However, the panorama control does not provide this behavior. Regardless of its width, the title movement speed of each panorama item is the same as that of the content.

We can set the layout of records in Panorama item on our own. Although panorama uses square images and text, no special controls will automatically complete these layout settings. We should use common panel controls, such as grid or wrap.

The main page

As shown in page 27.2 of the groceries application, only panorama is used. The home page provides links to navigate to the other four pages: Add record page, edit record page, set page, and description page. The Code descriptions on these pages are omitted here.

If the application uses panorama, generally only one is used, and generally only used on the first page of the application. Using multiple panorama in one application may cause confusion for users familiar with the Windows Phone experience.

The User Interface

The XML namespace of the tranquility control adds a reference to panorama again.

This page only uses the portrait mode, which is exactly what we expect for every page with the panorama control.

The ghost page is filled with a white foreground color, which ensures that the application looks the same under the Light and Dark themes. Because the background image has not changed, we do not want to change the color of the text to black.

The background attribute of the background panorama is similar to that of other elements. Although it is recommended that you use a solid color paint brush or image paint brush in the design guide, we can set it to any paint brush. This image is used to set the background to background.jpg.

Make sure that the panorama application passes the test in two theme modes: Dark and Light!

This is a required test for any panorama application, because we often make mistakes when designing panorama, that is, setting a fixed background image. If the background never changes, we need to ensure that the color of the content never changes.

To prevent image stretching, make sure the height of the panorama background image we use is 800 pixels. In addition, to ensure the performance of our applications, the image width should not exceed 1024 pixels, and the image type should be in JPEG format. Groceries uses a x JPEG image. When I decided to write this app, I took my wife's new camera with the Panorama Image shooting function to a nearby grocery store. After that, I realized that the best background image is not of the panorama type. Figure 27.3 shows the background image file of the application.

Figure 27.3 background image file of the application

Background switching will be delayed when a large background image is used. In fact, the speed of background switching depends on the number of panorama items, because panorama ensures that the end of the background image is displayed only when you switch to the last page. In the groceries application, the title "groceries" and the width of the background image cause the title to switch to the background image at the same speed. In order to achieve richer parallax effects, we can change the width of any element.

To achieve the best effect, set the build action attribute of the background image in the panorama application to resource instead of content. Resource files are rarely used in practical applications. This application is one of the reasons for the differences between synchronization and asynchronous loading/decoding. If the image is large and serves as a content file, Panorama may appear between the displayed background images. If it is used as a resource file, Panorama will load it after the image is ready. The synchronous Loading Mechanism of resource files is often criticized, but it ensures the friendly experience of applications. Although the time needed for Panorama display is increased, people still do not want the image background to be loaded after panorama. In fact, we can use the UI element of the activity as the background of panorama! Dave relyea, the creator of the panorama control and the technical editor of this book, shared this achievement. You can see here: http://bit.ly/panoramaxaml.

Because panorama is horizontally switched, a "gap" will appear in the connection between the right side of the background and the left side, unless we use the specified Art Design (such as the game hub) or a solid background (such as a network hub ). There is no problem with the gap. As long as users get used to it, it also helps to prompt that the user control will be rolled back (we can see this gap in images and marketplace hub ). However, the background image edge of groceries has some shadows, making the switching process smoother. 27.4.

Figure 27.4 the shadow of the background image makes the transition of the panorama control from the last switch to the start page smoother.

Even if you select an image designed by the artist, the background color gap of one pixel width is occasionally seen by the user during page rollback. We can still solve this problem by setting a new panorama control template. It can be a copy of the default template, and its background boundary has a negative margin, as shown below:

<Border X: Name = "background" background = "{templatebinding background }"Cachemode = "bitmapcache" margin = "-1, 0"/>

Panorama contains two items that are always displayed: a list of all items awaiting purchase and a list of shopping carts. Some pages in the middle are dynamically added through code.

The headers of the panorama item named "list" are user-defined. On the edge of the usual title text, there are three buttons: one to add a new shopping list, one is used to set parameters, and the other is help. For details, see Figure 27.2. In general, these buttons should be set as the application bar, but because the panorama Design Guide specifies that it is best not to use the application bar, so they are placed in this area.

The "Shopping Cart" list also has a custom header. We added a "delete" button next to its text. Other panorama items (mainly added by code) only contain one list box, but the "Shopping Cart" list contains a grid control, adds an obvious "Shopping Cart" icon to the list box.

The use of the upload button throughout the application, they have a custom "simplebuttonstyle" style. In this style, each button has a new control template, removing the border, padding, and other actions of the button, so we only see the text content of the button (It also adds the title effect used in this book ).

If each button uses the default style (the layout of the button is adjusted so that they can be displayed on the Interface), the effect is 27.5. The reason for using the button control is that the button clicking event is only triggered by the user's clicking action, rather than the pan action. This allows you to translate panorama when you accidentally click the button. If you use the mouseleftbuttonup event to detect the user's click on the UI element, the translation operation on the UI element will trigger the original click event.

Figure 27.5 fills in the groceries application interface of the button, which can easily detect users' non-Pan clicks.

In the Panorama and render controls, avoid using original mouse events, such as mouseleftbuttondown, mousemove, and mouseleftbuttonup! Because the translation of the entire control is controlled by the user gesture, it must process the user's translation gesture for any user logic attached to these events. We can find other events that are not triggered by the translation gesture, such as the Click Event of the key or the selectionchanged event of the list box.

The Code-behind

This application maintains a shopping list (settings. availableitems), which records each list added by users. According to the attributes of each item, each list box in Panorama is the view after the list is filtered by conditions. These lists have static attributes, such as filteredlists. Need (items in the entire "list" list) and filteredlists. incart (items in the shopping cart list ). Unlike the form-filling pages in the previous chapter, these lists are filtered by internal logic. This allows the home page to bind data to each list box. These lists and the item types that represent each item are described in the following section "supporting data types.

➔ Refreshaisles is responsible for dynamically entering information between the first panorama Item Page and the last panorama Item Page. Each dynamic page is encapsulated by a custom aislepanoramaitem control (inherited from panoramaitem. This control will be introduced in the next section. Panorama item only adds custom pages. The items on this page may be added to the shopping cart.

Filters use their respective filter sets for each dynamic panorama Item Page. This method is inefficient because each filteredobservablecollection (its implementation will be explained later) the input list of available items must be used for iteration. If the item list is very large, you may need to select a new policy.

This application demonstrates how to achieve dynamic uninstallation of panorama item. This action is triggered when all items on the dynamic page are placed in the shopping cart. However, like Tranquility, Panorama does not perform elegant processing on its item removal. There are two problems: Find the appropriate time point for removing the panorama item and its effect on the parallax effect.

To eliminate doubts, the user will remove an empty panorama item after switching the view. Therefore, the code needs to be checked in the selectionchanged event processing of panorama. During event processing, the previous display page is stored in the removeditems collection as a unique page. Because the effect of immediate removal is similar to that of translation transition, and the translation action triggers the selectionchanged event, the handler uses dispatchertimer to perform the removal operation within half a second. In fact, this processing effect is very good. The only problem is that because the background is moved and the title is based on the width of the entire panorama, if an item is removed, the width of the entire panorama is reduced, this will cause sudden jitters of the background and title. Unless this happens, we are stuck on the first page of panorama. Unfortunately, we cannot avoid this unless we do not remove panorama item.

Storyboards is used to simulate the effect of adding or removing a commodity to or from a shopping cart. Changes made to the shopping cart list occur in the completed event processing. This is done by setting the status attribute of item to incart or need. This will trigger a notification of attribute change when the list changes. Because data binding is used, the two lists will be updated automatically. Unlike other items, after setting the visibility of panorama item to collapsed, you can successfully hide an item. That is, by changing the visibility of the panorama item, rather than adding or deleting the item. However, hiding a panorama item is jittery like deleting it.

Panorama cannot be programmed to set the current panorama item! This application clearly misses a setting used to record the current panorama item so that the current panorama item can be restored during the next startup or activation of the program. However, the selectedindex and selecteditem attributes of panorama are read-only, so although we can save any value of either of them, the panorama item cannot be restored when the program is started or activated.

Panorama has a read/write defaultitem attribute that can immediately change the panorama item displayed on the screen, but it may not be the same as what you expected. It moves the item so that defaultitem becomes the first section on the virtual canvas, as shown in 27.6. This means that the title is aligned with the current default item, and the gap between the background image is immediately moved to the left of the item. In the groceries application, if the background image gaps appear in the shopping cart and all product pages, it will bring you doubts. Therefore, the defaultitem attribute is not suitable for users to return to their logout page.

The aislepanoramaitem Control

Aislepanoramaitem can be added to the Visual Studio project as a user control, but its base class changes from usercontrol to panoramaitem. In this way, the subclass aislepanoramaitem can be easily supported in XAML just like a user control. This panorama item is similar to the first panorama item on the home page, but there is no edit button in the item template. As the refreshaisles method in an application does, this convenient packaging method makes it easy to be reused on the home page.

Supporting Data Types

The ➔ status enumeration is defined as follows:

Public Enum status
{
Need, // In the current shopping list (but not in the cart yet)
Incart, // In the cart
Unused // added at some point in the past, but not currently used
}

The ➔ isfavorite attribute is used on the "add" Page and "edit" page to help users manage product input.

The notification of the quota attribute change allows the filter set to ensure that the item appears in the correct list category. They keep the information of a single item updated recently. For example, after the isfavorite status of an item changes, some value converters are used to display or hide buttons on the "add" page.

The specified availableitems settings are used to save information about all items in the list.

The filter list used in the application is not saved by the program, but initialized when a single list is running.

Every filteredobservablecollection in the ➔ onlyobservablecollection is encapsulated to prevent users from directly trying to modify the data set.

The struct class has two parameters: a source dataset and a callback function that returns whether a single record is a Filter list. This allows each instance to use different filters, just like in the static class filteredlists. The record type used in this class must implement the inotifypropertychanged interface, because this class monitors the addition and deletion of source datasets, you also need to track the attribute changes for each record (this is required by the groceries application, because changes to attributes like status or isfavorite must be immediately reflected in the displayed list ).