Styles
Every ASP.NET mobile control provides style properties that you can use to customize how the control is rendered. Styles can be grouped for convenience so that you can apply styles 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.
.gif) Note |
|---|
Style property settings are not guaranteed to be honored. If a target device does not support a particular style, ASP.NET ignores the style or substitutes a different one. |
Style Inheritance
Unless you explicitly specify style properties in your control (either directly, or indirectly using a style reference), a control inherits the style properties of its container. Most style properties default to null 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 ways to explicitly declare a style for a control. One way is to set a style property. For example, suppose you create a form and add a Label control to the form. (The label is then a child control of the form.) Then, when you set that label's Font-Name property to "Arial", the label uses the Arial font.
The other way to explicitly set a style for a child control is to set the StyleReference property of the control.
Setting Styles Using a DeviceSpecific Control
You can also set style properties through a DeviceSpecific control. The following example shows a label that is displayed using italic for most devices and bold when it is displayed on a desktop device.
<%@ Page Inherits="System.Web.UI.MobileControls.MobilePage" %>
<script language="C#" runat="server">
// A custom method to determine if the page
// is displayed on a mobile device
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, ASP.NET follows a particular sequence of checks to determine what style to apply. For a child control (a control inside a parent container control), the rules for determining the characteristics of the child are described in the following list, using Font-Size as an example:
If the Font-Size attribute has been explicitly set for a child control, the control uses that setting.
Otherwise, if the child control's StyleReference property is set (for example,
myChild.StyleReference = someStyle), the control uses the value of the Font-Size attribute from the referenced Style element (for example,someStyle). The child control accesses the value by doing the following:The child looks up the referenced style in the style sheet of the current MobilePage instance.
If the child does not find it on the page's style sheet, it references the system default style sheet.
If the child does not find it in either style sheet, a run-time error is generated.
If the style is not available directly or indirectly, the StyleReference property has not been set and the child control gets the value of its Font-Size attribute by recursively applying this procedure to the parent control.
If the recursion reaches the top of the control hierarchy without finding an explicit value for the Font-Size attribute, 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 the behavior cascading style sheets.)
DeviceSpecific controls do not inherit values from the parent control. A DeviceSpecific control 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 StyleSheet. You can easily override the values in these default styles to apply your own. Any number of <Style> element declarations 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 requires three steps:
Write a Microsoft ASP.NET mobile user control in an .ascx file.
Place a single style sheet in the .ascx file, adding the <Style> elements you need.
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 User Controls.
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 using <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.
Every MobileControl internally contains a Style object. However, this Style object 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 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 <Style> Element.
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 page, or by programmatically setting the StyleReference property.
See Also
Tasks
Walkthrough: Implementing a New Style
Concepts
Other Resources
Creating Custom Mobile Controls
Design and Rendering Concepts for ASP.NET Mobile Controls
Application Developer's Guide