Theme is the new feature in ASP.NET 2.0. Theme concept allows us to create the appearance of control. For theme here is a App_Theme Folder, we can add this folder by right clicking on Web Project add new folder. Inside this folder we can add other files with extension .skin, .css etc.
Figure 1.
Here in this example I am using a calendar control for showing the concept of theme. Here for calendar we find many properties like as:
<asp:Calendar runat="server" BorderWidth="2px" BorderColor="#CCCCCC" BackColor="#2B60DE">
<TodayDayStyle BackColor="#FF00FF" Forecolor="#0000DD"></TodayDayStyle>
<SelectedDayStyle ForeColor="#0000FF" BorderColor="#000066" BackColor="#FFFFFF"></SelectedDayStyle>
<TitleStyle Font-Bold="True" ForeColor="#FFFFFF" BackColor="#000066"></TitleStyle>
<DayHeaderStyle Font-Bold="True" ForeColor="#000066" BackColor="#EEEEEE"></DayHeaderStyle>
<NextPrevStyle ForeColor="#FFFFFF" BackColor="#000066"></NextPrevStyle>
<OtherMonthDayStyle BackColor="#806D7E" ForeColor="#AAAAAA"></OtherMonthDayStyle>
<DayStyle ForeColor="#2B60DE" BackColor="#FFFF00"></DayStyle>
<WeekEndDayStyle BackColor="#8D38C9" ForeColor="#659EC7"></WeekEndDayStyle>
</asp:Calendar>
These calendar properties we can set in different-different skin files for more then one appearanace for calendar control.
Here we get many properties like as todaydaystyle, next, previous, otherday day. We can set the appearance of calendar by using these properties.
This is the aspx code for the application:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Theme </title>
</head>
<body>
<form id="form1" runat="server">
<div>
<table width=90% cellpadding=0 cellspacing=0 align="center" border="4">
<tr><td height="40px"></td></tr>
<tr>
<td align=center>From Here Select Theme
<asp:DropDownList ID="Themes" runat="server" AutoPostBack="True">
<asp:ListItem Selected="True">Default</asp:ListItem>
<asp:ListItem>Yellow</asp:ListItem>
<asp:ListItem>SkyHigh</asp:ListItem>
<asp:ListItem>Blue</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr><td height="20px"></td></tr>
<tr>
<td valign=top align="center">
<asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
The cs file for this application:
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Page_PreInit(object sender, EventArgs e)
{
string theme = "";
if (Page.Request.Form.Count > 0)
{
theme = Page.Request["Themes"].ToString();
if (theme == "Default")
{
theme = "";
}
}
this.Theme = theme;
}
}
When user run the application then the default appearance comes:
Figure 2: Default Appearance.
If user change the appearance then:
Figure 3: If user select the Yellow appearance.
Figure 4: If user select the blue appearance.