Geeks With Blogs


Microsoft MVP


Moderator at CodeASP.NET

Quiz Master

free counters
Free counters
Added on January 19,2012

Follow Me @vmsdurano

A bit About Me

The opinions expressed herein are my own personal opinions and does not represent the opinions of my employers. Nor does it represent the opinion of my dog, because I don’t have one.

Vinz' Blog (ProudMonkey) "Code, Beer and Music ~ my way of being a programmer"

This example demonstrates on how to apply Skins to ASP.NET WebParts. Before we begin let us first understand the concept of the skins in ASP.NET.

What is a Skin file?

A Skin enables us to modify any of the properties applied to the server controls in our ASP.NET page. Skins can work in conjunction with CSS files or images. To create a Theme we can use a single skin file in the Theme Folder. The skin file extension should be always .skin.

For more information about ASPNET Themes and Skins then have a look at the following link below:

STEP 1: Designing the WebPart page.

Note that for simplicity of this demo, I just set up the page markup like this:

<html xmlns="">

<head runat="server">
    <title>WebParts with Skins</title>
    <style type="text/css">
            width: 100%;
    <form id="form1" runat="server">
    <asp:WebPartManager ID="WebPartManager1" runat="server"/>
        <table class="style1">
                <td colspan="3">
                    <asp:DropDownList ID="DropDownList1" runat="server" AppendDataBoundItems="true" 
                        AutoPostBack="True" onselectedindexchanged="DropDownList1_SelectedIndexChanged">
                    <asp:ListItem Value="-1" >Select Skin</asp:ListItem>
                <td valign="top">
                    <asp:WebPartZone ID="WebPartZone1" runat="server" CssClass="style1">
                            <asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>
                <td valign="top">
                    <asp:WebPartZone ID="WebPartZone2" runat="server" CssClass="style1">
                            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                <td valign="top">
                    <asp:WebPartZone ID="WebPartZone3" runat="server" CssClass="style1">
                            <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>

STEP 2: Creating the Skin file.

The following are the steps on how to create a skin file in Visual studio:

First we need to check if the ASP.NET Theme folder exists in your project. If the Theme folder is not in your project then you can add this by right clicking on the project name à Add ASP.NET folder à then select Theme. You will notice that the App_Themes folder is automatically added to your project.

Now let’s add a new skin file under the App_Themes folder, to do this then just right click on the App_Themes folder à Select Add new item à Select Skin file. In this demo I named the skin file to WZSkin.

STEP 3: Setting the look and feel of the WebPartZones in the Skin file.

In .skin file we can create multiple definitions in respect of same server control. To create multiple definitions of a single element we can use the SkinID attribute to differentiate among the definitions. The value of SkinID can be anything.

For simplicity of this demo, I set up the look and feel of the WebPartZones like this at the WZSkin file:

<asp:WebPartZone  runat="server" SkinID = "Blue">
    <PartTitleStyle BackColor="Blue" />
    <PartChromeStyle BorderColor="Blue" BorderStyle="Solid" BorderWidth="1px" />

<asp:WebPartZone  runat="server" SkinID = "Red">
    <PartTitleStyle BackColor="Red" />
    <PartChromeStyle BorderColor="Red" BorderStyle="Solid" BorderWidth="1px" />

<asp:WebPartZone  runat="server" SkinID = "Green">
    <PartTitleStyle BackColor="Green" />
    <PartChromeStyle BorderColor="Green" BorderStyle="Solid" BorderWidth="1px" />

Note that we set each WebZone with different SkinID to determine which skin set will be used based from the DropDownList value.

Also note that you can embed CSS to your Skin file.

Now, since we are done setting up our Skin file then we can proceed to the next step.

STEP 4: Setting the SkinID programmatically.

In this demo, I simply use Session variable to hold the current value that was selected in the DropDownlist. If you wan’t to retain the current SkinID that was selected when you visit the page next time then you can store the SkinID value to the database instead of storing it in Session.

Here are the code blocks below for setting the SkinID.

   private void SetWebZoneSkins(string wzSkinSet){
        for (int i = 1; i <= 3; i++){
            WebPartZone wz = (WebPartZone)this.Page.FindControl("WebPartZone" + i);
            if (wz != null)
            { wz.SkinID = wzSkinSet; }

    protected void Page_PreInit(object sender, EventArgs e){
        if (Session["Skin"] != null){
            //Call the method for setting the SkinID of the WebZone
            //Retain the Selected item of the DDL on postbacks
            DropDownList1.Items.FindByText(Session["Skin"].ToString()).Selected = true;
            //set default skin to WebZone
    protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e){
        //Store the Selected Text in Session so that we can reference the values later
        Session["Skin"] = DropDownList1.SelectedItem.Text;
        //We need to call this line below so that we can set the Skins based on the DDL value

Note: Themes and Skins should be set at PreInit event because it is where all the controls are being initialized.

STEP 5: Setting the Theme name in the page.

In order to work this out then we need to set the attribute Theme with its value like this below in the page declaration.

<%@ Page Language="C#" AutoEventWireup="true" 
                       Inherits="Default" Theme="Theme1"  %>

Compile and run your application.

That’s it! Enjoy!

Technorati Tags: ,

Posted on Tuesday, April 14, 2009 6:51 AM ASP.NET , WebParts | Back to top

Comments on this post: ASP.NET WebPart with Skins

comments powered by Disqus

Copyright © Vincent Maverick Durano | Powered by: