Introduction
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.
Applying Inline style attribute to the page level, control level.
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="VB" AutoEventWireup="true" Theme="Theme1" CodeFile="Default.aspx.vb" 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 Sub Page_PreInit(ByVal sender As Object, ByVal e As System.EventArgs)
Page.Theme = Request.QueryString("Theme1")
End Sub
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 Sub ddSelSkin_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs)
If ddSelSkin.SelectedValue.ToString().Trim() <> "" Then
Session("Theme") = ddSelSkin.SelectedValue.ToString()
Response.Redirect("./Default.aspx")
End If
End Sub
At very first I take this in session to get applied throughout the application on index.aspx.vb page & redirect to "Default.aspx" page.
Protected Sub Page_PreInit(ByVal sender As Object, ByVal e As System.EventArgs)
Page.Theme = Session("Theme").ToString()
btnDisplay.SkinID = "btnSkin"
calNew.SkinID = "calControl"
End Sub
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!
NOTE: THIS ARTICLE IS CONVERTED FROM C# TO VB.NET USING A CONVERSION TOOL. ORIGINAL ARTICLE CAN BE FOUND ON C# Corner (http://www.c-sharpcorner.com/).