ASP.net 2.0 server control's composite control style

To set the appearance of a composite control, a composite control must provide some style properties, especially for child controls. In this article, we will focus on two ways to implement style properties for a composite control.

1, upload some style properties

Before you implement style properties for a composite control, the reader should first understand the basic concept of style bubbling. Style bubbling is used to implement the style properties of a composite control. Because there are multiple child controls in a composite control, the style properties of these child controls may, in some cases, interfere with the style properties of the composite control, causing the style property to clutter. For a more explicit definition of the style properties of a composite control, you can take the style properties of a child control as a top-level style property, which is called "style bubbling."

Typically, developers can face two situations: one is to upload a few style attributes from a child control, and the other is to upload all the style properties in a child control. This section only describes the implementation methods for the first case, while the other one is explained in the following section.

The key to this method of implementing style properties described in this section is to introduce style properties by specifying a key/value pair for the child control's attributes, which uploads the child control's style properties to the composite control top-level property. To facilitate the reader's understanding of this approach, a typical application is listed below.

In this example, a composite control mycontrol is implemented, and a table control is included in its child control collection. Currently, you need to upload the table child control's style properties cellpadding and border to MyControl's top-level style properties. The specific source code is shown below.

public class MyControl : CompositeControl{
　// 相关代码 ......
　// 定义初始值

　private int _cellPadding = 0;
　private int _border = 1;
　......
　// 定义样式属性，它和Table控件的样式属性CellPadding和Border类似
　public int CellPadding{
　　get { return _cellPadding; }
　　set { _cellPadding = value; }
　　// 实现属性Border
　　public int Border{
　　　get { return _border; }
　　　set { _border = value; }
　　　......
　　　// 重写CreateChildControls方法
　　　protected override void CreateChildControls() {
　　　　//相关代码
　　　　......
　　　　Table t = new Table(); //将前面定义的属性添加到键/值对中
　　　　t.AddAttributes.Add("CellPadding",_cellPadding.ToString());
　　　　t.AddAttributes.Add("Border",_border.ToString());
　　　　......
　　　}
　}

The above code shows some of the key source code for MyControl, which focuses on key steps to implement some of the style property bubbles. (1) Initialize the fields of the top-level style properties, and define the initial values if necessary. (2) Define a property with the same name as the style property of the child control that needs to be upgraded. Attributes cellpadding and border are defined in the code above. (3) Introduce the property defined in step 2nd in the Attributes key/value pair of the child control.

When you set the property values for style properties cellpadding and border in mycontrol, you actually set the cellpadding and border property values for the table child control. Style bubbling can be achieved with the above 3 key steps.

If you look closely, you can see that there are some problems with this style-bubbling approach described above: first, this method only applies to upgrading a few style properties in a child control. If you need to upgrade all of the child control's style properties and still use this method, it is tedious and prone to error. Secondly, the implemented style attribute lacks logic and organization. In some cases, for example, the same style property for multiple child controls needs to be upgraded to the top-level property, using this method can cause confusion.

To address these issues, the following is an implementation of all style attributes for uploading child controls.