C# Themes and Skins

As well as using CSS to theme the look and feel of your website, .Net provides a way of theming all your controls using the standard asp.net attributes.

Create a new website, and put a couple of Gridviews on the default page:

    <div>
      <h1>Gridview</h1>
      <asp:GridView ID="Gridview1" runat="server" />
      <br />
      <asp:GridView ID="Gridview2" runat="server" />
    </div>

In the Page_Load of the page, create a noddy datatable and bind it to both controls:

        DataTable dt = new DataTable();
        dt.Columns.Add(new DataColumn("Number"));
        dt.Columns.Add(new DataColumn("Name"));
        dt.Columns.Add(new DataColumn("Score"));
        DataRow dr1 = dt.NewRow();
        DataRow dr2 = dt.NewRow();
        DataRow dr3 = dt.NewRow();
        DataRow dr4 = dt.NewRow();
        dr1[0]=1; dr1[1]="John"; dr1[2]=33;
        dr2[0]=2; dr2[1]="Mary"; dr2[2]=64;
        dr3[0]=3; dr3[1]="Simon"; dr3[2]=12;
        dr4[0]=4; dr4[1]="June"; dr4[2]=99;
        dt.Rows.Add(dr1);
        dt.Rows.Add(dr2);
        dt.Rows.Add(dr3);
        dt.Rows.Add(dr4);
        Gridview1.DataSource = dt;
        Gridview2.DataSource = dt;
        DataBind();

When the website is built and run, you get the usual boring default styling on both GridViews:

Number	Name	Score
1	John	33
2	Mary	64
3	Simon	12
4	June	99

To theme up the controls, it would be possible to use the asp.net attributes for changing the colours and alternate row colors and all that stuff. But then you'd need to repeat it for the second one, and other GridViews on other pages. If you ever wanted to change all the controls on an entire site, it would take a while. Luckily, .Net provides a way of storing a theme and a skin for each control in a separate file which you simply reference.

Create a new asp.net folder called App_Themes, and add a new folder under it called MyFirstTheme, and in that folder add a SkinFile and call it GridView.skin. Put the following Gridview definition in it:

<asp:GridView SkinID="Professional" runat="server" 
              Font-Name="Verdana"
              Font-Size="10pt"
              Cellpadding="4"
              HeaderStyle-BackColor="#444444"
              HeaderStyle-ForeColor="White"
              AlternatingRowStyle-BackColor="#dddddd" />

Note we have named the SkinID in this file as 'Professional.

Go back to the Default.aspx page and add the folder name to a new Theme attribute:

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

This tells the page which folder to look for the themes in. Add the name of the skin to one of the GridView controls

      <asp:GridView ID="Gridview1" SkinID="Professional" runat="server" />

And when you run it now, you get the 'Professional' skin from the 'MyFirstTheme' folder.

Number	Name	Score
1	John	33
2	Mary	64
3	Simon	12
4	June	99

Create a second Skin in the same GridView.skin file, give it the SkinID 'Fun'.

<asp:GridView SkinID="Fun" runat="server" 
              Font-Name="Comic Sans MS"
              Font-Size="13pt"
              Cellpadding="4"
              BackColor="Khaki"
              HeaderStyle-BackColor="SaddleBrown"
              HeaderStyle-ForeColor="White"
              AlternatingRowStyle-BackColor="Tan" />

You can have as many variants for controls as you require in the same skin file, and you can have control definitions in as many or as few files as you want - the system looks in all files in the theme folder when trying to match a control SkinID.

Add the 'Fun' SkinID to the second Gridview on the page:

      <asp:GridView ID="Gridview2" SkinID="Fun" runat="server" />

And then run it:

Number	Name	Score
1	John	33
2	Mary	64
3	Simon	12
4	June	99

And that is all there is to Themes.