Creating ASP.NET Custom Controls with Style : Page 2

Rendering Instead of Writing
Although what you've seen so far will certainly get the job done, it is not the most appealing way of creating output. It is tedious and even with methods such as WriteBeginTag, still error prone. The alternative is to let ASP.NET render tags with attributes and formatting. Rendering tags is much easier and quicker than writing everything by hand. You are, however, subject to the quirks of ASP.NET's rendering mechanism. With rendering you don't have control over every character written to the output, but ASP.NET renders HTML 3.2 or HTML 4.0 with CSS, depending on the HtmlTextWriter passed to the Render method. This has the same drawback as checking the HtmlTextWriter type, but you can again change this by changing machine.config. Listing 4 shows code that renders the text property in red, and sets Verdana as the font. If you passed Html32TextWriter to the Render method, Listing 4 would result in the following HTML:

   <p><font face="Verdana" 
      color="Red">Netscape</font></p>
   Otherwise it results in HTML using CSS as shown below:
   <p style="color:Red;font-family:Verdana">
   My Text</p>

Because you don't have to deal with the browser differences, this saves you a lot of work. Also notice that you no longer write tags explicitly, but that you tell the HtmlTextWriter to render a certain tag from a known set of tags. When rendering end tags, ASP.NET automatically renders the end tag corresponding to the last rendered begin tag, making sure that you never nest tags improperly. Also, notice that all formatting you want to apply to a tag needs to be added to the HtmlTextWriter before you render the begin tag.

Using the Style Class
Up until now you've had to hard code all the formatting in the samples. You can remedy this situation by adding public properties to the control that enables the user of the control to set color, font, and so on. If you were to add a property for every type of formatting you could apply to a control, you'd have to create quite a few properties, and make sure that they are all rendered when rendering tags. There's a better solution: You can save yourself a lot of work by using the Style class in the System.Web.UI.WebControls namespace. The Style class contains all properties that you find in a Label control: background color, text color, font, and borders, just to name a few. In fact, when you use a control such as the Calendar control, the separate styles you can set, for instance SelectedDayStyle, are based on the Style class. There are several derived classes such as the TableStyle class that implement additional formatting properties that apply to certain HTML tags. You can use each of these to add your own styles to a control by adding properties with type Style, as shown in Listing 5. (Note: The Style property in Listing 5 is not added to the ViewState. How you can add custom styles to the ViewState is beyond the scope of this article.) In Listing 5 the AddAttributesToRender method on MyStyle is called to add all the formatting to the tag that's being rendered. The added formatting is rendered by the HtmlTextWriter as best it can. This means that background color for text will not be shown when rendering HTML 3.2. For most complex controls you shouldn't try to get around that within a control. The sidebar "Browser Dependent Templates," offers a solution that is better in most cases.

When rendering end tags, ASP.NET automatically renders the end tag corresponding to the last rendered begin tag, making sure that you never nest tags improperly.

If you've inherited your control from an existing control, or from System.Web.UI.WebControl, your control most likely already provides the Style class to change the overall formatting of the control. This is known as the ControlStyle, but control users can just refer to the items in the Style class directly, so they can use:

   Font-Names="Verdana,Arial"

instead of specifying a specific style such as the SelectedDayStyle, like this:

   SelectedDayStyle-Font-Names="Verdana,Arial"

Within the Render method you can apply this style to a tag by using:

   this.ControlStyle.AddAttributesToRender(output);

You can also override the RenderContents method, instead of the Render method. By doing so you ensure that ASP.NET writes the outer tag and formatting automatically. All you have to do in RenderContents is render everything inside the main tags.

Previous Page

Next Page