Sie sind auf Seite 1von 13

Creating Web Application Themes in ASP.NET 2.0 (Visual Studio 2005 Technical ...

Page 1 sur 13

MSDN Home > MSDN Library > .NET Development > Web Applications (ASP.NET) >

Creating Web Application Themes in


ASP.NET 2.0 Page Options
Average rating:
Stephen Walther 7 out of 9
Superexpert
Rate this page
October 2004 Print this page
Updated March 2005
E-mail this page
Applies to: Add to Favorites
Microsoft ASP.NET 2.0
Microsoft Visual Studio 2005

Summary: Stephen Walther discusses the ins and outs of themes, a feature new to ASP.NET 2.0, including how
to use both cascading style sheets and images with themes, and how you can dynamically load themes at run
time. (20 printed pages)

Contents
Introduction
Creating and Applying a Simple Theme
Default Skins vs. Named Skins
Applying a Theme to an Entire Application
Themes vs. StyleSheetThemes
Images and Themes
Cascading Style Sheets and Themes
Dynamically Loading Themes
Conclusion
Related Books

Introduction
Themes, a new feature of Microsoft ASP.NET 2.0, enable you to define the appearance of a set of controls once
and apply the appearance to your entire Web application. For example, by taking advantage of themes, you can
define a common appearance for all of the TextBox controls in your application, such as the background and
foreground color, in one central location. Themes enable you to easily create and maintain a consistent look
throughout your Web site.

Themes are not the same thing as cascading style sheets. Cascading style sheets enable you to control the
appearance of HTML tags on the browser. Themes, on the other hand, are applied on the server and they apply
to the properties of ASP.NET controls. For example, you can use a theme, but not a cascading style sheet, to
specify whether or not a GridView control displays a header or footer.

Themes are not the same thing as master pages. Master pages, another new feature of ASP.NET 2.0, enable
you to specify a common layout for multiple content pages in a Web application. Themes, but not master pages,
enable you to control the appearance of individual controls within a page (You can and probably will use both
master pages and themes at the same time when designing a Web application).

In this article, you learn how to take advantage of themes in your ASP.NET 2.0 applications. You will learn how
to use both cascading style sheets and images with themes. We will also examine how you can dynamically load
themes at run time.

Creating and Applying a Simple Theme


ASP.NET 2.0 does not ship with any default themes. When ASP.NET 2.0 is released, you will be able to download
and use themes from Web sites such as the www.ASP.net Web site. For now, however, you must create all of
your own themes from scratch.

Furthermore, you should be warned, Microsoft Visual Web Developer does not provide any tool support for
creating themes. You certainly can create themes and apply themes to Web pages by using Visual Web
Developer. However, you won't see the effect of applying a theme to a page until you actually open the page in

http://msdn.microsoft.com/library/en-us/dnvs05/html/themes.asp?frame=true 22/01/2006
Creating Web Application Themes in ASP.NET 2.0 (Visual Studio 2005 Technical ... Page 2 sur 13

a Web Browser. In other words, Visual Web Developer does not provide any designer support for creating
themes.

With these warnings out of the way, let's go ahead and create a simple theme. The first step required for
creating a theme is to create a new folder named App_Themes in the root of your application. The ASP.NET
Framework automatically looks for this folder when you attempt to apply a theme.

After you create the App_Themes folder, you can create one or more themes by adding subfolders to the
App_Themes folder. The first theme that we will create is named the OrangeTheme. Therefore, we need to add
a new folder to the App_Themes folder named OrangeTheme.

Next, we need to add a Skin file to the OrangeTheme folder. The Skin file is the file that actually contains the
format settings applied by a theme. In other words, the file contains one or more control skins applied by the
theme. You can name a Skin file anything you want as long as it ends with the extension .Skin.

A theme might contain one Skin file or hundreds of Skin files. You can name the Skin files anything you want. It
really doesn't matter since the ASP.NET Framework merges all of the Skin files together and treats the files as a
single Skin file when applying a theme to a page.

We will use the Skin file in Listing 1 (named FormControls.Skin) for our OrangeTheme:

Listing 1. FormControls.Skin

<asp:TextBox
BackColor="Orange"
ForeColor="DarkGreen"
Runat="Server" />

<asp:Button
BackColor="Orange"
ForeColor="DarkGreen"
Font-Bold="True"
Runat="Server" />

You should notice that the Skin file in Listing 1 contains the declarations for a TextBox and Button control. The
BackColor and ForeColor properties are provided with values for both controls. In addition, the Button control
is declared to have a bold font.

Notice that you specify the appearance of a control with a Skin file by declaring an instance of the control and
setting one or more control properties. There are limitations on the control properties you can set in a Skin file.
In general, you are limited to setting appearance properties. For example, you can set properties of a TextBox
control such as its BackColor, ForeColor and even its Text property. However, you cannot set the TextBox
control's AutoPostBack property in a Skin file.

Furthermore, you cannot use skins with every ASP.NET control. For example, you cannot use skins with the
Repeater control, the Literal control, or the LoginView control. You also cannot use skins with User Controls
(however, a skin can apply to the controls contained in a User control).

When the FormControls skin is applied to a page, every TextBox and Button control in the page will appear
with the property values specified in the Skin file. This is true even in the case when a TextBox control in the
page already has a value specified for its BackColor property. The Skin file overrides control properties in a
page.

The page in Listing 2 has the OrangeTheme applied to it:

Listing 2. OrangePage.aspx

<%@ Page Theme="OrangeTheme" %>


<html>
<head runat="server">
<title>Orange Page</title>
</head>
<body>
<form id="form1" runat="server">

Enter your name:

http://msdn.microsoft.com/library/en-us/dnvs05/html/themes.asp?frame=true 22/01/2006
Creating Web Application Themes in ASP.NET 2.0 (Visual Studio 2005 Technical ... Page 3 sur 13

<br />
<asp:TextBox
ID="txtName"
Runat="Server" />

<br /><br />

<asp:Button
ID="btnSubmit"
Text="Submit Name"
Runat="Server" />

</form>
</body>
</html>

The page in Listing 2 contains a form that asks for the user's name. There is nothing special about this page
except for the addition of the theme directive at the top of the page. The theme directive is used to apply the
OrangeTheme theme to the page.

When you open the page in Listing 2 in a Web browser, the TextBox and Button controls appear with the
format settings declared in the Skin file (see Figure 1).

Figure 1. Applying a simple theme to an ASP.NET page

A Skin file can contain more complicated format settings than those contained in Listing 1. For example, the
GridView.Skin file in Listing 3 contains a skin for a GridView control that can be used when displaying the
contents of the Products database table included in the sample Microsoft SQL Server Northwind database. (The
GridView control replaces the DataGrid control in the ASP.NET 2.0 Framework.)

Listing 3. GridView.Skin

<asp:GridView
AutoGenerateColumns="false"
CellPadding="5"
Font-Name="Arial"
Runat="Server">
<AlternatingRowStyle BackColor="LightBlue" />
<Columns>
<asp:BoundField
HeaderText="Product Name"
DataField="ProductName" />
<asp:BoundField
HeaderText="Price"
DataField="UnitPrice"
DataFormatString="{0:c}" />

http://msdn.microsoft.com/library/en-us/dnvs05/html/themes.asp?frame=true 22/01/2006
Creating Web Application Themes in ASP.NET 2.0 (Visual Studio 2005 Technical ... Page 4 sur 13

</Columns>
</asp:GridView>

The Skin file in Listing 3 contains a GridView control with two columns (see Figure 2). Notice that the second
column includes a DataFormatString which is used to format the UnitPrice database column as a currency
amount.

Figure 2. A complicated GridView skin

You can use the GridView.Skin skin with the page in Listing 4 (assuming that you have added the skin in
Listing 3 to the OrangeTheme folder).

Listing 4. SkinnedGridView.aspx

<%@ Page Theme="OrangeTheme" %>


<html>
<head runat="server">
<title>Skinned GridView</title>
</head>
<body>
<form id="form1" runat="server">

<asp:GridView
ID="GridView1"
DataSourceID="ProductSource"
Runat="Server" />

<asp:SqlDataSource
ID="ProductSource"
ConnectionString="Server=localhost;Trusted_Connection=true;Database=Northwind"
SelectCommand="Select ProductName,UnitPrice,UnitsInStock FROM Products"
Runat="Server" />

</form>
</body>
</html>

The page in Listing 4 displays the contents of the Products database table. It contains a GridView control that

http://msdn.microsoft.com/library/en-us/dnvs05/html/themes.asp?frame=true 22/01/2006
Creating Web Application Themes in ASP.NET 2.0 (Visual Studio 2005 Technical ... Page 5 sur 13

is bound to a SqlDataSource control. The SqlDataSource control connects to the Northwind database table in
order to retrieve the database data.

You should be aware of an important limitation when using Skins with the GridView control. A Skin cannot
contain any script. This means that you cannot use a TemplateField that contains a databound expression within
a Skin. It also means that you cannot declare and use any methods within a Skin.

Default Skins vs. Named Skins


In the previous section, you learned how to create a skin that applies to all instances of a control of a certain
type. For example, you learned how to create a skin that applies to all TextBox controls or GridView controls.
However, you'll quickly discover that you want to create more than one skin for the same control. For example,
you'll want to be able to apply different skins to a GridView control on different pages (or even within the same
page).

You can create more than one skin that applies to the same type of control if you create a "named skin." A
named skin is a skin that includes a SkinID. For example, the Skin file in Listing 5 contains three skins that can
be applied to a TextBox control.

Listing 5. TextBox.Skin

<asp:TextBox
BackColor="Green"
Runat="Server" />

<asp:TextBox
SkinID="BlueTextBox"
BackColor="Blue"
Runat="Server" />

<asp:TextBox
SkinID="RedTextBox"
BackColor="Red"
Runat="Server" />

In Listing 5, the first TextBox skin is called the default skin. Since the skin does not include a SkinID, the skin is
applied by default to all TextBox controls. The second and third TextBox skins, on the other hand, do include
values for their SkinID properties. These skins are applied to a TextBox only when they are explicitly
referenced by their SkinID values.

For example, the page in Listing 6 uses all three skins from the TextBox.Skin Skin file.

Listing 6. SkinnedTextBoxes.aspx

<%@ Page Theme="OrangeTheme" %>


<html>
<head runat="server">
<title>Skinned TextBoxes</title>
</head>
<body>
<form id="form1" runat="server">

<asp:TextBox
id="TextBox1"
Runat="Server" />

<br />

<asp:TextBox
id="TextBox2"
SkinID="BlueTextBox"
Runat="Server" />

<br />

<asp:TextBox
id="TextBox3"
SkinID="RedTextBox"
Runat="Server" />

http://msdn.microsoft.com/library/en-us/dnvs05/html/themes.asp?frame=true 22/01/2006
Creating Web Application Themes in ASP.NET 2.0 (Visual Studio 2005 Technical ... Page 6 sur 13

</form>
</body>
</html>

Since the first TextBox control in Listing 6 does not include a SkinID property, it is skinned with the default
skin. The second TextBox is skinned with the BlueTextBox skin and the final TextBox is skinned with the
RedTextBox skin (see Figure 3).

Figure 3. Applying default and named skins

Applying a Theme to an Entire Application


To this point, we've applied themes to individual pages by using the theme attribute of the Page directive. You
can, if you need, apply a theme to an entire application within a Web configuration file.

For example, the Web configuration file in Listing 7 applies the OrangeTheme to every page in the application.

Listing 7. Web.Config

<configuration>
<system.web>
<pages theme="OrangeTheme" />
</system.web>
</configuration>

The Web.Config file in Listing 7 will apply the OrangeTheme to all pages that do not already have a theme
specified in their Page directive. In other words, the Page directive overrides any theme specified in a
Web.Config file.

The same application can contain more than one Web.Config file that specifies a theme. You can add distinct
Web configuration files to different subfolders and each Web configuration file can specify a different theme.

Themes vs. StyleSheetThemes


When you apply a theme to a page, any control property set in the theme takes precedence over any property
set in the page. For example, if a theme specifies that all TextBox controls should appear with an orange
background, then every TextBox in a page will appear with an orange background even when an individual
TextBox control has a different value for its BackColor property.

There are circumstances, however, in which you'll want to override a particular appearance setting within a
page. For example, you might want to highlight a particular TextBox when there are multiple TextBox controls
in a page by changing its BackColor to red. In these circumstances, you need to take advantage of a
StyleSheetTheme. A StyleSheetTheme works just like a normal theme except for the fact that it can be
overridden by individual control properties.

http://msdn.microsoft.com/library/en-us/dnvs05/html/themes.asp?frame=true 22/01/2006
Creating Web Application Themes in ASP.NET 2.0 (Visual Studio 2005 Technical ... Page 7 sur 13

A StyleSheetTheme works more like a cascading style sheet than it works like a normal theme. In the same
way that you can override a cascading style sheet rule with a style rule specified for an individual HTML tag, you
can override a StyleSheetTheme property setting with a property setting for an individual control.

For example, the Skin file in Listing 8 contains a TextBox skin that sets every TextBox control's BackColor to
orange and ForeColor to green.

Listing 8. TextBox.Skin

<asp:TextBox
BackColor="Orange"
ForeColor="Green"
Runat="Server" />

Imagine that the skin in Listing 8 has been added to the OrangeTheme theme. The page in Listing 9 applies the
skin using the StyleSheetTheme attribute rather than the theme attribute.

Listing 9. StyleSheetThemedTextBox.aspx

<%@ Page StyleSheetTheme="OrangeTheme" %>


<html>
<head runat="server">
<title>Style Sheet Themed TextBox</title>
</head>
<body>
<form id="form1" runat="server">

<b>First Name:</b>
<asp:TextBox
ID="txtFirstName"
Runat="Server" />

<br /><br />

<b>Last Name:</b>
<asp:TextBox
ID="txtLastName"
BackColor="Yellow"
Runat="Server" />

<br /><br />

<asp:Button
Text="Submit"
Runat="Server" />

</form>
</body>
</html>

When you open the page in Listing 9, the first TextBox control appears with an orange BackColor and the
second TextBox control appears with a yellow BackColor (see Figure 4). The BackColor of the first TextBox
control is set by the StyleSheetTheme attribute that appears in the Page directive. The value of the
BackColor property of the second TextBox control is set in the page itself.

You can apply both the StyleSheetTheme and the Theme attribute to the same page. In that case, the
Theme attribute will take precedence. For example, if you apply a Theme to your application in the Web
Configuration file, then the Theme settings will override the StyleSheetTheme settings.

http://msdn.microsoft.com/library/en-us/dnvs05/html/themes.asp?frame=true 22/01/2006
Creating Web Application Themes in ASP.NET 2.0 (Visual Studio 2005 Technical ... Page 8 sur 13

Figure 4. Using a StyleSheetTheme

Images and Themes


You can include images with a theme. Adding images to a theme is useful when working with controls such as
the Menu, TreeView, or BulletedList control. You can even use a theme to provide a default image for the
ASP.NET Image control.

For example, Listing 10 contains a skin for a BulletedList control. The skin includes a reference to an image
named OrangeBullet located in the BulletImages subfolder of the OrangeTheme folder.

Listing 10. BulletedList.Skin

<asp:BulletedList
BulletStyle="CustomImage"
BulletImageUrl="BulletImages/OrangeBullet.gif"
Runat="Server" />

The page in Listing 11 uses the BulletedList skin to display a bulleted list of book titles from the Titles database
table.

Listing 11. ShowBulletedList.aspx

<%@ Page Theme="OrangeTheme" %>


<html>
<head runat="server">
<title>Show BulletedList</title>
</head>
<body>
<form id="form1" runat="server">

<asp:BulletedList
ID="BulletedTitles"
DataSourceID="TitleSource"
DataTextField="Title"
Runat="Server" />

<asp:SqlDataSource
ID="TitleSource"
ConnectionString="Server=localhost;Trusted_Connection=true;Database=Pubs"
SelectCommand="SELECT Title FROM Titles"
Runat="Server" />

</form>
</body>
</html>

http://msdn.microsoft.com/library/en-us/dnvs05/html/themes.asp?frame=true 22/01/2006
Creating Web Application Themes in ASP.NET 2.0 (Visual Studio 2005 Technical ... Page 9 sur 13

When the page in Listing 11 is opened, the list of titles is retrieved from the Titles database table and displayed
by the BulletedList control. Notice that the OrangeBullet image is applied to the BulletedList control by the
BulletList skin (see Figure 5).

Figure 5. Applying a theme that includes images

Cascading Style Sheets and Themes


You can also use cascading style sheets with themes. If you add a cascading style sheet to a theme folder, then
the cascading style sheet is automatically applied to a page when you apply the theme to a page. When the
contents of the Themes folder is compiled into a class, any cascading style sheets found in the Themes folder
are automatically referenced by the class.

For example, imagine that you want to create a hover effect for all of the hyperlinks in a page. You can use the
cascading style sheet in Listing 12 in order to change the color of a hyperlink to orange when a mouse hovers
over the hyperlink.

Listing 12. Hover.css

A:hover
{
color: orange;
}

If you add the cascading style sheet in Listing 12 to the OrangeTheme folder, then the style sheet will be
automatically applied to a page when the OrangeTheme is applied to the page. The one requirement for this to
work is that the page must include a server-side <head runat="Server" /> tag. This tag renders the link to the
style sheet.

Since the page in Listing 13 includes the <head runat="Server" /> tag and it has the OrangeTheme applied to
it, the page is automatically linked to the Hover.css style sheet.

http://msdn.microsoft.com/library/en-us/dnvs05/html/themes.asp?frame=true 22/01/2006
Creating Web Application Themes in ASP.NET 2.0 (Visual Studio 2005 Technica... Page 10 sur 13

Listing 13. Menu.aspx

<%@ Page Theme="OrangeTheme" %>


<html>
<head runat="server">
<title>Menu</title>
</head>
<body>
<form id="form1" runat="server">

<a href="Home.aspx">Home</a>
<br />
<a href="Products.aspx">Products</a>
<br />
<a href="Services.aspx">Services</a>

</form>
</body>
</html>

If you open the page in Listing 13 and hover your mouse over a hyperlink, the hyperlink will change to the color
orange (see Figure 6).

Figure 6. Using cascading style sheets with themes

You can include more than one cascading style sheet in a theme. If you add multiple cascading style sheets,
then the server-side <head runat="Server"/> tag will automatically generate links for each style sheet.

Dynamically Loading Themes


Imagine that you want to dynamically change the appearance of your Web site. You might want to enable users
to customize the colors and general appearance of your Web application while they interact with it. You can
provide this power to users of your ASP.NET 2.0 applications by taking advantage of dynamically loaded
themes.

You can modify the theme used by a page at run time by modifying the value of the theme property of the
Page object. You can assign the name of any valid theme to this property. You must be aware of one restriction
when using the theme property. The theme property can only be set during or before the Page PreInit event.

For example, imagine that you create two new theme folders named RedTheme and YellowTheme within the
App_Themes folder. You can add the skin in Listing 14 to the RedTheme folder and the skin in Listing 15 to the
YellowTheme folder (the skins change the BackColor of the DropDownList control to red or yellow).

Listing 14. RedTheme/DropDownList.Skin

<asp:DropDownList

http://msdn.microsoft.com/library/en-us/dnvs05/html/themes.asp?frame=true 22/01/2006
Creating Web Application Themes in ASP.NET 2.0 (Visual Studio 2005 Technica... Page 11 sur 13

BackColor="Red"
Runat="Server" />

Listing 15. YellowTheme/DropDownList.Skin

<asp:DropDownList
BackColor="Yellow"
Runat="Server" />

The page in Listing 16 dynamically loads either the RedTheme or the YellowTheme depending on the user's
selection from a DropDownList control (see Figure 7). Notice that the Request collection is used to retrieve the
user's selection within the PreInit event handler. You must use the Request collection since the PreInit event
is raised too early in the page execution lifecycle to use any of the properties of the dropTheme
DropDownList control.

Figure 7. Dynamically loading a theme

Listing 16. DynamicTheme.aspx (Visual Basic .NET)

<%@ Page Language="VB" %>


<script runat="server">
Sub Page_PreInit(ByVal sender As Object, ByVal e As EventArgs)
Page.Theme = Request("dropTheme")
End Sub
</script>
<html>
<head id="Head1" runat="server">
<title>Dynamic Theme</title>
</head>
<body>
<form id="form1" runat="server">

<asp:DropDownList
id="dropTheme"
AutoPostBack="true"
Runat="Server">
<asp:ListItem Text="YellowTheme" />
<asp:ListItem Text="RedTheme" />
</asp:DropDownList>

</form>
</body>
</html>

Listing 16. DynamicTheme.aspx (C#)

<%@ Page Language="C#" %>

http://msdn.microsoft.com/library/en-us/dnvs05/html/themes.asp?frame=true 22/01/2006
Creating Web Application Themes in ASP.NET 2.0 (Visual Studio 2005 Technica... Page 12 sur 13

<script runat="server">
void Page_PreInit(object sender, EventArgs e)
{
Page.Theme = Request["dropTheme"];
}
</script>
<html>
<head runat="server">
<title>Dynamic Theme</title>
</head>
<body>
<form id="form1" runat="server">

<asp:DropDownList
id="dropTheme"
AutoPostBack="true"
Runat="Server">
<asp:ListItem Text="YellowTheme" />
<asp:ListItem Text="RedTheme" />
</asp:DropDownList>

</form>
</body>
</html>

Conclusion
In this article, we've examined both basic and advanced applications of ASP.NET 2.0 themes. Themes are a
powerful addition to the ASP.NET framework. By taking advantage of themes, you can dramatically reduce the
amount of content that you need to add to individual ASP.NET pages. Themes enable you to define the
appearance of a control once and apply the appearance throughout a Web application. Therefore, themes enable
you to easily create Web sites that have a consistent and maintainable design.

Related Books
z ASP.NET Unleashed

z ASP.NET v. 2.0-The Beta Version

z ASP.NET 2.0 Beta Preview

z Introducing Microsoft ASP.NET 2.0

About the author


Stephen Walther wrote the best-selling book on ASP.NET, ASP.NET Unleashed. He was also the architect and
lead developer of the ASP.NET Community Starter Kit, a sample ASP.NET application produced by Microsoft. He
has provided ASP.NET training to companies across the United States, including NASA and Microsoft, through
his company Superexpert (http://www.superexpert.com).

Print E-Mail Add to Favorites

Average rating:
How would you rate the quality of this content?
7 out of 9
1 2 3 4 5 6 7 8 9
Poor Outstanding
Tell us why you rated the content this way. (optional) 1 2 3 4 5 6 7 8 9
155 people have rated this page

Submit

http://msdn.microsoft.com/library/en-us/dnvs05/html/themes.asp?frame=true 22/01/2006
Creating Web Application Themes in ASP.NET 2.0 (Visual Studio 2005 Technica... Page 13 sur 13

Manage
Manage Your
Your Profile
Profile || Legal
Legal || Contact
Contact Us
Us || MSDN
MSDN Flash
Flash Newsletter
Newsletter
©
© 2006
2006 Microsoft
Microsoft Corporation.
Corporation. All
All rights
rights reserved.
reserved. Terms
Terms of
of Use
Use || Trademarks
Trademarks || Privacy
Privacy Statement
Statement

http://msdn.microsoft.com/library/en-us/dnvs05/html/themes.asp?frame=true 22/01/2006