Building Microsoft ASP.NET Applications for Mobile Devices, Second Edition [Electronic resources] نسخه متنی

Pagination and Styles

ASP.NET mobile Web applications can automatically paginate if the amount of output to be displayed is too much for the client device. For example, a list of 20 items would be displayed in its entirety on a large screen Pocket PC but would be paginated over three screens on a mobile phone with a four-line display. When the output is paginated, ASP.NET automatically renders Next and Previous functions on the phone navigation buttons or displays Next and Previous buttons on the screen of an HTML browser, allowing the user to page backward and forward through the contents, as shown in Figure 8-7.

Figure 8-7: A paginated mobile Web Forms application with Navigation buttons added—WML browser (left) and HTML browser (right)

To enable this capability, set the Paginate property of the Form control to true. (The default is false.) You can control the style and text used for the Next and Previous pagination controls using the PagerStyle property of the Form control. This exposes an object of type System.Web.UI.MobileControls.PagerStyle which inherits from MobileControl, and so possesses all the properties described in Table 8-1. It also has a number of properties that relate to pagination which are described in Table 8-3.

The PageLabel property allows you to define a title for each page of the paginated Form. The property can have a value that's a mixture of text and format specifiers. There are two format specifiers: {0} for the current page number, and {1} for the total number of pages. For example, the value {0} of {1} will display the text 1 of 3 on the first page of a Form that displays as three pages.

You can set these properties in code or in server control syntax. To set these properties in server control syntax, you use contained object notation, in which a child object is separated from its parent by a dash, as in the following example:

<mobile:Form PagerStyle-NextPageText="More" PagerStyle-Font-Bold="True"…

Using Pager Styles in Style Sheets

The StyleReference property of the PagerStyle object allows you to reference a PagerStyle object stored in a StyleSheet control in the .aspx file or stored externally in an external style sheet, instead of setting pagination properties directly on the Form control. For example, if you had a PagerStyle called "myPagerStyle" defined in a style sheet, you would program a Form to use that PagerStyle using the following server control syntax:

<mobile:Form PagerStyle-StyleReference="myPagerStyle" …

The <PagerStyle> element defines pagination style information for the pagination of a mobile Web Forms page. The following syntax shows the attributes associated with this element:

<PagerStyle id="id"
StyleReference="styleControlReference"
Font-Size="{NotSet|Normal|Small|Large}"
Font-Name="fontName"
Font-Bold="{NotSet|False|True}"
Font-Italic="{NotSet|False|True}"
ForeColor="color"
Alignment="{NotSet|Left|Center|Right}"
BackColor="color"
Wrapping="{NotSet|Wrap|NoWrap}"
NextPageText="nextPageText"
PreviousPageText="previousPageText"
PageLabel="pageLabel" />

You can use the <PagerStyle> element only within a StyleSheet control. You can, however, have a mixture of <PagerStyle> elements and <Style> elements within a single style sheet.