Control style for ASP. NET 2.0 Server Control Development

With the development and maturity of. NET technology, server controls have become increasingly popular among developers. At the same time, the development of server controls also showed some trends, for example, the more powerful the function, a lot of functions are gradually transferred from the server side to the client. In addition, server controls are becoming more and more beautiful. This may be due to the increasing emphasis on functions and appearance of Windows operating systems. This article and subsequent articles will focus on how to make the server control look beautiful. In fact, the appearance of the server control is mainly determined by the style attribute. This article focuses on the basic knowledge of implementing the control style.

　　Server Control style Overview

For common application developers, you only need to know the style attributes of the server control and the impact of each style attribute on the control appearance. For example, to modify the background color of a page, you need to modify the BackgroundColor value of the style attribute. To set the appearance of a table object, you may need to set style attributes such as BorderColor and BorderWidth. However, for a control developer, they not only need to master the relevant knowledge of the application developer, but also need to understand how to create style attributes of the build control.

Generally, server controls with style attributes are inherited from the System. Web. UI. WebControl base class. In this way, the control class can automatically inherit multiple style attributes in the base class. These style attributes include obtaining or setting the BackColor of the control background color, obtaining or setting the ForeColor of the control foreground color, obtaining or setting the BorderColor of the control border color, and obtaining or setting the BorderStyle of the control border style.. If the control class inherits from the WebControl base class, these style attributes can be automatically inherited, and developers are allowed to rewrite these style attributes based on actual conditions. In addition, if the control class inherits from other existing control classes, such as the GridView, the custom control automatically inherits the style attributes of the GridView base class, for example, you can set AlternatingRowStyle of the alternate data row style and EditRowStyle of the Data row being edited. Obviously, these style attributes inherited from existing server controls are not the focus of this article. However, you should understand that style attributes allow inheritance from the base class and can be directly used without modification. We will continue to discuss the style attributes in the WebControl class.

The style of the WebControl class is encapsulated in the ControlStyle attribute. The attribute value is of the Style data type. To better understand ControlStyle, the following lists the definition code of the ControlStyle attribute.

Private Style _ controlStyle;
// Define the ControlStyle attribute
Public Style ControlStyle {
Get {
If (_ controlStyle = null ){
_ ControlStyle = CreateControlStyle ();
If (IsTrackingViewState ){
(IStateManager) _ controlStyle). TrackViewState ();
}
}
}
}
// Define the CreateControlStyle Method
Protected virtual Style CreateControlStyle () {return new Style (ViewState );}

As shown in the code above, ControlStyle is a read-only attribute and its data type is Style. When this attribute is accessed for the first time, the process is: first, judge whether _ controlStyle is null. If it is null, call the CreateControlStyle method to create the _ controlStyle object, is an instance of a Style. Then, the view state tracking task is executed. The specific process is completed by the TrackViewState method provided by the Style class.

After a preliminary understanding of the ControlStyle attribute, we should then understand the Style class closely related to this attribute.

The Style Class is used to indicate the Style of the server control. It includes the following attributes:

(1) BackColor: obtain or set the background color of the Web server control;

(2) BorderColor: Get or set the border color of the control;

(3) BorderStyle: Get or set the border style of the control;

(4) BorderWidth: Get or set the Border width of the control;

(5) CssClass: obtains or sets the Cascading Style Sheet class displayed by the control on the client;

(6) Font: Get the Font attributes associated with the control;

(7) ForeColor: obtain or set the foreground color of the control;

(8) Height: Get or set the Height of the control;

(9) IsEmpty: gets a value indicating whether any style element has been defined in ViewState;

(10) IsTrackingViewState, which returns a value indicating whether the view status is being tracked.

(11) RegisteredCssClass: obtains the Cascading Style Sheet Class Registered with the control;

(11) ViewState: Get the view State of the saved style element.

In addition, the Style class also includes some member methods. They can be used to conveniently operate styles. The WebControl and Style classes are used to implement Style operations.

(1) protected neural Ural Style CreateControlStyle ()

Create a style object internally used by the WebControl class to implement all style-related attributes.

(2) public void ApplyStyle (Style s)

Copy all non-blank elements of the specified style to the server control and rewrite all existing style elements of the control. S indicates the style to be copied.

(3) public void MergeStyle (Style s)

Copy all non-blank elements of the specified style to the server control, but do not rewrite any existing style elements of the control. S indicates the style to be copied.

The preceding three methods are from the WebControl class. The following two methods are from the Style class.

(4) public virtual void CopyFrom (Style s)

Copy the Style attribute of the specified Style to the instance of the Style class that calls this method. S indicates the Style of the Style to be copied. All attributes in the current instance of the Style class using this method will be replaced with the Association attribute in the Style specified by the s parameter.

(5) public virtual void MergeWith (Style s)

Combines the Style attribute of the specified Style with the instance of the Style class from which this method is called. S indicates the Style of the Style to be merged. This method connects the attributes of two Style objects by setting attributes not set in the current instance of the Style class to values in the corresponding attribute of the Style specified by the s parameter. Only unset properties will be replaced. If the attribute in the s parameter is not set, it will not replace the corresponding attribute in the current instance of the Style class.

To help readers better understand the above methods, the following is a sample code.

// Define two Style object instances
Style s1 = new Style ();
Style s2 = new Style ();
// Define the ForeColor attribute values for s1 and s2 respectively
S1.ForeColor = Color. Red;
S2.ForeColor = Color. White;
// Call related methods
S1.CopyFrom (s2 );
S1.MergeFrom (s2 );

The above code is relatively simple. When the CopyFrom method is called, The ForeColor attribute value of the Style object instance s1 is changed to Color. after MergeFrom is called, The ForeColor attribute value of s1 remains unchanged and is still Color. red.

 

　　Rewrite style attributes

The reload of style attributes is no different from that of other attributes. However, during implementation, you must note that modifications to the attribute values must be uploaded to the ControlStyle attribute of the control. The following is an example application that overwrites the style attributes CellSpacing and Caption of the Table control. The source code of the server control is as follows.

Using System;
Using System. Collections. Generic;
Using System. ComponentModel;
Using System. Text;
Using System. Web;
Using System. Web. UI;
Using System. Web. UI. WebControls;
Namespace WebControlLibrary {
[DefaultProperty ("Text")]
[ToolboxData ("<{0}: WebCustomControl runat = server> </{0}: WebCustomControl>")]
Public class WebCustomControl: Table {
// Create a constructor
Public WebCustomControl (){
Base. Caption = "Work Arrangement list ";
Base. CellSpacing = 0;
}
// Override the CellSpacing attribute
[Bindable (false), Browsable (false), DefaultValue (0)]
Public override int CellSpacing {
Get {
Return base. CellSpacing;
}
Set {
Throw new NotSupportedException ("CellSpacing attribute cannot be set .");
}
}
// Rewrite the Caption attribute
[DefaultValue ("work arrangement List")]
Public override string Caption {
Get {return base. Caption ;}
Set {base. Caption = value ;}
}
}
}

The above code is mainly used to describe how to override style attributes. The specific analysis is as follows.

(1) The control class WebCustomControl inherits from the Table. In this way, the custom control automatically inherits all the style attributes of the Table control. This laid the foundation for rewriting style attributes.

(2) set the Caption and CellSpacing attribute values in the constructor of the control class.

(3) override the CellSpacing attribute. The metadata property tag indicates that the property cannot be Bindable, tells the designer that the property cannot be browsed (Browsable), and sets the default value to 0 (DefaultValue ). In addition, an exception is defined in the setting operation of the CellSpacing attribute. This exception is displayed when developers set this attribute.

(4) rewrite the Caption attribute and set the default value for this attribute.

Some readers may think that the configuration content of the constructor is meaningless. In fact, the core of this example is this. Only when a new property value is set in the constructor can the new value be passed to the ControStyle property. ControlStyle attributes are mainly used to manage the style status and generate style attributes. If the changes are not transmitted to ControlStyle, the rewritten style attributes will not be displayed as expected.

The following lists the source code of the Default. aspx page created to test the custom control WebCustomControl.

<% @ Page Language = "C #" AutoEventWireup = "true" CodeFile = "Default. aspx. cs" Inherits = "_ Default" %>
<% @ Register TagPrefix = "wcc" Namespace = "WebControlLibrary" Assembly = "WebControlLibrary" %>
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head runat = "server">
<Title> rewrite style attributes </title>
</Head>
<Body>
<Form id = "form1" runat = "server">
<Div>
<Wcc: webCustomControl ID = "demo1" runat = "server" Font-Size = "small" BorderWidth = "1px" CellPadding = "4" BorderColor = "black" GridLines = "both">
<Asp: TableRow>
<Asp: TableCell font-bold = "True" runat = "server"> Work Item </asp: TableCell>
<Asp: TableCell font-bold = "True" runat = "server"> end date </asp: TableCell>
<Asp: TableCell font-bold = "True" runat = "server"> remarks </asp: TableCell>
</Asp: TableRow>
<Asp: TableRow runat = "server">
<Asp: TableCell runat = "server"> Job 1 </asp: TableCell>
<Asp: TableCell runat = "server"> August 1, July 17 </asp: TableCell>
<Asp: TableCell runat = "server"> remarks </asp: TableCell>
</Asp: TableRow>
<Asp: TableRow runat = "server">
<Asp: TableCell runat = "server"> job 2 </asp: TableCell>
<Asp: TableCell runat = "server"> August 1, July 27 </asp: TableCell>
<Asp: TableCell runat = "server"> remarks </asp: TableCell>
</Asp: TableRow>
<Asp: TableRow runat = "server">
<Asp: TableCell runat = "server"> job 3 </asp: TableCell>
<Asp: TableCell runat = "server"> August 1, July 29 </asp: TableCell>
<Asp: TableCell runat = "server"> remarks </asp: TableCell>
</Asp: TableRow>
</Wcc: WebCustomControl>
</Div>
</Form>
</Body>
</Html>

The example application is shown below.

According to Default. as you can see from the source code and Application of aspx, the table title and CellSpacing in are all set in the custom control, rather than explicitly marked by the control. This is the result of overwriting the style attribute of the control.

　　Summary

This article first briefly introduces the basic knowledge of the control style on the server, and then illustrates how to override the control style attributes through a typical example. It is hoped that the reader can gain a deeper understanding of the style attributes of the server control. In subsequent articles, we will explain how to implement style attributes.