Contact Us
Site Map

Search

Overview 

Themes provide an easy way to "skin" the controls in your web-app.  There are two major benefits that this functionality provides.

The first is that it allows you to design multiple "looks" or "skins" for your application and to easily switch between those skins.

In my opinion, a bigger benefit is actually that it allows you a central place to control the look/feel of your web application, even if you only have one such look.  We will examine each of these benefits below.

A Simple Theme (walkthrough)

Themes apply to specific controls, or groups of controls.  The process is "choreographed" by the use of SkinIDs and a themes folder.  To create a simple theme, do the following:

1. Create a new web application
2. Open the defaut.aspx page and place a control (let's say a button) on the page
3. Click on the button in the Design View and enter MyButtonId in the SkinID property.
4. Switch to the Solutions Explorer
5. Right click on the website and choose Add ASP.NET Folder | Theme
6. Call the theme MyTheme (or whatever your want)
7. Right click on the new theme and choose Add New Item
8. Select Skin File from the list of options.  Call it MyButton.skin or whatever your want.
9. Switch to the Source Code View of the aspx page and add Theme="MyTheme" to the @page tag as follows:
   

   <%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" <strong>Theme="Theme1" </strong>Inherits="_Default" %>

10. Next, copy the button tag from the source code as follows:
    

    <asp:Button ID="Button1" runat="server" SkinID="MyButtonID"             Text="Button" />

11. Paste the button tag into the new skin file and remove the ID property so that it looks like this
    

    <asp:Button runat="server" SkinID="MyButtonID" Text="Button" />

12. Now - we can access/modify any property that we want for that button.  For example, change the text property to say "Update Page Title with Current Date Time" so that the tag (in the skin file) looks like this:
    

    <asp:Button runat="server" SkinID="MyButtonID"               Text="Update Page Title with DateTime" />

13. Switch back to the code Double click on the button and attach this code
    

    CSharp     protected void Button1_Click(object sender, EventArgs e)     {         // Set the page title to the current date time         Button1.Text = DateTime.Now.ToShortDateString();     } VB     Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs)         ' Set the page title to the current date time         Button1.Text = DateTime.Now.ToShortDateString()     End Sub

14. Run the application.  You should see that the button says "Update Page Title with DateTime" rather than "Button" which is what it says in the design. 

It is getting this text from the Theme.  You can design multiple themes and by simply changing the Theme="xxx" attribute of the page tag you can modify which theme it uses (and therefore which skin files it looks at). 

Some things to keep in mind

1. Themes can not be specified on a control by control basis.  They apply to an entire page.  Using different skinIDs, you can have some controls look one way and others look very differently, but you can not have some controls on a page use one theme and other controls use a completely different theme.
2. Themes can be set at runtime, but the theme for a page must be set in the Pre-Init event.  The theme essentially must be applied before anything else happens.  If you try to set the theme anywhere other than in the PreInit event you will get this error:
   
   The 'Theme' property can only be set in or before the 'Page_PreInit' event.
   
   Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.
   
   Exception Details: System.InvalidOperationException: The 'Theme' property can only be set in or before the 'Page_PreInit' event.
3. The theme is set at runtime as follows:
   

   CSharp     protected override void OnPreInit(EventArgs e)     {         base.OnPreInit(e);         Page.Theme = "";     } VB     Protected Overrides Sub OnPreInit(ByVal e As EventArgs)         MyBase.OnPreInit(e)         Page.Theme = ""     End Sub

Even if you don't want to provide multiple looks/layouts for your app, themes can still be a powerful way to manage the single look that you plan to provide.  Because themes can set almost every property of almost every control, it can be a very powerful way to manage the properties of each of all of the controls in your application.  If you simply apply a SkinID to all of the major controls on your page, you can always go back in and "tweak" the look/feel of your entire app at any time by just modifying the theme. 

This means that you don't need to be constantly going back into the pages of your app to make changes to fonts, colors, styles, etc.  You can just tweak the theme.

Good luck and happy coding!

Source Files

default.aspx

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Theme="MyTheme" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server">     <title>Untitled Page</title> </head> <body>     <form id="form1" runat="server">     <div>         <asp:Button ID="Button1" runat="server"                      OnClick="Button1_Click" SkinID="MyButtonID"             Text="Button" /></div>     </form> </body> </html>

default.aspx.cs/vb

CSharp using System; using System.Data; using System.Configuration; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; public partial class _Default : System.Web.UI.Page {     protected override void OnPreInit(EventArgs e)     {         base.OnPreInit(e);         if (IsPostBack) Page.Theme = "";     }     protected void Button1_Click(object sender, EventArgs e)     {         Page.Title = DateTime.Now.ToShortDateString();     } } VB 'Error: Converting If-Else-End If Blocks Imports System Imports System.Data Imports System.Configuration Imports System.Web Imports System.Web.Security Imports System.Web.UI Imports System.Web.UI.WebControls Imports System.Web.UI.WebControls.WebParts Imports System.Web.UI.HtmlControls Public partial Class _Default Inherits System.Web.UI.Page     Protected Overrides Sub OnPreInit(ByVal e As EventArgs)         MyBase.OnPreInit(e)         Dim Page.Theme As if(IsPostBack) = ""     End Sub     Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs)         Page.Title = DateTime.Now.ToShortDateString()     End Sub End Class

MyButtons.skin

<%-- Default skin template. The following skins are provided as examples only. 1. Named control skin. The SkinId should be uniquely defined because    duplicate SkinId's per control type are not allowed in the same theme. <asp:GridView runat="server" SkinId="gridviewSkin" BackColor="White" >    <AlternatingRowStyle BackColor="Blue" /> </asp:GridView> 2. Default skin. The SkinId is not defined. Only one default    control skin per control type is allowed in the same theme. <asp:Image runat="server" ImageUrl="~/images/image1.jpg" /> --%> <asp:Button SkinID="MyButtonID" runat="server"             Text="Click to update the page title with current date/time" />