StyleSheet Control

Article
09/14/2006

The StyleSheet control has no visual representation and is used to organize styles that will be applied to other controls.

The StyleSheet control can contain any number of <Style> elements, or elements that inherit from the Style element. Each Style element in the style sheet must have a unique Name property. You can use the Name property to refer to each Style element in the StyleSheet control from other controls on the same MobilePage object.

Note The StyleSheet control ignores its own style attributes. Setting a style attribute on the StyleSheet control itself has no effect on the styles contained as children within the StyleSheet control.

A mobile page can also use an external style sheet, and several pages can share the same external style sheet. To create the external style sheet, you create a user control, in an .ascx file, and place a single style-sheet control with a set of styles in it. Then, to refer to this file, you place a style-sheet control on the page and set its ReferencePath property to the relative URL of the user control. For more information about user controls, see the Creating Custom ASP.NET Mobile Controls documentation.

Mobile Controls Syntax

Required properties, defaults, and code-featured elements are noted in bold type.

<mobile:Stylesheet
   runat="server"
   id="id"
   ReferencePath="externalReferencePath">
   style declarations
</mobile:Stylesheet>

Default Style Sheet

The ASP.NET page framework defines a default style sheet as one that supports a number of styles. The following styles are supported in the default style sheet.

Style	Associated style values
title	Font-Bold = true, FontSize = large
error	ForeColor = red
subcommand	FontSize = small

You can reference these styles with controls or other styles. You can also create styles that override these default styles. For more information about style characteristics and inheritance, see the Styles documentation.

Containment Rules

The following controls can contain a StyleSheet control.

Control	Comments
System.Web.UI.MobileControls.MobilePage	A MobilePage control can contain 0 or 1 StyleSheet controls.

A StyleSheet control can contain the following controls.

Control	Comments
System.Web.UI.MobileControls.Style	A StyleSheet control can contain any number of StyleSheet controls or any other class that inherits from the Style class.

Device Templates

None.

Device-Specific Behavior

There is no device-specific behavior for a StyleSheet control.

A style sheet determines only the value of the characteristics that the controls receive — not what the device will do with those characteristics.

Example

The following example creates an .aspx file with a Stylesheet control on a form and creates a user control in an external file called Mobile_style.ascx that contains style sheet and template information.

The StyleSheet control is created in an .aspx file.

<%@ Page Inherits="System.Web.UI.MobileControls.MobilePage" %>
<%@ Register TagPrefix="mobile"
    Namespace="System.Web.UI.MobileControls"
    Assembly="System.Web.Mobile" %>

<mobile:StyleSheet
   id="Style1"
   ReferencePath="Mobile_style.ascx"
   runat="server">
</mobile:StyleSheet>

<mobile:Form id=WelcomeForm runat="server" StyleReference="Style1"
   title="Welcome" >
   <mobile:Label runat="server" Text=" Welcome " StyleReference="title" />
</mobile:Form>

The StyleSheet definitions are contained in an external Mobile_style.aspx file.

//Code in Mobile_style.ascx ( external stylesheet in a user control).
<Mobile:Stylesheet
   runat="server">
   <Style name="Style1">
      <DeviceSpecific>
        <Choice Filter="isHTML32">
         <HeaderTemplate>
            // Add other code or controls here, such as a banner
            // or an AdRotator control.
         </HeaderTemplate>
         <FooterTemplate>
            // Add other code or controls here, such as footers,
            // or a copyright.
         </FooterTemplate>
         </Choice>
      </DeviceSpecific>
   </Style>

   <Style name="Style2">
      <DeviceSpecific>
        <Choice Filter="isWML11">
         <HeaderTemplate>
            // Add other code or controls here.
            // This section would point to WML .wbmp files.
         </HeaderTemplate>
         <FooterTemplate>
            // Add other code or controls here.
            // This section would point to WML .wbmp files.
         </FooterTemplate>
         </Choice>
      </DeviceSpecific>
   </Style>
</Mobile:Stylesheet>

Add the following device filter definitions to your web.config file.

<configuration>
   <system.web>
   <deviceFilters>
      <filter name="isHTML32" compare="PreferredRenderingType" argument="html32" />
      <filter name="isWML11" compare="PreferredRenderingType" argument="wml11" />
   </deviceFilters>
   </system.web>
</configuration>