Accessing Themes/SkinId's Programmatically using ASP.Net 2.0

As a web application developer, it is necessary to consistently change look and feel of your application / site, this can be done by different ways. 

1. Applying Inline style attribute to the page level, control level.
2. Apply external Cascading style (CSS).

Asp.net 2.0 introduces new feature called as "Themes & Skins" which allow us to define style definition centrally.

Themes are set of elements like CSS, Images, Skins, etc. Themes are defined in a special directory called as "App_Themes". To make site customized you can define multiple themes, one can apply theme at application level, page level & control level.

Themes and Skins can be uniformly applied to both windows as well as web applications, you can include CSS file inside Theme, which can be used as a part of theme.

Skins:

Themes contains Skins, theme file contain style definition for individual server controls.

Types of Skins:

There are two types of skins.

Default Skins:

A control skin for which a "SkinID" attribute is not set which means skin get applied automatically for the similar type of the server controls.

Named Skins:

SkinId property will be set, i.e. Named skins can be set to the control.

Page Theme:

Page theme defines themes for the pages or for entire application, you can apply themes for single page as shown below.

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

Defining theme which can be used for entire application by using configuration file as:

<configuration>

  <appSettings/>

  <connectionStrings/>

  <system.web>

    <compilation debug="false" />

    <authentication mode="Windows" />

    <pages  theme ="Theme1" />

  </system.web>
</configuration>

EnableTheming:

You can enable or disable theme to particular control on the page by using EnableTheme property as:

<asp:TextBox ID="TextBox1"  BackColor="ButtonShadow" ForeColor="white" EnableTheming="false" runat="server"></asp:TextBox> 

Programmatically accessing them to the page.

protected void Page_PreInit(object sender, System.EventArgs e)

{

    Page.Theme = Request.QueryString["Theme1"];
}

It is required to set the Theme property of the page property in or before the page_PreInit event for any static controls that are on the page.

Here is the project structure.

Themes_Skins
|
|-------App_Themes
| |
| |-----Msn_Blue
| | |
| | |-----Default.css
| | |
| | |-----Default.skin
| |
| |-----Msn_Red
| | |
| | |-----Default.css
| | |
| | |-----Default.skin
| |
|-----Default.aspx
|
|-----Index.aspx

On index.aspx I have drop-down to select theme which you want, I set this theme programmatically as below:

protected void ddSelSkin_SelectedIndexChanged(object sender, EventArgs e)

{

    if (ddSelSkin.SelectedValue.ToString().Trim() != "")

    {

        Session["Theme"] = ddSelSkin.SelectedValue.ToString();

        Response.Redirect("./Default.aspx");

    }

}

At very first I take this in session to get applied throughout the application on index.aspx.cs page & redirect to "Default.aspx" page.

protected void Page_PreInit(object sender, System.EventArgs e)

{

    Page.Theme = Session["Theme"].ToString();

    btnDisplay.SkinID = "btnSkin";

    calNew.SkinID = "calControl";
}

I could have been done this on index.asp page but there is restriction as one can only set the "Page.Theme" under "Page_PreInit" events only & then set the SkinId's of different controls.

Microsoft has given very great feature which reduces developer's/designers headache of keep on changing GUI and color combinations.

Enjoy easy coding!