|
Applying Styles to Controls
The Web is a flexible environment for user interfaces, with extreme variations in the look and feel of different Web sites. The
widespread adoption of cascading style sheets (CSS) is largely responsible for the rich designs encountered on the Web. All of ASP.NET's HTML server controls and Web server controls
have been designed to provide first-class support for CSS styles. This section discusses how to use
styles in conjunction with server controls and demonstrates the very fine control over the look and feel of your Web Forms that they provide.
Applying Styles to HTML Controls
Standard HTML tags support CSS through a style attribute, which can be set to a semicolon-delimited list of attribute/value pairs.
For more information about the CSS attributes supported by the Internet Explorer browser, see
MSDN Web Workshop's CSS Attributes Reference page.
All of the ASP.NET HTML server controls can accept styles in exactly the same manner as standard HTML tags. The following example
illustrates a number of styles applied to various HTML server controls. If you view the source code on the page returned to the client, you will see that these styles are passed along to the browser in the control's rendering.
VB Style1.aspx
CSS also defines a class attribute, which can be set to a CSS style definition contained in a <style>...</style> section of
the document. The class attribute makes it easy to define styles once and apply them to several tags without having to redefine the
style itself. Styles on HTML server controls also can be set in this manner, as demonstrated in the following sample.
VB Style2.aspx
When an ASP.NET page is parsed, the style information is populated into a Style property (of type CssStyleCollection)
on the System.Web.UI.HtmlControls.HtmlControl class. This property is essentially a dictionary that exposes the control's
styles as a string-indexed collection of values for each style-attribute key. For example, you could use the following code to set and
subsequently retrieve the width style attribute on an HtmlInputText server control.
<script language="C#" runat="server" >
void Page_Load(Object sender, EventArgs E) {
MyText.Style["width"] = "90px";
Response.Write(MyText.Style["width"]);
}
</script>
<input type="text" id="MyText" runat="server"/>
C#
This next sample shows how you can programmatically manipulate the style for an HTML server control using this Style collection property.
VB Style3.aspx
Applying Styles to Web Server Controls
Web server controls provide an additional level of support for styles by adding several strongly typed properties for commonly used
style settings, such as background and foreground color, font name and size, width, height, and so on. These style properties represent a
subset of the style behaviors available in HTML and are represented as "flat" properties exposed directly on the
System.Web.UI.WebControls.WebControl base class. The advantage of using these properties is that they provide
compile-time type checking and statement completion in development tools such as Microsoft Visual Studio .NET.
The following sample shows a WebCalendar control with several styles applied to it (a calendar without styles applied is included for
contrast). Note that when setting a property that is a class type, such as Font, you need to use the subproperty syntax
PropertyName-SubPropertyName .
VB Style4.aspx
The System.Web.UI.WebControls namespace includes a Style base class that encapsulates common style
attributes (additional style classes, such as TableStyle and TableItemStyle, inherit from
this common base class). Many Web server controls expose properties of this type for specifying the style of individual rendering
elements of the control. For example, the WebCalendar exposes many such style properties: DayStyle,
WeekendDayStyle, TodayDayStyle, SelectedDayStyle, OtherMonthDayStyle,
and NextPrevStyle. You can set individual properties of these styles using the subproperty syntax
PropertyName-SubPropertyName, as the following sample demonstrates.
VB Style5.aspx
A slightly different syntax allows each Style property to be declared as a child element nested within Web server control tags.
<ASP:Calendar ... runat="server">
<TitleStyle BorderColor="darkolivegreen" BorderWidth="3"
BackColor="olivedrab" Height="50px" />
</ASP:Calendar>
The following sample shows alternative syntax but is functionally equivalent to the preceding one.
VB Style6.aspx
As with HTML server controls, you can apply styles to Web server controls using a CSS class definition. The WebControl base class exposes a String property named CssClass for setting the style class:
VB Style7.aspx
If an attribute is set on a server control that does not correspond to any strongly typed property on the control, the attribute
and value are populated in the Attributes collection of the control. By default, server controls will render these attributes
unmodified in the HTML returned to the requesting browser client. This means that the style and class attributes can be
set on Web server controls directly instead of using the strongly typed properties. While this requires some understanding of the actual
rendering of the control, it can be a flexible way to apply styles as well. It is especially useful for the standard form input controls,
as illustrated in the following sample.
VB Style8.aspx
Web server control styles can also be set programmatically, using the ApplyStyle method of the base WebControl class, as in the following code.
<script language="C#" runat="server">
void Page_Load(Object Src, EventArgs E ) {
Style style = new Style();
style.BorderColor = Color.Black;
style.BorderStyle = BorderStyle.Dashed;
style.BorderWidth = 1;
MyLogin.ApplyStyle (style);
MyPassword.ApplyStyle (style);
MySubmit.ApplyStyle (style);
}
</script>
Login: <ASP:TextBox id="MyLogin" runat="server" />/<p/>
Password: <ASP:TextBox id="MyPassword" TextMode="Password" runat="server" />
View: <ASP:DropDownList id="MySelect" runat="server"> ... </ASP:DropDownList>
C#
The following sample demonstrates the code above.
VB Style9.aspx
|