Themes are simply templates that allow you to define the look of your web forms and controls and they may be utilized in your web application to provide a consistent user interface.  A skin is a template that contains a set of properties used to standardize the various attributes of your web controls.  A theme may consist of a single skin and one or more style sheets.  The benefit of using themes enables your development team to write the code without worrying about the attributes of a button control.  For example, if you have a theme title black, all the development team has to do to maintain a consistent user interface is assign the theme to the control in question.  While themes may not be appropriate for all occasions, they are flexible in that they can be applied to an entire application, web form or even a single control.

To add Themes to your web solution you will need to right click on you web solution, choose Add ASP.NET Folder and select Theme.  In this case I am creating a theme named Red.

Figure 1

The next step is to add the actual skin file to the theme we previously created.  To accomplish this, right click on the theme named Red and select Add New Item.

Figure 2

As you can see in listing 2 there are various file types you can choose from, in this case select Skin File and provide the name red.skin.  Once you accomplish this step your new skin provides the following example.

Listing 1

<%--
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.
 
--%>

At this point you are ready to begin creating the skin for the various controls that you determined should have the ability to use a skin.  As an example, create a skin for a button control.  In order to accomplish this you need to add the following to the red.skin file.

Listing 2

<asp:Button runat="server" SkinId="Red" BackColor="red" ForeColor="black" />

Now you are ready to skin your button control back on your WebForm.  However, before you can do this you must first set the WebForm to use this theme.  This is accomplished by adding the theme attribute to the ASP.NET source code.

Listing 3

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

Finally, set the SkinId attribute of the button control.

Listing 4

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

At this point you are ready to execute your application and view your work.  If all has worked as expected, you should see your button control skinned.

Figure 3

Consider the use of CSS to enhance the control and overall visual aspect of your application.  Add a new style sheet just as you previously did for the theme (see Listing 2), only this time select Style Sheet.  Once you have completed this step, your application will automatically apply this style sheet to your pages.

Note: The head tag must have the attribute runat="server."

Now, back in the style sheet you can apply items such as the page background color, font color and font size.

Listing 5

body 
{
      background-color: #000000;
      color: #FFFFFF;
      font-family: Arial, Verdana, Garamond;
      font-size: 10px;
}

Execute the application and you will now see that not only does the button control have a theme applied, but the style sheet has now changed the way the user interface looks.

Figure 4

There may be occasions when you want to programmatically set the theme for an ASP.NET web form.  For example, your application may utilize a theme for your general user base while application administrators use a completely different theme.  Here is a code snippet that demonstrates how to set the Theme attribute of the web form at runtime.

Listing 6

void Page_PreInit(object sender, System.EventArgs e)
{
    string _role = (string)Session["Role"];
 
    if (_role == "User")
        Page.Theme = "Red";
    else
        Page.Theme = "Blue";
}

Note: The Theme attribute can on be set in the Page_PreInit event.

Let us take setting a theme at runtime a step further.  You may feel it is not efficient to set the theme in each code behind in the web form and in large scale applications you may be better served using a base page to accomplish this.  All you need to do is remove the Page_PreInit event that you previously put in place and move it to the base page.  In order to create the base page, right click on your web site, select Add ASP.NET Folder and select App_Code.  Next add a new class to this folder and name it BasePage.cs.

Figure 5

Once your class is in place, simply add the previous Page_PreInit event to this class.

Listing 7

public class BasePage : System.Web.UI.Page 
{
      public BasePage()
      {
            //
            // TODO: Add constructor logic here
            //
      }
 
    void Page_PreInit(object sender, System.EventArgs e)
    {
        string _role = (string)Session["Role"];
 
        if (_role == "User")
           Page.Theme = "Red";
        else
            Page.Theme = "Blue";
    }   
}

The final step to perform is to extend your web form to utilize this base page.  To do this, remove the inheritance System.Web.UI.Page and replace it with BasePage.

Listing 8

public partial class _Default : BasePage

While either method will work, you will have to determine which is more suitable for your application.

A Master Page acts as a template for Content Pages and Content Pages provide content to populate the Master Pages.  A Master Page is essentially a standard ASP.NET page except that it uses the extension of .master and a <%@ master %> directive instead of <%@ page %>. Reference: Master Your Site Design with Visual Inheritance and Page Templates.

Create a Master Page

To add a Master Page to your web solution you need to right click on you web solution, choose Add New Item and select Master Page.

Figure 6

Once you have completed this step you will see the ASPX source similar to the following.

Listing 9

<form id="form1" runat="server">
    <div>
        <asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
        </asp:contentplaceholder>
    </div>
</form>

The content Place Holder is where other pages that inherit the Master Page will place its content. At this point if you wish to have a header, footer and navigation area you should now add this to your Master Page.  Here is an example.

Figure 7

As you can see in the above figure, the Master Page has five areas of which the content page is an ASPX that I have placed within the contentplaceholder.  This allows me to maintain a consistent look and feel of the UI for my users.  Also, I do not have to repeat the design layout as the site grows.

One thing I should mention is that you may have multiple master pages and use each one for a different purpose or simply design layout.  For example, if you are using authentication, you want to provide a guest master page and a member master page.  By following this theory you can control what each group may see and do.

I have discussed and provided examples on creating a theme utilizing either simple skins or a combination of skins and style sheets.  I have demonstrated how to apply a theme either at runtime or in the web form itself.  With just a little effort and imagination you to can have a clean crisp user interface that developers can extend without the worry of visual appeal.  I touched on creating and using Master Pages and provided a demonstration and gave points where multiple Master Pages may be useful.