Customizing and Managing Your Site's Appearance

Customizing and Managing Your Site's Appearance

Randy Connolly

Digg This Add to del.icio.us

ASP.NET 2.0 provides a number of ways to customize the style of pages and controls in your Web application. This chapter covers these approaches. It examines the various appearance properties of Web server controls, illustrates how to use CSS with ASP.NET, moves on to themes and master pages, and then finishes with user controls.

Changing the Appearance of Server Controls

The previous chapters introduced many of the standard Web server controls. This section returns to the coverage of Web server controls by demonstrating how to more fully customize the appearance of these controls. The chapter does so in two ways. The first way uses common formatting properties of the Web server controls, whereas the second way uses cascading style sheets.

Using Common Appearance Properties

As mentioned back in Chapter 3, most of the standard Web server controls inherit from the WebControl class. This WebControl class in turn inherits from the Control class. Both of these base classes define properties that can be used to modify the appearance of any Web server control. Table 6.1 lists the principal appearance properties of the WebControl and Control classes.

Table 6.1 Appearance Properties of the WebControl and Control Classes

Property	Description
BackColor	The background color (using either a hexadecimal HTML color identifier or a standardized color name) of the control.
BorderColor	The color of the control's border.
BorderWidth	The thickness (in pixels) of the control's border.
BorderStyle	The style (e.g., dotted, dashed, solid, double, etc.) of the control's border. Possible values are described by the BorderStyle enumeration.
CssClass	The CSS class name assigned to the control.
Enabled	Toggles the functionality of the control; if set to false, the control is disabled.
Font	List of font names for the control.
ForeColor	The color of the text of the control.
Height	The height of the control.
Style	A collection of attributes that is rendered as an HTML style attribute.
Visible	Specifies whether the control is visible.
Width	The width of the control.

Any of the properties listed in Table 6.1 can be set declaratively or programmatically. For instance, the following markup demonstrates how to set the foreground and the background colors of a Label control.

To set the same properties programmatically, you could do so in a number of different ways, two of which are shown here.

Color is a C# struct that has fields for the predefined color names supported by the major browsers, as well as methods for creating a Color object from a name or from three numbers representing RGB values.

Most of the various appearance properties are rendered in the browser as inline CSS styles. For instance, the Label control from the preceding two examples would be rendered to the browser as

Using the Style Class

Setting the various formatting properties for your Web controls, whether through programming or declarative means, is acceptable when there are only one or two properties to set. However, when you have many properties that need to be changed in multiple controls, this approach is not very ideal. A better approach is to use the Style class.

The Style class is ideal for changing multiple properties to multiple controls all at once. It encapsulates most of the formatting properties listed in Table 6.1 and can be applied to multiple Web server controls to provide a common appearance. To use this class, you simply instantiate a Style object, set its various formatting properties, and then apply the style to any server control by using the control's ApplyStyle method. The following example illustrates this usage.

The Style class is best for situations where you need to programmatically change the appearance of a set of controls all at once. If you simply need to set up a consistent appearance to a series of controls, it is almost always better to use Cascading Style Sheets (CSS) or ASP.NET themes, both of which are covered in this chapter.

URL: