5.6 Modifying Control Appearance | ASP.NET in a Nutshell, Second Edition

One of the great things about ASP.NET Server Controls is that they are incredibly flexible in allowing developers to define how they should appear on the page. Most server controls expose properties that allow simple formatting, such as fonts and background colors. All server controls also expose properties that allow for setting cascading style sheets (CSS) styles to modify the appearance of a control. Finally, some controls allow the use of templates to further define how the output of the control should appear. Together or individually, these techniques allow ASP.NET developers extensive control over the appearance of their controls.

5.6.1 Properties

Using control properties is the simplest technique for modifying the appearance of a control. Example 5-14 shows a page with two Label controls, one of which uses its default settings. The second Label control has one attribute used to set the Font-Name property. Font is a property that is represented by the FontInfo class. Setting the font-name attribute sets the value of the FontInfo class' Name member. Note that this second Label control also has the BackColor property set (in this case, to blue) in the Page_Load event handler. The output from Example 5-14 is shown in Figure 5-12.

Example 5-14. ControlProps.aspx

<%@ Page Language="vb" %> <html> <head>    <title>Control Properties Example</title>    <script runat="server">       Sub Page_Load( )          Label2.BackColor = System.Drawing.Color.LightBlue       End Sub    </script> </head> <body>    <h1>Control Properties Example</h1>    <form runat="server">       <asp:table  border="1" cellpadding="5"           cellspacing="0" runat="server">          <asp:tablerow runat="server">             <asp:tablecell runat="server">                Default Label:             </asp:tablecell>             <asp:tablecell runat="server">                <asp:label  runat="server">                   Hello, World!                </asp:label>             </asp:tablecell>          </asp:tablerow>          <asp:tablerow runat="server">             <asp:tablecell runat="server">                Label with Properties:             </asp:tablecell>             <asp:tablecell runat="server">                <asp:label  font-name="arial"                    runat="server">                   Hello, World!                </asp:label>             </asp:tablecell>          </asp:tablerow>       </asp:table>    </form> </body> </html>

Figure 5-12. Control properties

5.6.2 CSS Styles

A more extensive technique for modifying control appearance involves the use of CSS styles. The base HtmlControl class (from which all HTML controls inherit) exposes a Style property, which contains a collection of CSS styles that are rendered at runtime as attributes on the tag generated by the control. The base WebControl class (from which all web controls inherit) also exposes a Style property and adds a CssClass property, which renders the value of the property as a class attribute on the control. This property allows you to set the style of a control using a CSS class defined in a stylesheet, rather than by setting individual styles. Like many other properties of web and HTML controls, the Style and CssClass properties can be set either declaratively (using attributes) or programmatically. Example 5-15 illustrates the use of both properties. Example 5-16 shows the HTML that would be rendered to the browser by Example 5-15. Note that the ViewState hidden field has been removed for clarity.

Example 5-15. ControlStyles.aspx

<%@ Page Language="vb" %> <html> <head>    <title>Control Properties Example</title>    <script runat="server">       Sub Page_Load( )          Label2.Style("background-color") = "silver"       End Sub    </script>    <style>        .Hello           {             font: 14pt arial;             color:blue;        }    </style> </head> <body>    <h1>Control Properties Example</h1>    <form runat="server">       <asp:table  border="1" cellpadding="5" cellspacing="0"           runat="server">          <asp:tablerow runat="server">             <asp:tablecell runat="server">                HtmlInputText Control:             </asp:tablecell>             <asp:tablecell runat="server">               <input  type="text"                 style="font: 12pt arial;background-color:silver;color:red;"                 runat="server"/>             </asp:tablecell>          </asp:tablerow>          <asp:tablerow runat="server">             <asp:tablecell runat="server">                Label with Style:             </asp:tablecell>             <asp:tablecell runat="server">                <asp:label  css runat="server">                   Hello, World!                </asp:label>             </asp:tablecell>          </asp:tablerow>       </asp:table>    </form> </body> </html>

Example 5-16. Rendered HTML from ControlStyles.aspx

<html> <head>    <title>Control Properties Example</title>    <style>        .Hello           {             font: 14pt arial;             color:blue;        }    </style> </head> <body>    <h1>Control Properties Example</h1>    <form name="_ctl0" method="post" action="ControlStyles.aspx"        >       <table  cellspacing="0" cellpadding="5" border="1"           border="0" style="border-collapse:collapse;">          <tr>          <td>                HtmlInputText Control:             </td>             <td>                <input name="Text1"  type="text"                 style="font: 12pt arial;background-color:silver;color:red;"                 />             </td>          </tr>          <tr>             <td>                Label with Style:             </td>             <td>                <span                      style="background-color:silver;">                   Hello, World!                </span>             </td>          </tr>       </table>    </form> </body> </html>

5.6.3 Templates

Certain controls, most notably the Repeater data-bound control, can also use templates to specify the appearance of the control output. In fact, the Repeater control requires at least one template (the ItemTemplate) to display anything at all.

The Repeater works by rendering anything contained in the HeaderTemplate (if defined) and then rendering the contents of its data source based on the ItemTemplate, AlternatingItemTemplate (if defined), and SeparatorTemplate (if defined).

Once all rows of the data source have been rendered, the Repeater then renders the contents of the FooterTemplate (if defined). Figure 5-13 shows the output of ControlTemplates.aspx.

Figure 5-13. Template output