Styles Overview

There are several benefits to exposing style properties from a control vs. merely rendering styles as HTML and CSS attributes. Style properties can be programmed against and have IntelliSense support when a Web control is used in a code editor. In addition, strongly typed style properties provide the benefit of compile-time type checking. For example, WebControl defines the ForeColor , Font , and Width properties by using the Color , FontInfo , and Unit types respectively, instead of using the generic String type. If a page developer makes an error when specifying the ForeColor ” such as specifying "Briwn" instead of "Brown" ”the parser will be unable to convert the specified string to the Color type and will generate an error message.

We will now examine the architecture that supports style functionality in a Web control. You do not need to understand this architecture if the basic style functionality that your control inherits from WebControl is adequate for your purposes. However, if you need to modify or extend the inherited style functionality, you should go through the background we provide in this section.

The style functionality of the WebControl class is encapsulated in its ControlStyle property. Style properties are really subproperties of the ControlStyle property. WebControl exposes these properties as top-level properties, as shown in the following code fragment, which contains the definition of the BackColor property of WebControl :

 publicvirtualColorBackColor{ get{ if(ControlStyleCreated==false){ returnColor.Empty; } returnControlStyle.BackColor; } set{ ControlStyle.BackColor=value; } } 

The type of the ControlStyle property is the System.Web.UI.WebControls.Style class, which implements style properties and has built-in capabilities for state management and rendering. The object model of the Style class is shown in Appendix B, "Object Model for Common Classes." WebControl implements all its style properties, as well as the state management and rendering of these properties, by delegating to its ControlStyle property.

The following code fragment shows the definition of the ControlStyle property in WebControl :

 privateStyle_controlStyle; publicStyleControlStyle{ get{ if(_controlStyle==null){ _controlStyle=CreateControlStyle(); if(IsTrackingViewState){ ((IStateManager)_controlStyle).TrackViewState(); } } return_controlStyle; } } 

The ControlStyle property is read-only and is created when it is first accessed. The accessor of this property checks the _controlStyle field, and if this field is null, the accessor invokes the protected virtual CreateControlStyle method to create a Style instance.

The ControlStyleCreated property indicates whether the WebControl class's style has been created:

 publicboolControlStyleCreated{ get{ return(_controlStyle!=null); } } 

WebControl implements the CreateControlStyle method as follows :

 protectedvirtualStyleCreateControlStyle(){ returnnewStyle(ViewState); } 

The default implementation of the CreateControlStyle method returns a Style object. A derived control can override this method to create and return a custom style that derives from the Style class, as we will show in the MyPanel example in the "Implementing a Custom Typed Style ”The MyPanelStyle Example" section later in this chapter.

Classes that derive from the Style class are known as typed styles . The Style class can be extended by a control developer to create a custom typed style that overrides or adds to the properties of the Style class. A Web control can use a custom typed style as the type of the ControlStyle property. For example, the ControlStyle property of the Table control is of the TableStyle type, which extends Style to add properties such as CellPadding , CellSpacing , and GridLines . Later in this chapter, we'll show how you can create and use your own custom typed style. In the future, ASP.NET will support server-side style sheets consisting of typed styles. Looking ahead, you should consider creating typed styles that encapsulate appearance- related properties of your controls.

WebControl exposes the Styles collection property that accepts CSS attributes as name /value pairs. This allows a page developer to add styles that the control does not expose as style properties. We recommend that you do not use the Styles property because it does not offer the benefits of the strongly typed style properties that we described earlier. If your control needs additional style properties, you should define and use a custom typed style that implements those properties, as we will show in the MyPanel and the MyPanelStyle examples later in this chapter. WebControl also exposes a CssClass property that allows a page developer to specify a CSS class name as a string argument.

WebControl defines the following three methods for working with its ControlStyle property:

• CreateControlStyle

  Creates the ControlStyle , as shown earlier in this section. A custom control can override this method to modify the default values for style properties or to create a new typed style for its ControlStyle property . We'll show examples of this later in the chapter.

• ApplyStyle

  Copies style properties that are set in the style passed into the method to the control's own ControlStyle .

• MergeStyle

  Copies style properties from the style passed into the method to the control's own ControlStyle , copying those properties that are set in the specified style but not in ControlStyle .

Next we'll examine how WebControl delegates the rendering of styles to its ControlStyle property. In its AddAttributesToRender method, WebControl invokes the AddAttributesToRender method of its ControlStyle property:

 protectedvirtualvoidAddAttributesToRender(HtmlTextWriterwriter){  if(ControlStyleCreated&&!ControlStyle.IsEmpty){ //Letthestyleaddattributes. ControlStyle.AddAttributesToRender(writer,this); }  } 

As we described earlier, the style properties of WebControl are really subproperties of the ControlStyle property. The AddAttributesToRender method of the ControlStyle property implements logic to render these properties as HTML attributes or as CSS attributes (as appropriate) on the control's tag. In Chapter 8, we showed you how to use the attribute rendering methods of the HtmlTextWriter class. Later in this chapter, in the MyPanelStyle example, we'll show you how to override the AddAttributesToRender method of the Style class.

The final aspect of the style functionality of WebControl is the state management of styles. We'll now examine how WebControl delegates style-related state management to its ControlStyle property. The Style type of the ControlStyle property implements IStateManager and performs its own state management. From its TrackViewState , SaveViewState , and LoadViewState methods, WebControl invokes the corresponding methods of its ControlStyle property. In addition, when a control creates its ControlStyle , the control starts state tracking on the newly created Style object if the control is tracking state. You can see this functionality in the code fragment at the beginning of this section, which shows the definition of the ControlStyle property.

To implement state management, the Style class uses a ViewState property of type StateBag , just as the Control class uses for default state management. The Style class has two constructors: one takes a single parameter of the StateBag type, and the other does not take any parameters. When creating the control's style in CreateControlStyle , WebControl uses the one-parameter constructor and passes its own ViewState into the constructor, as we showed in the code for CreateControlStyle earlier in this section. This allows the Style object to use the same StateBag as the control that owns the style, which leads to a significant performance improvement. We'll show another example of using the one-parameter constructor in the MyPanelStyle example later in this chapter. In Chapter 12, "Composite Controls," we will use the no-parameter constructor of Style to create styles for child controls, which manage their state using their own StateBag instance.