Creating and Applying Themes Dynamically
In this article, I will show you step by
step procedure, how to Create and Apply Themes
Dynamically in ASP.NET using
Visual Studio 2005 or Visual Studio 2008.
To follow this code sample, you must use Visual Studio 2005 or Visual Studio
2008.
I have used <! – –> to comment HTML part of the code.
Note: Creating and Applying Themes Dynamically is a part of
AjaxControlToolkit.
To attach right click on the toolbox under Ajax Extensions and select
Choose Items - > Browse Button - > select the AjaxControlToolkit.dll. If
you are using Visual Studio 2008, you may not need AJAX Toolkit but if you are
using Visual Studio 2005, you will need to download it from http://www.msdn.com/ or http://www.asp.net/.
Step 1. Start -> All Programs -> Visual Studio 2005
or Visual Studio 2008
Step 2. Now go to File Menu -> New -> Web Site
Step 3.
Under Visual Studio Installed Template-> Choose ASP.NET WEB SITE ->
Choose File System from the location combo box -> Set the
path by the browse button - > Choose the language from the Language ComboBox
(Visual C# , Visual Basic , J #)
Choose Visual C#
Step 4. Click on the OK Button.
This is the source code window and in this page you will se this code.
<%@ 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 runat=”server”>
<title>Type your
webpage title here</title> <!– Here you can specify your page title in between title tag ->
</head>
<body>
<form id=”form1? runat=”server”>
<div>
<!– In between
div tags you can manage your web controls like buttons, labels, picture Box, ImageMap etc
–>
</div>
</form>
</body>
</html>
|
See here is a tab named Design in the bottom of this
page.
Step 5. Click on this tab and you will see a blank web page where you can drag any control from the
toolbox (which is in the left side of this window).
Step 6. Drag one Panel Control,One Button control and Two
Label control and Two TextBox Control to the designer from Toolbox by clicking
Button and Label control in the Toolbox and dropping them to the page designer.
Step7.And maintain your code format
like this…
|
<form id="form1" runat="server">
<div>
<!—Drag ScriptManager under the AjaxExtensions tab ->
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<center>
<asp:Panel ID="Panel1" runat="server" >
<asp:Label ID="label1" runat="server" Text="Enter Your Name"></asp:Label>
<asp:TextBox ID="textbox1" runat="server" ></asp:TextBox>
<br />
<br />
<asp:Label ID="label2" runat="server" Text="Enter Your mobile no."></asp:Label>
<asp:TextBox ID="Textbox2" runat="server" ></asp:TextBox>
<br />
<br />
<br />
<asp:Button ID="button1" runat="server" Text="Register" onclick="button1_Click" />
<br />
<br />
<br />
</asp:Panel>
<center>
<a href="Default.aspx?Theme=Pink">Pink</a>
<br />
<br />
<br />
<a href="Default.aspx?Theme=Red">Red</a>
</center>
<br />
<br />
<br />
<asp:Image ID="Image1" runat="server" />
</center>
|
Step 8. Don’t be frustrate on seeing this code please
read carefully its very simple.
Step 9. In solution Explorer right click on the web site and Add
new item - > select Skin File -> Rename it
Red
And again import a skin file then rename it with
pink
Copy two images from your hard drive and paste them
in your web site folder in this format..
![Solution.jpg]()
Step 10. Now Open Pink Skin file and write this
code..
|
<asp:Image runat="server" ImageUrl="~/images/lod.gif" />
<asp:Label runat="server" ForeColor="Pink" Font-Size="12pt" BackColor="White"/>
<asp:TextBox runat="server" ForeColor="LightYellow" BackColor="Pink" Font-Size="12pt"/>
<asp:Button runat="server" ForeColor="LightYellow" BackColor="Pink" Font-Size="12pt"/>
|
Step 11 .Now Open Red skin file and write this code
into it…
|
<asp:Image runat="server" ImageUrl="~/images/loadingAnimation.gif" />
<asp:Label runat="server" ForeColor="Red" Font-Size="12pt" BackColor="White"/>
<asp:TextBox runat="server" ForeColor="LightYellow" BackColor="Red" Font-Size="12pt"/>
<asp:Button runat="server" ForeColor="LightYellow" BackColor="Red" Font-Size="12pt"/>
|
Step 12.Now run
your web site by Ctrl + F5
OUT PUT
Step 13. When you run the Creating and Applying Themes
Dynamically
And select the pink then it will show like this..
![Themes.JPG]()
Step 14. Close Browser
Step 15. Close Visual Studio…
Thanks!
--Nikhil
Kumar
![Manjil.jpg]()