Working with DropShadow AJAX Control
Published: 12 Nov 2007
DropShadow is an extender which applies a Drop Shadow to a Panel. It allows you to specify how wide the shadow is as well as how opaque it is, or if you would like rounded corners. This article examines this ASP.NET AJAX control with the help of a sample project.
by Nidal Arabi
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 31729/ 66


Enriching your web application has been somewhat hard before AJAX. However, with Microsoft AJAX Control Toolkit, that job is becoming easier. In this article I will explain the DropShadow control with the help of a project.

About the control

In this article you will find an extender of a panel that is really a must for a beautiful effect. DropShadow extender applies a "Drop Shadow" to a Panel. You can have control over the width and opacity of the shadow. In addition, having rounded corners is an advantage. Please note that the drop shadow also provides the capability to resize and reposition itself when the page is resized.


In order to be able to work with ASP.NET AJAX Control Toolkit, the following should be available:

·         Microsoft Visual Studio 2005 (any version) or you can also use the free of cost Visual Web Developer Express 2005.

·         Download ASP.NET 2.0 AJAX Extensions and install them on your computer after installing Visual studio 2005.

·         Download ASP.NET AJAX Control Toolkit and install them on your computer after installing Visual studio 2005 and AJAX Extensions. You can also download the Toolkit directly from CodePlex project site.

·         After the completion of installation, open Visual Studio 2005 or Visual Web Developer and add a tab in the Toolbox named AJAX Toolkit.

·         Right Click in this tab and choose add items. Browse to the sample directory of where you did extract the Toolkit, then to bin directory and choose the file named AjaxControlToolkit.dll.

·         This is all. You have installed AJAX Control Toolkit and you can start building your controls.

Well, you should be ready by now to begin AJAX Toolkit implementation.

Creating Your DropShadow Sample Solution

Follow the easy steps below to create your solution.

1.    Start your Visual Studio 2005 IDE.

2.    Choose Create Web Site from the menu.

3.    In this sample application we will use the Visual Basic language for the sample application.

4.    Name the solution DropShadowSample.

5.    Choose ASP.NET AJAX Control Toolkit Web Site.

6.    Choose File System in the location box.

7.    Click OK to create the project.

8.    Visual Studio 2005 will create your project with a Default.aspx page and likely a readme.txt. Go ahead and get rid of the latter file.

9.    Open Default.aspx page in design view.

10. You noticed that there is a control on the page already called script manager. (Well, AJAX is really a script based implementation of the language JavaScript.) In Short, Script Manager Control manages client script for Microsoft ASP.NET AJAX pages. By default, the Script Manager control registers the script for the Microsoft AJAX Library with the page. This enables client script to use the type system extensions and to support features such as partial-page rendering and Web-service calls.

11. Now drag one panel from the standard Toolbox, in design mode select the panel and make the background color as yellow and foreground color to black.

12. Inside the panel, write some content as you like.

13. If you run your sample now, you will find that there is a rectangle with your text content.

14. Let us add some elegance to it. Drag a DropShadow control from your AJAX toolkit and drop it on the default page.

15. With the properties of the extender, choose the target control ID to be panel1.

16. If you run the sample again, you will get a nice shadow around the panel.

17. To make your life more beautiful, let us take a look at some of the properties of this extender. Select the panel in the properties window and take careful look at the new additional property group called DropShadow Extender.

18. The opacity of the drop shadow (not the panel), is from 0 (fully transparent) to 1.0 (fully opaque). The default value is 1. This is a percentage value where 0 means no shadow and1 means black shadow. You can go and experiment by setting values like 0, 0.25, 0.5 and 0.75.

19. The Rounded property is set to true to set rounded corners on the target (the panel) and the shadow. Default is false. However, I regard it as nice to add.

20. The radius is also a very nice feature that would make your panel looks more like an egg shape than a rectangle. The more you increase this value, the more the egg-like shape is achieved. The default value is 5.

21. The Track Position is set whether or not the drop shadow should track the position of the panel it is attached to. Use this if the panel is absolutely positioned or will otherwise move.

22. Last but not least is the width property that specifies the shadow width in pixels. The default value is 5. Go experiment and change the value.




I hope you enjoyed what was presented here. Happy AJAXfying and see you in the next article.

User Comments

Title: COMMENT   
Date: 2013-02-05 10:27:05 AM

Community Advice: ASP | SQL | XML | Regular Expressions | Windows

©Copyright 1998-2024  |  Page Processed at 2024-05-22 7:49:31 AM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search