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 to make it easy to change the look and feel of their applications without touching the application code. While more developers have moved toward developing Web sites that take advantage of Cascading Style Sheets (CSS) to define the look and feel of their Web site, applying CSS styles to ASP.NET server controls can be confusing because it is up to the developer to know which HTML tags are rendered by the control and how they are rendered.
ASP.NET 2.0 supports a new feature called Themes which makes it easy for a developer to define the appearance for a set of controls at design time. The developer can then apply the Theme to his application at a control, page, or application level. Themes differ from CSS in two ways:
- Themes allow you to set many different control properties, not just style-specific properties.
- Themes do not cascade the way CSS styles do. A Theme property always takes precedence over the local property values and CSS style values.
In this article we ll look at how you can create a Theme for your Web application. We ll also explore how you can apply it to your application and interact with the Theme at run time.
What Are Themes?
Themes are a collection of Skins, XML, XSLT, images, and style sheets that can be applied as a single entity to your Web application. By default, ASP.NET 2.0 does not ship with any Themes; however, you can create your own. Additionally, sites like http://www.asp.net are planning to host Theme Galleries from which you can download themes.
Creating a Theme in your application is easy. All the assets that make up a Theme are located in the App_Themes directory of your project. You can create this folder by selecting Add Folder | Themes Folder from the Visual Studio Web site menu. When you create the App_Themes folder, a new Theme will be automatically added to your project.
Once you have created this folder you can begin adding assets to the Theme.
The primary asset you will most likely add to your Theme is a Skin file. Skins are a new feature in ASP.NET 2.0 that allow you to set property values on control types that can be applied to all controls of that type contained within the Theme.
For example, if you wanted all asp:Button controls in your Web page to have a beige background color, you would normally have to find each Button control and set its BackColor property or subclass the Button class and override the BackColor property. Both solutions present problems if you need to update 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 to the Theme folder (in our example, Theme1). Add the following to the Skin file:
Notice that the Skin looks a lot like the standard ASP.NET Button markup you would have in your Web page. The difference is that when we apply our Theme to the Web page, every button will have a beige background.
Let s apply our Theme to the default Web page in the application and add a button. To tell the page we want to use a Theme, we simply add the Theme attribute to the @Page declaration in our Web page:
<%@ Page Language="VB" Theme="Theme1" %>
When you load the Web page in a browser, notice that the Theme 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 the ASP.NET toolbox in the Skin file, even advanced controls like the GridView.
You can also apply a Theme at an application-wide level by
Adding this tells ASP.NET to apply the specified Theme to all pages in the Web application. Note that a Theme applied at the application-wide level will override and duplicate elements in a Theme applied at the page level.
For instance, if you defined the asp:Button control in two different Skins, the Skin applied to the application would override the Skin applied to the page.
Control Specific Skins
You can also create Skin definitions and have them apply to only specific controls in your application. To create a control-specific Skin, simply add the SkinID attribute to the control tag in your Skin file:
Now you can tell controls on your Web page to use a specific Skin element by adding a SkinID attribute. In our example, we simply added another button to the Web page:
As shown in the figure below, the page now has a beige and a green button as defined by our Skin.
Other Theme Assets
Other assets that can be included in a Theme are Style Sheets and Images. For instance, if you wanted to use a Style Sheet to change the background color of our sample Web page, you can add a Style Sheet to the Theme folder and create background-color style for the body:
Adding the stylesheet changes the background color, as shown in the figure below.
As you can see, the new Themes feature of ASP.NET 2.0 can be very useful for creating simple, page, or site-wide UI standards for your Web applications. Combining Themes with CSS, you can create compelling Web sites that can be easily maintained and changed.
With that, we remind you to e-mail your questions to us at [email protected].
Andrew Flick is a .NET technical evangelist for Infragistics Inc., a Microsoft Visual Studio Industry Partner. He is responsible for authoring reference applications and .NET technology articles, as well as delivering Infragistics technology demonstrations worldwide. Andrew is a Microsoft .NET MVP and is the chair of the INETA Academic Student Committee. Contact Andrew at mailto:[email protected].
Devin Rader is an Infragistics Technology Evangelist and is responsible for authoring Infragistics reference applications and .NET technology articles, as well as the world-wide delivery of Infragistics technology demonstrations. Devin is an active member and leader for INETA, has served as the sole technical editor for numerous works, and is a contributing author for the soon to be published ASP.NET 2.0 Professional. Contact Devin at mailto:[email protected].