Apply styles in ASP.net Web controls (style)

asp.net|web| Control translation: t.t (tpoi)





in this article, I'll show you how to use the Web classes in the. NET Framework class Library to create and apply styles (style) for Web server controls.











System.Web.UI.WebControls.Style class




The
style class is defined in the System.Web.UI.WebControls namespace to describe the style of a WEB server control. The properties of this class can set the appearance of Web server controls, or multiple Web server controls use a common look. You can use these properties to change the background color, foreground color, border width, border style, and Web server control size. Table 1 is the property of the style class





table 1. Properties of the style class





BackColor Gets or sets the background color of the WEB server control


BorderColor Gets or sets the border color of the WEB server control


BorderStyle Gets or sets the border style of a WEB server control


BorderWidth Gets or sets the border width of the WEB server control


CssClass Gets or sets the CSS class font that is rendered by the Web server control at the client to obtain the font properties associated with the Web server control


ForeColor Gets or sets the foreground color (usually the text color) of the WEB server control


height Gets or sets the height of the Web server control


width Gets or sets the width of the WEB server control





System.Web.UI.WebControls.WebControl.ApplyStyle Method





The ApplyStyle method is to apply the style you have set before to a Web server control. Here's a short piece of code:





WebControl Ctrl;


Style S;


//Set properties for style


.........


//Apply Style


Ctrl. ApplyStyle (s);








Example





now I'm going to use an example to illustrate how to apply styles in Web server controls. Create a Web application in Visual Studio.NET, add 3 controls to the form, Button, TextBox, ListBox. Add some items to the listbox (using the collection property). Please look at figure one











now creates 2 new methods, CreateStyle and Setcontrolstyle. The CreateStyle method has 7 parameters, such as background color, foreground color, and so on. This method returns the object of a style





//This method creates a new style





CreateStyle (color backclr, color foreclr, int borderwidth, string fntname, int fntsize, BOOL fntbold, BOOL fntitalic)


{


style s = new style ();


s.backcolor = backclr;


s.forecolor = foreclr;


s.borderwidth = borderwidth;


s.font.name = fntname;


S.font.size = fntsize;


s.font.bold = Fntbold;


s.font.italic = fntitalic;


return s;


}








//This method applies a style to a Web server control


private void Setcontrolstyle (System.Web.UI.WebControls.WebControl ctrl, Style s)


{


Ctrl. ApplyStyle (s);


}








will now create the button's Click event





private void Button1_Click (object sender, System.EventArgs e)


{


Style st = CreateStyle (Color.green, Color.yellow, 3, "Verdana", true, true);


Setcontrolstyle (TextBox1, ST);


st = CreateStyle (color.red, Color.Black, 2, "Verdana", true, true);


Setcontrolstyle (SETSTYLEBTN, ST);


st = CreateStyle (Color.Blue, Color.yellow, 2, "Verdana", true, true);


Setcontrolstyle (ListBox1, ST);


}