Customizing and Managing Your Site's Appearance with ASP.NET 2.0 Tools

This chapter is from the book

Core Internet Application Development with ASP.NET 2.0

Learn More Buy

This chapter is from the book

This chapter is from the book 

Core Internet Application Development with ASP.NET 2.0

Learn More Buy

Changing the Appearance of Server Controls

The previous chapters introduced many of the standard Web server controls. This section returns to the coverage of Web server controls by demonstrating how to more fully customize the appearance of these controls. The chapter does so in two ways. The first way uses common formatting properties of the Web server controls, whereas the second way uses cascading style sheets.

Using Common Appearance Properties

As mentioned back in Chapter 3, most of the standard Web server controls inherit from the WebControl class. This WebControl class in turn inherits from the Control class. Both of these base classes define properties that can be used to modify the appearance of any Web server control. Table 6.1 lists the principal appearance properties of the WebControl and Control classes.

Table 6.1. Appearance Properties of the WebControl and Control Classes

Any of the properties listed in Table 6.1 can be set declaratively or programmatically. For instance, the following markup demonstrates how to set the foreground and the background colors of a Label control.

<asp:Label id="labTest" runat="server"
   ForeColor="#CC33CC" BackColor="Blue"/>

To set the same properties programmatically, you could do so in a number of different ways, two of which are shown here.

labTest.ForeColor = Color.FromName("#CC33CC");
labTest.BackColor = Color.Blue;

Color is a C# struct that has fields for the predefined color names supported by the major browsers, as well as methods for creating a Color object from a name or from three numbers representing RGB values.

Most of the various appearance properties are rendered in the browser as inline CSS styles. For instance, the Label control from the preceding two examples would be rendered to the browser as

<span id="labTest" style="color:#CC33CC;
   
   background-color:Blue;"></span>

Using the Style Class

Setting the various formatting properties for your Web controls, whether through programming or declarative means, is acceptable when there are only one or two properties to set. However, when you have many properties that need to be changed in multiple controls, this approach is not very ideal. A better approach is to use the Style class.

The Style class is ideal for changing multiple properties to multiple controls all at once. It encapsulates most of the formatting properties listed in Table 6.1 and can be applied to multiple Web server controls to provide a common appearance. To use this class, you simply instantiate a Style object, set its various formatting properties, and then apply the style to any server control by using the control's ApplyStyle method. The following example illustrates this usage.

Style myStyle = new Style();
myStyle.ForeColor = Color.Green;
myStyle.Font.Name = "Arial";

// Now apply the styles to the controls
myLabel.ApplyStyle(myStyle);
myTextBox.ApplyStyle(myStyle);

The Style class is best for situations where you need to programmatically change the appearance of a set of controls all at once. If you simply need to set up a consistent appearance to a series of controls, it is almost always better to use Cascading Style Sheets (CSS) or ASP.NET themes, both of which are covered in this chapter.

Using CSS with Controls

The previous section demonstrated how to use some of the common appearance properties of Web server controls. Although these properties are very useful for customizing the appearance of your Web output, they do not contain the full formatting power of Cascading Style Sheets. Fortunately, you can also customize the appearance of Web server controls using CSS.

There are two ways to harness the power of CSS with Web server controls. The first way is to assign a CSS declaration to the Style attribute/property of a control. For instance, the following example sets the CSS letter-spacing property to increase the whitespace between each letter in the Label to 2 pixels, along with setting the font style to italic.

<asp:label id="labMsg" runat="server" Text="hello world"
   style="letter-spacing: 2px; font-style: italic" />

To achieve the same effect by programming, you would use

labMsg.Style["letter-spacing"] = "2px";
labMsg.Style["font-style"] = "italic";

Notice that from a programming perspective, the Style property is a named collection. A named collection acts like an array, except that individual items can be retrieved either through a zero-based index or a unique name identifier.

All styles added to a control, whether declaratively or programmatically, are rendered in the browser as an inline CSS rule. For instance, either of the two previous two examples would be rendered to the browser as

<span id="labMsg" style="letter-spacing:2px;font-style: italic">
hello world
</span>

The other way to use CSS with Web server controls is to assign a CSS class to the CssClass property of a control. For instance, assume that you have the following embedded CSS class definition.

<style type="text/css">
   .pullQuote { background: silver;
               margin: 10px;
               font-family: Verdana, Arial,Helvetica,sans-serif;
               font-size: 10pt; }
</style>

You could assign this CSS class via

<asp:label id="labMsg2" runat="server" CssClass="pullQuote" />

To achieve the same effect by coding, you would use

labMsg2.CssClass = "pullQuote";

Listings 6.1 and 6.2 demonstrate how to style Web server controls with CSS by using both the Style and CssClass properties. The markup contains three Label controls, each of which contain a paragraph of text. The form also contains two DropDownList controls. The first changes the CSS text-transform property (which changes the text from uppercase to lowercase) for two of the Label controls. The second DropDownList control sets the other Label control's CssClass property to one of two predefined CSS classes, both of which float the paragraph so that it becomes a pull quote relative to the other text (see Figure 6.1).

Figure 6.1 Using CSS.aspx

Although the example in Listing 6.1 uses embedded styles (that is, CSS rules within an HTML <style> element), you should generally locate a page's CSS in an external file and then link to it using the <link> element. By doing so, multiple pages in the site can use the same CSS file. As well, using an external CSS file generally reduces the page's bandwidth, because the browser can cache the CSS file.

Listing 6.1. Using CSS.aspx

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
   <title>Using CSS</title>
   <style type="text/css">
      body {
         background: #fffafa; margin: 1em;
         font: small/1.5em verdana, arial, sans-serif;
      }
      h1 {
         background: gold; color: black;
         font: bold 120% verdana, helvetica, sans-serif;
         letter-spacing: 0.25em; padding: 0.25em;
      }
      .controlPanel {
         padding: 0.5em; border: black 1px solid;
         background: #eee8a; margin: 1.5em; width: 75%;
      }
      .pullQuoteOne {
         padding: 0.25em; margin: 0.25em 1em;
         border: solid 7px #908070;
         border-right-width: 0; border-left-width: 0;
         background: lightgrey;
         float: right; width: 15em;
         font: bold 90% arial, helvetica, verdana, sans-serif;
      }

      .pullQuoteTwo {
         padding: 0.25em; margin: 1.5em;
         border: #82a91b 2px solid;
         background: #adc175;
         float: left; width: 10em;
         font: bold 105% times new roman, serif;
      }
   </style>
</head>
<body>
   <form id="form1" runat="server">
      <h1>Using Styles</h1>
      <p>
      <asp:Label ID="labOne" runat="server">
      The previous section demonstrated how to use some of the common
display properties of web server controls. While these properties are
very useful for customizing the appearance of your web output, they
do not contain the full formatting power of Cascading Style Sheets
(CSS).
      </asp:Label>
      </p>
      <p>
      <asp:Label ID="labPullQuote" runat="server">
      Luckily, you can also customize the appearance of web
      server controls using CSS.
      </asp:Label>
      </p>
      <p>
      <asp:Label ID="labTwo" runat="server">
      There are two ways to harness the power of CSS with web server
controls. The first way is to assign a CSS declaration to the Style
attribute/property of a control. For instance, the following example
sets the CSS letter-spacing property to set the white space between
each letter in the Label to 2 pixels, and the font style to italics.
The other way to use CSS with web server controls is to assign a CSS
class to the CssClass property of a control.
      </asp:Label>
      </p>

      <div class="controlPanel">
         <p>Modify styles using drop-down lists below:</p>
         <p>Paragraph Text text-transform style:
         <asp:DropDownList ID="drpParagraph" runat="server"
               AutoPostBack="True" OnSelectedIndexChanged=
               "drpParagraph_SelectedIndexChanged">
            <asp:ListItem Selected="True">
            Choose a text-transform style</asp:ListItem>
            <asp:ListItem Value="lowercase">
               lowercase</asp:ListItem>
            <asp:ListItem Value="uppercase">
               uppercase</asp:ListItem>
            <asp:ListItem Value="capitalize">
               capitalize</asp:ListItem>
         </asp:DropDownList>
         </p>
         <p>Pull Quote CSS class:
         <asp:DropDownList ID="drpPull" runat="server"
               AutoPostBack="True" OnSelectedIndexChanged=
               "drpPull_SelectedIndexChanged">
            <asp:ListItem Selected="True">
               Choose a css class</asp:ListItem>
            <asp:ListItem Value="pullQuoteOne">
               pullQuoteOne</asp:ListItem>
            <asp:ListItem Value="pullQuoteTwo">
               pullQuoteTwo</asp:ListItem>
         </asp:DropDownList>
         </p>
      </div>
   </form>
</body>
</html>

The code-behind class (shown in Listing 6.2) for this example is quite straightforward. It contains selection event handlers for the two DropDownList controls. The first of these changes the text-transform CSS property of two Label controls based on the user's selection; the second sets the CSS class of the pull quote Label based on the user's selection.

Listing 6.2. Using CSS.aspx.cs

public partial class UsingCSS : System.Web.UI.Page
{
   /// <summary>
   /// Handler for text transform drop-down list
   /// </summary>
   protected void drpParagraph_SelectedIndexChanged(
         object sender, EventArgs e)
   {
      if (drpParagraph.SelectedIndex > 0)
      {
         labOne.Style["text-transform"] =
            drpParagraph.SelectedValue;
         labTwo.Style["text-transform"] =
            drpParagraph.SelectedValue;
      }
   }
   /// <summary>
   /// Handler for pull quote drop-down list
   /// </summary>
   protected void drpPull_SelectedIndexChanged(object sender,
         EventArgs e)
   {
      if (drpPull.SelectedIndex > 0)
         labPullQuote.CssClass = drpPull.SelectedValue;
   }
}

Appearance Properties, CSS, and ASP.NET

The intent of CSS is to separate the visual presentation details from the structured content of the HTML. Unfortunately, many ASP.NET authors do not fully take advantage of CSS, and instead litter their Web server controls with numerous appearance property settings (e.g., BackColor, BorderColor, etc.). Although it is true that these properties are rendered as inline CSS styles, the use of these properties still eliminates the principal benefit of CSS: the capability to centralize all appearance information for the Web page or Web site into one location, namely, an external CSS file. Also, because the appearance properties are rendered as inline CSS, this increases the size and the download time of the rendered page.

By limiting the use of appearance properties for Web server controls within your Web Forms, and using instead an external CSS file to contain all the site's styling, your Web Form's markup becomes simpler and easier to modify and maintain. For instance, rather than setting the Font property declaratively for a dozen Web server controls in a page to the identical value, it makes much more sense to do so via a single CSS rule. And if this CSS rule is contained in an external CSS file, it could be used throughout the site (that is, in multiple Web Forms), reducing the overall amount of markup in the site.

However, ASP.NET 2.0 does provide an additional mechanism for centralizing the setting the appearance of Web server controls on a site-wide basis, called themes and skins, which is our next topic.