Drop Shadow Extender
In this article, I will show you step by
step procedure, how to use a Drop Shadow
Extender 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: Drop Shadow Extender 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 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.
Step 7. Now drag some controls under the AJAX Extensions.
First control you are going to drag and drop on the page is - Script
Manager.
first add a tag on the top of your source code window:
<%@ Register Assembly="AjaxControlToolkit"
Namespace="AjaxControlToolkit"
TagPrefix="cc1"
%>
Under the form tag,
|
<asp:ScriptManager ID="ScriptManager1"
runat="server">
</asp:ScriptManager>
<div>
<br />
DropShadow Control<br />
<asp:Panel ID="Panel1" runat="server" Width="200px" Height="120px" BorderColor="Red"
BackColor="LightSkyBlue">
<asp:Label ID="Label1"
runat="server"
Text="Enter your
name"></asp:Label>
<asp:TextBox ID="TextBox1"
runat="server"></asp:TextBox><br />
<asp:Label ID="Label2"
runat="server"
Text="Enter your
roll number"></asp:Label>
<asp:TextBox ID="TextBox2"
runat="server"></asp:TextBox>
<asp:Button ID="Button1"
runat="server"
Text="Submit"
/>
<br
/>
<br
/>
<br
/>
<br
/>
<br
/>
</asp:Panel>
<cc1:DropShadowExtender
ID="DropShadowExtender1"
runat="server"
TargetControlID="Panel1"
Opacity="0.5" Rounded="true"
Width="10"
TrackPosition="true"
Radius="10">
</cc1:DropShadowExtender>
</div>
|
Step 8. Don’t be frustrate on seeing this code please
read carefully its very simple.
Step 9. Now run your web site by Ctrl + F5
OUT PUT
Step 10. When you run the DropShadowExtender will seem like
this...
![Dropshadow.JPG]()
Step 11. Close Browser
Step 12. Close Visual Studio…
Thanks!
--Nikhil
Kumar