ASP.NET 2.0 Themes

UI Tips

LANGUAGES: ALL

ASP.NET VERSIONS: 2.0

ASP.NET 2.0 Themes

Create UI Standards

By Andrew Flick and Devin Rader

A common problem amongst Web developers is finding ways tomake it easy to change the look and feel of their applications without touchingthe application code. While more developers have moved toward developing Web sitesthat take advantage of Cascading Style Sheets (CSS) to define the look and feelof their Web site, applying CSS styles to ASP.NET server controls can beconfusing because it is up to the developer to know which HTML tags arerendered by the control and how they are rendered.

ASP.NET 2.0 supports a new feature called Themes whichmakes it easy for a developer to define the appearance for a set of controls atdesign time. The developer can then apply the Theme to his application at acontrol, page, or application level. Themes differ from CSS in two ways:

In this article we ll look at how you can create a Themefor your Web application. We ll also explore how you can apply it to yourapplication and interact with the Theme at run time.

What Are Themes?

Themes are a collection of Skins, XML, XSLT, images, andstyle sheets that can be applied as a single entity to your Web application. Bydefault, ASP.NET 2.0 does not ship with any Themes; however, you can createyour own. Additionally, sites like http://www.asp.netare planning to host Theme Galleries from which you can download themes.

Creating Themes

Creating a Theme in your application is easy. All theassets that make up a Theme are located in the App_Themes directory of yourproject. You can create this folder by selecting Add Folder | Themes Folderfrom the Visual Studio Web site menu. When you create the App_Themes folder, anew Theme will be automatically added to your project.

Once you have created this folder you can begin addingassets to the Theme.

Creating Skins

The primary asset you will most likely add to your Themeis a Skin file. Skins are a new feature in ASP.NET 2.0 that allow you to setproperty values on control types that can be applied to all controls of thattype contained within the Theme.

For example, if you wanted all asp:Button controls in yourWeb page to have a beige background color, you would normally have to find eachButton control and set its BackColor property or subclass the Button class andoverride the BackColor property. Both solutions present problems if you need toupdate the color at a later date.

A Skin allows you to set properties as part of a Theme,which can be easily changed. To create a Skin, simply add a new Skin file tothe Theme folder (in our example, Theme1). Add the following to the Skin file:

Notice that the Skin looks a lot like the standard ASP.NETButton markup you would have in your Web page. The difference is that when weapply our Theme to the Web page, every button will have a beige background.

Let s apply our Theme to the default Web page in theapplication and add a button. To tell the page we want to use a Theme, wesimply add the Theme attribute to the @Page declaration in our Web page:

<%@ Page Language="VB" Theme="Theme1" %>

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

When you load the Web page in a browser, notice that theTheme has been applied. You can tell this because the button BackColor is beige,which was defined in the Skin we added to the Theme.

You can define properties for almost every control in theASP.NET toolbox in the Skin file, even advanced controls like the GridView.

You can also apply a Theme at an application-wide level byadding the element to your web.config file:

Adding this tells ASP.NET to apply the specified Theme toall pages in the Web application. Note that a Theme applied at the application-widelevel will override and duplicate elements in a Theme applied at the pagelevel.

For instance, if you defined the asp:Button control in twodifferent Skins, the Skin applied to the application would override the Skinapplied to the page.

Control Specific Skins

You can also create Skin definitions and have them applyto only specific controls in your application. To create a control-specificSkin, simply add the SkinID attribute to the control tag in your Skin file:

Now you can tell controls on your Web page to use aspecific Skin element by adding a SkinID attribute. In our example, we simplyadded another button to the Web page:

As shown in the figure below, the page now has a beige anda green button as defined by our Skin.

Other Theme Assets

Other assets that can be included in a Theme are StyleSheets and Images. For instance, if you wanted to use a Style Sheet to changethe background color of our sample Web page, you can add a Style Sheet to theTheme folder and create background-color style for the body:

body

{

   background-color:Yellow;

}

Adding the stylesheet changes the background color, asshown in the figure below.

Conclusion

As you can see, the new Themes feature of ASP.NET 2.0 canbe very useful for creating simple, page, or site-wide UI standards for your Webapplications. Combining Themes with CSS, you can create compelling Web sitesthat can be easily maintained and changed.

With that, we remind you to e-mail your questions to us [email protected].

Andrew Flick is a.NET technical evangelist for Infragistics Inc., a Microsoft Visual StudioIndustry Partner. He is responsible for authoring reference applications and.NET technology articles, as well as delivering Infragistics technologydemonstrations worldwide. Andrew is a Microsoft .NET MVP and is the chair of theINETA Academic Student Committee. Contact Andrew at mailto:[email protected].

Devin Rader is anInfragistics Technology Evangelist and is responsible for authoringInfragistics reference applications and .NET technology articles, as well asthe world-wide delivery of Infragistics technology demonstrations. Devin is anactive member and leader for INETA, has served as the sole technical editor fornumerous works, and is a contributing author for the soon to be published ASP.NET 2.0 Professional. Contact Devin at mailto:[email protected].