Creating Web Application Using Themes in ASP.NET

Akash Gaur
Mar 01, 2012

112.8k
0
3
- facebook
- twitter
- linkedIn
- Reddit
- WhatsApp
- Email
- Print
- Other Artcile

Introduction

Themes are also a new feature of ASP.NET that helps maintain a consistent look and feel across all or several pages of our web site. Themes are needed when we want to keep the style and layout information files separate from other web site files. A theme is a collection of settings that define the look of controls and web pages. These themes are applied across all the pages in a web application to maintain a consistent appearance. Themes are included images and skin files; the skin files set the visual properties of ASP.NET controls. Themes are of two types:

Page Theme

A Page theme contains the control skins, style sheets, graphic files, and other resources inside the subfolder of the App_Theme folder in the Solution Explorer window. A page theme is applied to a single page of the web site.

Global Theme

A Global theme is a theme that is applied to all the web sites on a web server and includes property settings, and graphics. This theme allows us to maintain all the websites on the same web server and define the same style for all the web pages of the web sites.

Let's create a theme application with the help of the following steps:

Step 1 : Open Microsoft Visual Studio 2010.

Step 2 : Select File->New->Web Site.

Step 3 : Select ASP.NET Web Site and then click Ok.

Step 4 : Now right-click in the application name in the Solution Explorer window and select Add
            ASP.NET Folder->Theme from the context menu.

A sub folder named Theme1 is automatically created inside the APP_Themes folder in the Solution Explorer.

Step 5 : Right-click on the Theme1 folder and select the Add New Item option.

Step 6 : Select the Skin file and click the Add button.

Now write the following code in the skin file.

Step 7 : Write the following code for Default.aspx page.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs"
         Inherits="_Default" Theme="Theme1" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>     
        <br />
                   
         <asp:Label ID="Label2" runat="server" Font-Bold="False"
                    Font-Names="Comic Sans MS" Font-Underline="True"
                    Text="THEME EXAMPLE"></asp:Label>
        <br />
        <br />
                 
        <asp:Label ID="Label1" runat="server" Text="enter the data in the text box">
        </asp:Label>
          <br />
        <br />
                   
        <asp:TextBox ID="TextBox1" runat="server" Height="42px" Width="237px"></asp:TextBox>
        <br />
        <br />
                    
             
        <asp:Button ID="Button1" runat="server" Text="Click Button"
                    BorderColor="#996633" BorderStyle="Solid" BorderWidth="5px" Height="60px" />
        <br />
        <br />
        <br />
                     
        <asp:Label ID="Label3" runat="server" Text="Select the Theme"></asp:Label>
        <br />
        <br />
                
        <br />
                     
       <br />
        <br />
        <br />
    </div>
    </form>
</body>
</html>

The design window will look like:

Step 8 : Now Press F5 key to run the application.

Output :

Now we will create an application for applying the theme at run time.

Step 9 : To do this add another skin file to the application and write the following code for both skin files.

Code for simple theme is as follows:

Code for coloured theme is as follows:

Step 10 : Add the following code to the Default.aspx file:

The design window looks like:

Step 11 : Now write the following code for the default.aspx.cs file:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class _Default : System.Web.UI.Page
{
    void Page_PreInit(object sender, EventArgs e)
    {
       // Get the theme name from a QueryString variable
        string ThemeName;
        ThemeName = Request.QueryString["Theme"];
        if (ThemeName != null)
        {
            Page.Theme = ThemeName;
        }
    }
}