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.
