Styles

Every ASP.NET mobile control provides a number of style properties that you can use to customize rendering a control. Styles can be grouped for convenience so that you can enforce consistency across different elements of a page. Use a StyleSheet control or a <Style> element to access properties specific to the control and device capabilities.

Note   The style properties of a control serve in an advisory capacity. If a target device does not support a particular style, the ASP.NET page framework ignores or substitutes the style.

Style Inheritance

Unless you explicitly specify style properties in your control, either directly, or indirectly by using a style reference, a control inherits the existing style properties of its container. Most style properties default to a null reference (Nothing in Visual Basic) or an enumerated value of NotSet. This makes it easy to distinguish style properties that have been explicitly set from those that have not been set.

Explicitly Declaring Styles

There are two distinct ways to explicitly declare a style for a control: one is to explicitly set a style, and the other is to use the StyleReference property to set a style.

If you explicitly set a style property on a child control, that style is used for the child control. For example, you create a form and add a Label control to the form. (The label that you add to the form then becomes a child control of the form.) Then, when you set that label's Font-Name property to Arial, the label uses the Arial font.

An alternate method that you can use to explicitly set a style on a child control is to set the StyleReference property of the control.

Setting Styles Using DeviceSpecific\Choice Construct

The properties of a style can also be set through the DeviceSpecific\Choice construct. The following example shows a label that is set as italic for most devices and bold when it is being run on a desktop device.

<%@ Page Inherits="System.Web.UI.MobileControls.MobilePage" %>
<script language="C#" runat="server">

public bool IsDesktop(System.Web.Mobile.MobileCapabilities capabilities, String argument)
{
   return !capabilities.IsMobileDevice;
}
</script>
<Mobile:StyleSheet runat="server">
   <Style Name="ListStyle" Font-Italic="true">
      <DeviceSpecific>
        <Choice Filter="IsDesktop" Font-Italic="false" Font-Bold="true" />
      </DeviceSpecific>
   </Style>
</Mobile:StyleSheet>
<Mobile:Form runat=server>
   <Mobile:Label id="list1" runat=server StyleReference="ListStyle">Here is some text</Mobile:Label>
</Mobile:Form>

Lookup Algorithm for a Referenced Style

When a style is referenced through the StyleReference property, the ASP.NET page framework performs a lookup to find the style. The lookup algorithm works as follows.

Given a control child that has a parent (a containing control parent), the rules for determining the characteristics of the child are described in the following list. Font-Size is the example style used in the algorithm:

  1. If the Font-Size property has been directly set on a child control, the control uses this setting.
  2. Otherwise, if the StyleReference property has been set on child's style (for example, myChild.StyleReference = someStyle), the child uses the value of the Font-Size property from the referenced Style element (for example, someStyle). The child accesses the value in the following order:
    1. The child first looks up the referenced style in the style sheet of the MobilePage.
    2. If the child does not find it on the page's style sheet, it references the system default style sheet.
    3. If the child does not find it in either style sheet, a run-time error is generated.
  3. Otherwise, the StyleReference property has not been set, and the child control gets the value of its Font-Size property by recursively applying this procedure to the parent control.
  4. If the recursion reaches the top of the control hierarchy without an explicitly set Font-Size property, the control uses the default font size.

This algorithm allows for separate styles that can you can reference from multiple controls. It supports inheritance from the containing controls, and it follows standard coding and logic expectations.

Exceptions to the Lookup Algorithm

There are two exceptions to the lookup algorithm: A background color does not receive its value from the parent object (this is consistent with cascading style sheets), and neither do the DeviceSpecific/Choice constructs. A DeviceSpecific/Choice construct is usually explicitly authored for a specific control or type of control.

Style Sheets

ASP.NET mobile controls provide a default style sheet that sets a limited number of styles for you. For more information, see the Default Style Sheet section of the StyleSheet Control topic. You can easily override the values in these default styles to apply your own. Any number of <Style> elements can reside in a single style sheet. Each Style element is identified by a unique Name property. You can set the StyleReference property of another control to the Name property, thus referencing its style. You can also use this technique to reference a style from another style.

External Style Sheets

It is possible to define an external style sheet that you can use for multiple controls. This is advantageous if you want to use the same styles across multiple pages. To create an external style sheet, create a user control in an .ascx file, and place a single StyleSheet control with a set of styles in it. Then, to refer to this file, place a StyleSheet control on a mobile page and set its ReferencePath property to the relative URL of the user control.

External Style Sheet Implementation

Implementing an external style sheet entails three steps:

  1. Write a Microsoft ASP.NET user control in an .ascx file.
  2. Place a single style sheet in the .ascx file, adding the desired <Style> elements.
  3. Declare a style sheet and set its ReferencePath property to the .ascx file name of the user control for each mobile page where you want to use the external style sheet.

At run time, all the styles that you declared in the external style sheet are made available to the ASP.NET page framework for the style sheet on the mobile page. For more information about user controls, see the UserControls section.

Characteristics of Style Objects and the Style Class

A Style object is not a true control, and it does not inherit from the base MobileControl class. On a page, it can be declared only within a StyleSheet control through the use of the <Style> element.

The base Style class contains style characteristics common to all mobile controls. Classes that inherit from the Style class contain additional style characteristics specific to their associated control. For example, a Flowchart control can have an associated FlowchartStyle class.

Every MobileControl internally contains a Style. However, this Style is not exposed through public members. Instead, for each style property, the MobileControl has a publicly accessible property that internally references the privately contained style. Therefore, a MobileControl directly exposes style properties such as Font, ForeColor, and Wrapping.

Organization of Styles

You can also organize styles into a StyleSheet control. Within a style sheet, you can declare any number of style objects. Styles are declared the same way as any control, with the exception that a runat=server attribute is not required. For more information, see the syntax in the <Style> element documentation.

A style can inherit its properties from another style in the style sheet by having its StyleReference property set to the name of the parent style. The scope for this is the mobile page. That is, only styles on the style sheet on the same mobile page can be referenced. To have a control acquire its styles from a style object in the style sheet, set the StyleReference property of its style object to the name of the style, either by declaring the StyleReference attribute in an ASP.NET mobile Web Forms page, or by programmatically setting the StyleReference attribute.

See Also

Walkthrough: Implementing a New Style | Creating Custom Mobile Controls | Forms | Pages | Panels | Pagination | Designing and Rendering Concepts for Mobile Controls | Application Developer's Guide