asp.net each asp.net mobile control provides a number of style properties that you can use to customize how the control is rendered. Of course, you can also use the Stylesheet control to define style information, and then apply the style information defined by the Stylesheet control on different controls on the same page. We mentioned earlier that you not only can apply styles to different controls, you can also apply them to container controls. This ensures that the mobile controls in the container control all have a consistent user experience.
The stylesheet control should be placed on the page, not in the container control. In fact, this is the only one by one Web mobile controls that can be placed outside a container control. For all pages and mobile controls, We can define only one stylesheet control. After you have added a Stylesheet control, you can define the corresponding style properties by opening the style editor.
To create, customize, and apply a Stylesheet control on a mobile Web page, we can set the following steps:
1. Drag a Stylesheet control onto the mobile Web page.
2. Right-click the Stylesheet control and select the "Modular Options" command in the pop-up menu. A "Modular Options" dialog box appears, as shown in the following illustration. This dialog box allows you to create and edit multiple styles and device filters, which are described in detail in the later sections.
3. Clicking the Edit button will open a Style editor window, as shown in the following illustration. This window enables developers to create multiple styles based on actual requirements.
4. Depending on the type of style you want to create, select an option for the corresponding style type in the left-hand list bar, and then click the > button. This creates a style instance from the type selected in the Style type list and adds it to the defined Styles list on the right. There are two different style types in the current list of styles:
⑴pager Style Type: This style contains properties of style styles and properties that can be applied to paging controls. This is useful for situations where a mobile Web page contains multiple mobile controls, because the mobile device may not be able to display all of the mobile controls on the same screen, so paging is required. Using this style type, ASP. NET automatically creates the paging in the above scenario.
⑵style: This style contains the common appearance properties of mobile controls.
5. When you right-click a defined style instance in the Defined Styles list bar, a rename menu pops up, and you can give the style a meaningful name. In this example, two styles are set, which are the "graybackground" style of the pager style type and the "Redbackground" style of the style type.
6. When all the styles are defined, click OK to complete the entire definition process.
From the above, you can see that the style attributes here are much less than the traditional ASP.net program's style attributes, which are mainly restricted by the hardware of the mobile device, especially some devices that only support WML. Still, there are some common style properties that are retained in the ASP.net mobile Web program. For example, you can set properties such as background color, font color, font size, and font type. While there are some drawbacks, we can easily use the Stylesheet control on a mobile Web page to give the program a consistent user experience.
When you have finished defining the styles, we can apply them to the specific mobile controls. This process is very easy, and you just click the StyleReference property on the corresponding property form for the mobile control, and then select the appropriate style in the Drop-down list. As shown in the following illustration, we apply the Graybackground style to the entire Web Form control and apply the Redbackground style to the label control. This is why all mobile controls within a form control have a gray background color, but the reason for the label control's background color is red (the label mobile control replaces the form's style with its own style), and the final display is as follows:
