101 Windows Phone 7 apps Reading Notes-todo list

Course Content

Ø render Control

Ø context menu

Ø data contract attributes

Todo List allows us to manage tasks quickly, easily, and effectively. We can not only mark tasks with colored pentagram and specific descriptions, but also filter tasks in multiple ways, for example, filter tasks based on expired tasks, tasks to be completed today, or tasks with star levels. When you browse the completed task list, you can also undo the task. Generally, a filter is triggered when we look for a task of interest.

Compared with other applications in this bookProgramTodo List containsCodeMore, mainly caused by list management. List Management includes browsing tasks, viewing task details, sorting tasks, creating or deleting tasks, and editing tasks. The application has a total of five pages, including the Home Page, create/edit task page, set page, and help page. The page design and code of task management involved in this application can be easily transplanted to other similar task management applications. However, the main purpose of the todo list application is to display the controls. Ghost is one of the two unique controls introduced by the Windows Phone 7 platform (the other is the panorama control introduced in the next chapter ).

The specified control

Pipeline is a control that allows users to click. We can slide horizontally on the pipeline or switch between different views by clicking the header. This type of control has been built into the mail, calendar, and settings pages, and is also used by many other built-in applications, including Internet Explorer, maps, marketplace, music + videos, people, and pictures.

The charts control can display filtered views (such as mail applications) for the same dataset, and display different views (such as calendar applications) for the same dataset ); or provide a simple and switchable view for an independent dataset (for example, in the settings application, the application is a dataset, And the settings is its view ). However, the wizard control is not used to display the tasks in sequence, such as the User Wizard interface for creating a new project. Generally, the ghost control occupies the entire page, except for applications that require the application bar or status bar.

Just like the list box and list picker controls, Tranquility is an Items Control. Although any objects can be added to the items set in the metadata class, the data type can only be titem objects or data objects.

Javastitem is a simple content control with the content and header attributes. Although these two attributes can be set to any value, content is generally set to panel, just like a grid control containing a complex user interface; the header is generally set as a string.

In "Windows Phone application" projects, references to controls of the models and panorama types are not included by default!

Although the namespaces of controls of the runtime and panorama types (Microsoft. phone. similar to other commonly used controls such as phoneapplicationpage, but they are defined in Microsoft. phone. the binary set of controls (while phoneapplicationpage is defined in Microsoft. phone binary set ).

When using the secrets and panorama controls, you must add a reference to Microsoft. Phone. Controls. dll. If we create a project in Visual Studio with the "Windows Phone Program Application" or "Windows Phone panorama application" type as the template, then Microsoft is added by default in the project. phone. controls. DLL reference. Similarly, if we select "Windows Phone Program Application" or "Windows Phone panorama application" in Add new item of Visual Studio, the project will automatically add the program to Microsoft. phone. controls. DLL reference.

The following are three guiding principles for the render control when designing an application:

Except for the specific name, the text in the header should be in lower case.

As mentioned earlier, do not try to use the progress control to design continuous tasks that must be completed by users.

Do not use more than 7 pages in a single render control.

A required without quota titems

When tites is not available, tokens are unavailable. Secret uses this control to store the header and content of each record. Therefore, if we try to use different UI elements, the application will throw an exception of "element is already the child of another element. This is not a problem, because there is no reason not to use javastitems. It can contain any object, so we can embed the required content into it. We can also add non-visualized data objects to the dataset and use the itemtemplate and headertemplate attributes to set the appropriate format.

The main page

The lifecycle control is used on the home page of todo list. It contains five initems, and figure 26.1 shows the status of being empty when the application is running for the first time.

Figure 26.1 five initial items page

Because namespaces require a unique namespace, you must use an independent XML namespace. The prefix of common XML Namespaces is: controls.

Using the title attribute means that the application is in full screen, so it contains a title attribute, just like a normal page header, which can be used to display the name of the application. This control imitates the title of the application very well, but it should be noted that the position and font size are somewhat different. Fortunately, we can customize the title appearance. Title is a type object, so we can set it to any element in the UI, not just a simple string. Alternatively, we can use the titletemplate attribute to customize its appearance. Figure 26.2 shows the effect of titletemplate on the title string. In the release of Windows Phone, if Silverlight supports local text spacing layout, this problem may be well handled. However, currently, application custom templates cannot be implemented.

Figure 26.2 the User-Defined title slightly changes the appearance of the default subtitle title

The headertemplate attribute is also provided to define the title of each custom item. However, the default title is consistent with the built-in application, so most applications generally do not use this attribute. If we want to customize the title, such as adding text and images to each title, this attribute will be useful.

Each consumer item contains a text block control (displayed when the display list is empty) and a grid control embedded in the list box. Each record in the list box is embedded with images or texts.

The first four list boxes of items have the same item template, which is called datatemplate. However, the list box on the "done" Rule Page uses its own template. As shown in Figure 26.3, this template adds the check mark and strikethrough effects.

Figure 26.3 The item template in the "done" list box adds the check mark and strikethrough effects.

The two templates use the contextmenu element in the Silverlight for Windows Phone toolkit to add context menus to each item. When using the context menu, we only need to set the contextmenuservice. contextmenu attribute to the element that receives the user's touch-and-hold gesture. After one second of the user's touch-and-hold gesture, the Context Menu displays the content we added to the menu. See Figure 26.4.

Figure 26.4 The context menu of "do the dishes" shows three different task options.

On Windows desktop, context menus usually contain click processing for default items and can be displayed in bold. On Windows Phone, the context menu should not contain the default click processing. On the contrary, context menus should be reserved for actions that cannot be triggered by PAGE methods. For example, the context menu in this example does not display "View Details", because the click action for each record has completed this function. Following this design principle not only makes the context menu of our application consistent with the built-in application in the system, but also saves valuable screen display resources.

Although the following lifecycle control events are not used in the todo list application, they are very useful for dynamic lifecycle pages:

➔ Selectionchanged: triggered when the swap page on the current screen is switched.

Uploloadingeffectitem: triggered before the first display of a webpage.

➔ Loadedpivotitem: triggered when a worker page is displayed for the first time.

➔ Unloadingpivotitem: triggered before deleting an upload page from the upload page collection.

➔ Unloadedpivotitem: triggered when a lifecycle page is deleted from the lifecycle page collection.

The page delay loading mechanism of the lifecycle control improves the Startup Performance of the program. However, in many popular applications, these events are used to improve the program performance, even their own virtutitem virtualization mechanism.

Mainpage. XAML. CS

The selecteditem and selectedindex controls have the selecteditem attributes. They indicate which of the following pages occupies the screen currently. The todo list application stores the current page, but it only stores the name of the element, not its index. We can achieve this through this method, because the setting page of this application allows users to hide any hidden page except the first page, this hiding method removes the hidden page from the hidden page.

Setting the selecteditem or selectedindex attribute of the iterator before the loading event will cause the operation to fail!

Set the selecteditem or selectedindex attribute of the queue in the onnavigatedto event, which looks natural. However, this is a system bug that has not been resolved so far. After this problem is solved, use the loading event to set the selected page.

Setting the selecteditem or selectedindex attribute of a sequence can change the selection of the current page!

I'm particularly annoyed when I guess how to use these two attributes. For example, when an application is activated and we want to restore the previous state (assuming that the application is running), we want it to immediately display the previously selected page. A work und is to physically change the order of the login pages, so that the previously selected page will always be 0th pages, and do not write code on the basis of indexing.

Setting the visibility of the hosts page does not work!

It is easy to hide the visibility page temporarily. You only need to set its visibility attribute to collapsed. However, because this does not play a role, the only way to hide the hidden page (and prevent it from occupying space) is to delete it from the hidden page collection.

According to the Windows Phone design principles, if you have a way to add information to the blank dialog page, we should not delete this dialog page. On the contrary, we should display this blank detail page, or place a descriptive information on it, just like the page processing method in todo list.

In the onnavigatedto function (this function is called when the function is returned after the visibility of the record is adjusted on the settings page), the records displayed in the detail are added or deleted according to the current settings.

Zookeeper does not handle page deletion elegantly. If the marker page is deleted and the selected index is greater than the selected index, an argumentoutofrangeexception is thrown. This happens even if the selectedindex attribute is set to 0 before the preview page is deleted. It is assumed that this is caused by the transition of the animation when the old page is switched to the new page. This is a bug to be addressed in future Windows Phone versions.

To solve this problem, the application sets selectedindex to 0 in the onnavigatedfrom function. In this way, even if the user accesses the set page and returns to the home page quickly after deleting the renewal page, there is still enough time to switch the page. Therefore, if the selected page is deleted, the lifecycle will return to the 0th page. This is implemented through the logic in loaded. After onnavigatedto is executed, the selected page is restored.

The ListBox of "all" creates data binding with tasklist settings, and the "completed" list box establishes data binding with the donelist settings. The remaining three list boxes contain the data filtered by the tasklist dataset. They are manually filled in refreshlists because there is no automatic data binding mechanism for operations to filter datasets.

The opening and closing events of the context menu are used to check whether the context menu is opened as needed. The listbox_selectionchanged event ignores users' clicks on the page.

Because context menu processing is the same function, the code we write must be applicable to multiple context menus. The sender sends the menuitem clicked by the user to the handler, so its datacontext attribute is used to obtain the item using the context menu template.

When processing click events in the context menu, how do I obtain the clicked and maintained menus?

For context menus placed in data templates, this problem is often asked because it is impossible to associate specific menu items with data objects. The answer to this question is to use the datacontext attribute of the menu item. When we started to consider datacontext, we thought of setting it as a data object, but in this case, obtaining its value is very useful.

When you want to hide the context menu, be sure not to handle the click event as usual!

Ideally, the system will handle this for you, but it won't. In many cases, we should track the context menu when it is opened. In this way, we can reasonably ignore some events triggered during that time. The opening and closing events of the context menu allow us to do this.

Supporting Data Types

As mentioned above, the todo list application controls two sets of tasks. When we understand how the application runs, we need to understand three important classes. The task class is used to display the records displayed in the list box on the home page.

The "items" template on the "items" page contains the values of the title and star attributes in each task. All attributes are displayed on the task details and add/edit pages. The duedate attribute is also used to sort the task list.

On the one hand, the createddate and modifieddate attributes are set to the datetimeoffset type rather than the datetime type, which is more reasonable. On the other hand, this is also to match other types (we may raise such a question, the duedate attribute should be set to the datetime type, which represents a logical time point in the current time zone. The alarm clock application in Chapter 20th also uses datetime ).

The ➔ star attribute value is a string that represents the color (such as red or yellow ). This is a bit strange from the API perspective, but it is indeed very practical, because the item template on the home page and the star on the task details page can be directly bound with the attribute, the value converter is not required.

The notice that the attributes of users are changed ensures that the user interface elements bound to the data can be updated. This is reflected on the home page and task details page. On the home page, only the "done" list needs the task for editing. This will be introduced in the next "Add/Edit page" section.

Settings. CS

The first five settings of tasks Save the status of the tasks control on the home page. The next setting (currenttask) saves the task details and the Add/edit task page selected on the home page.

The most important thing is the last two settings, that is, the list of unfinished tasks and the list of completed tasks. Note that this is a set of two different types. Donelist is a basic observability set of tasks, which does not contain any sorting. Therefore, the list is always sorted in the order of completion. (If you want to change the order, you need to first mark the task as "unfinished" and then mark the task as "completed ".) Tasklist, on the other hand, is an observed set that Automatically sorts tasks in chronological order based on the value of the duedate attribute. Therefore, with this feature, no additional code is required for sorting tasks for each list box on the home page (except the done list.

The Observability of the above two lists is very important, because when the record content is added or deleted, the home page uses a set change notification to update the content in the "all" and "done" lists.

Sortedtaskcollection. CS

In the implementation of the values class, you need to override the protected insertitem method of the observablecollection, which will be called by the ADD and insert methods. During implementation, it ignores the input index value. On the contrary, it selects the index value required to maintain the sorting of the list. This is confusing for those who try to call the insert method with a specific index value in the set, but it is no problem to call the add method.

The most subtle part of collections is the collectiondatacontract attribute. This property is in system. runtime. the system of the serialization binary set. runtime. it is defined in the serialization namespace (the default Windows Phone application template does not include references to it) and plays a major role in serialization of content set in this application. However, the reason is obscure. Because sortedtaskcollection comes from observablecollection <task>, the two classes have the same data field name for the built-in serialization process. However, each serialized type must have a unique data field name. Therefore, the collectiondatacontract attribute is assigned to sortedtaskcollection (we can implement it without selecting an explicit name ).

Without this attribute, the following exception is thrown when the application is closed or sleep due to an attempt to automatically serialize the settings of the application:

Type 'System. Collections. objectmodel. observablecollection '1 [windowsphoneapp. Task] 'could not be added to list of known types since another type' windowsphoneapp. sortedtaskcollection' with the same data contract name

'Http: // schemas.datacontract.org/2004/07/windowsphoneapp:arrayoftask' is already present.

NOTE: If both lists are of the sortedtaskcollection type, the configuration information can be serialized normally even if this attribute is not available because there is no conflict. Of course, you can set this attribute when designing the class, which may cause unnecessary troubles in the future.

In addition to the collectiondatacontract attribute, the system. runtime. serialization also provides the datacontract attribute, which can be used in common (non-set) classes.

Generally, when data cannot be serialized to an isolated bucket or page status, the only prompt we get is that the data does not exist when the application is started or activated again. To view detailed exception information about failed data serialization, we can run the program in the debugger state in Visual Studio and set it to "catch all first-time. Net exceptions ". We can find the "thrown" check box near the "common language runtime exceptions" of the exceptions option (the exceptions option under the Debug menu) and select it, in this way, the above functions can be implemented.

The details page

Task details page 26.5 shows the attributes of each task. The task title is set to the title of the page. The task description and date information are displayed under the title. If this record is set to star, it will also be displayed. For convenience, buttons are placed on the Application bar of the page to implement the context menu functions provided on the home page.

Figure 26.5 The task details page shows the tasks that contain stars and do not contain stars.

To process long description information, we place it in the scroll viewer control. The big pentagram serves as a static background and does not scroll with the content.

Displays the attributes of the current task. Data Binding is used. Dateconverter is similar to the value converter described in Chapter 21st "passwords & secrets" to display datetimeoffset data in a friendly manner. The only difference between the value converter used in this application and the previous one is that the "@" symbol is added between the date and time.

In the onnavigatedto method, the listener makes some adjustments to the display content, so that the user clicks the edit button to navigate to the Add/Edit page, makes changes to the record, saves the record, and returns the result, the information on the current page can be updated. In the CS code behind it, the value converter can be used to avoid modifying the visibility attribute in two text blocks, but this is a little redundant.

The Add/Edit page

The Add/Edit page looks like a completely different page: one is the page used to add new tasks, and the other is used to edit existing tasks, but because of their similarity, we implemented it on the same page. Figure 26.6 shows the ADD and edit functions on this page.

Figure 26.6 Add/edit pages in two different modes

Secret this page uses three controls in the Silverlight for Windows Phone Toolkit: List Picker, Date Picker, and time picker. List picker is used to modify each task to bring the appropriate color, because the data binding can automatically match the color string. See Figure 26.7. If the string value obtained by the application is null, the Data Binding fails, and the displayed rectangular box is not filled.

Figure 26.7 when list picker is expanded, a pentagram is displayed next to the text of each record.

The current status value of each control page is saved. This processing method is very useful when user input page information is interrupted, and it is still required for the time and date control. These controls will navigate the screen to other pages. If you cannot save and restore the information, you can return to the page regardless of whether you have selected the time and date, the entered table information is cleared.

If a project in the completed task list is re-edited, its values are directly modified. If the project in the task list is edited again, the original task is deleted and a new task is added. This aims to sort the records in the task list by the date that should be completed. If this date is changed, tasks that already exist in the editing set may cause inaccurate sorting. This is why the inotifypropertychanged implementation of the task is only to meet the update of the "done" list box control on the home page; the addition and deletion operations are reported by the observed set, therefore, the propertychanged notification is only used in direct editing.

The settings page

Set page 26.8, which allows you to close all the lifecycle pages except "all" (the page displays the "all" check box, but cannot operate, this indicates that the page cannot be hidden .) This is to set the page and its concise expression. The difficulty is to support hidden pages on the home page.

Figure 26.8 set the page to allow users to hide all the renewal pages except the first one