101 Windows Phone 7 apps Reading Notes-book reader

Course Content

Ø editing page

List picker

Ø stretch entries in the list box Control

Book reader application in this ChapterProgramIt provides an optimized reading experience for Jane Austen's classic novel "arrogance and prejudice. The font of the book comes from the Gutenberg project (www.gutenberg.org). Since its copyright has expired, it provides the American people with free e-books. If you plan to release an application that contains the gutberg project, confirm that you have understood the license for the gutberg project. For details, see www.gutenberg.org.

To achieve the best reading experience, this application allows you to customize the foreground color, background color, font size, and even the font set. Book reader provides a simple page navigation that allows you to jump to any chapter or page number. It may not be so obvious at the beginning, but the biggest challenge for implementing this application is to compile pages, that is, to pagination the content of the entire book based on the font settings. Of course, we can place the content of the entire book in a page with a scroll bar, but this does not bring a good user experience. In addition, due to the size limit of the UI elements, other methods may not be feasible. Therefore, this application only displays one page at a time. You can click the screen to flip the page, or click the button in the application bar to go back to the page.

The main page

Figure 25.1 shows the homepage after the application bar is expanded. The application bar has a one-page rollback button, a button that jumps to any section or page number, and a button for changing settings. The application area also displays the current page number and total page number (based on the current font setting ).

Figure 25.1 the home page uses a color pattern similar to Amazon Kindle by default to provide sufficient contrast for reading.

Note:

The pagination mechanism of this application is completed by the paginateddocument user control, which is detailed at the end of this chapter.

The list box control named footer by footer appears in the application bar because it is placed below the area and the opacity of the application bar is set to 0.

Listing box, as shown in chapter 25.2, uses a very important but hard-to-find method to stretch the entries in the list box according to its width and fill the area. In this way, the elements (such as page numbers) in each entry can be right aligned without a given width.

Figure 25.2 uses horizontalcontentalignment to stretch the list box, so the page number is right aligned without specifying the entry width.

An inventory book is contained in the form of a text file. Its build action is set to content, just like the database file in the previous chapter. The file name is 1342.txt, which is consistent with the document downloaded from the Project Gutenberg website.

This application uses the following settings: the current page number of the reader is stored as a character index, that is, the index is created for the first character on the page that contains the content of the entire book. This is because if the font settings are different, the page numbers related to the book location will also be different. With this method, the real location of the user in the book will be saved.

The key-Value Pair added to the chapter list by category is a convenient type, because it contains two independent string attributes, which can be bound to a data template. "Key" is the title of the left-aligned chapter, and "value" is the right-aligned page number.

The settings page

The setting page of book reader is almost the same as the setting page in the notepad application. The difference is that the top font Picker, 25.3. The font picker is created by the list picker control in the Silverlight for Windows Phone toolkit.

Figure 25.3 font picker 10 fonts displayed in WYSIWYG picker

Here, list picker is basically a combo box. It looks like text box at the beginning, but when clicked, it allows users to select a value from the list. The data template binds the fontfamily and text attributes of each text block at the same time, and each string is displayed in the list. List picker supports two different list display Methods: inline mode and full mode. As shown in 25.3, in inline mode, the control expands and merges records with smooth animations. 25.4. In full mode, the control displays a full-screen record list.

Figure 25.4 font picker in Full-mode book reader

Why is it strange when I try to use the ComboBox control in a Windows Phone application?

ComboBox is a core Silverlight control that is frequently used on webpages. However, it does not provide a proper design style for Windows Phone. So it is generally not used (this control should be removed to avoid confusion ). If you want to use combo box, use list picker instead.

If the number of records is less than 5, list picker uses the inline mode by default; otherwise, list picker uses the full mode. This is consistent with the Windows Phone Design Guidelines. However, we can set the value of itemcountthreshold to force a mode. As long as the number of records is less than or equal to itemcountthreshold, list picker maintains the inline mode. The font picker of book reader maintains the inline mode of 10 fonts, so its attribute value is set to 10.

List picker defines the header and Its Related headertemplate attributes, and defines the itemtemplate attribute to customize the Display Effect of each record in the inline mode. Even if we use full mode, these attributes are also important for the appearance of list picker. For full-screen lists, list picker also defines the independent fullmodeheader and fullmodeitemtemplate attributes. As shown in figure 25.4, list picker in full screen mode uses these two attributes. If fullmodeitemtemplate is not specified, itemtemplate is used in full mode.

When full mode is used, list pickers cannot contain UI elements!

If we directly place the UI elements such as text blocks or the listpickeritem control in toolkit in list Picker, an exception will be thrown during full screen display. This is because the control tries to add each record to an additional full screen mode list, but a single UI element can only be placed in one place at a time. The solution is to place non-visualized data records in list picker and then use templates to control the appearance of each record.

Avoid placing list picker in inline mode at the bottom of scroll viewer!

List picker is not suitable in this case. The screen content is not moved when it is expanded for the first time to ensure that the content is retained on the screen. Then, when you try to use a scroll bar to view other content, list picker is folded. To achieve the best performance, set cachemode to bitmapcache for the elements in the inline mode list Picker, because the drop-down and contraction of list picker can change the positions of these elements.

List pickers and Picker boxes

Although a single list picker control provides two different experiencesArticleThe list picker in full mode is called the separated picker box control, which retains the term list picker in the inline mode experience. This is why the custom control used in Chapter 19th "animation lab" is called the pickerbox.

The paginateddocument User Control

To determine the location where the page is generated, the paginateddocument user control must measure the width and height of each character in the current font setting. The only way to perform a measurement is to place the text in the text block and check the values of its actualwidth and actualheight attributes. Therefore, paginateddocument performs the following three steps:Algorithm:

1. Search for each character in the document (Pride and Prejudice only contains 85 different characters ).

2. Place each character in the text block to measure its width and height. The height of all characters is the same (because the height here is the line height, including the fill and others), so the height only needs to be measured once.

3. Browse the entire document from the beginning to the end, and use the pre-measured character width to calculate the location of each line break. With this information and the previously measured height, we can know the location of each page feed. Some tips are required to contract some words.

Based on the calculated page feed location and line feed location, this control adds a text block for each line of text to get all pages.

Note:

The newline and newline indexes are stored in their respective lists. The page feed list is a subset of the line feed list. This relationship is especially clear when rendering a page.

In updatepagination, allocate as much work as possible to the background thread. The actual measurement must be completed in the UI thread. However, two background auxiliary threads are used to transition a background thread to the main thread and then switch it back to the background thread.

The controls have some assumptions about the input text. The document "arrogance and prejudice" contained in the project has been preprocessed to make the following assumptions true:

1. A line break (\ n) indicates a forced line break. It appears only at the end of a text segment (the original text uses a fixed line width, so you can place \ n regularly, in this case, the output cannot be dynamically adjusted ).

2. Carriage Return (\ r) indicates the beginning of the new chapter. With its help, This completes the automatic statistics of the total number of chapter sets so that they can be displayed on the list box on the home page.