Working with DropShadow AJAX Control
page 4 of 7
by Nidal Arabi
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 31824/ 40

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.

View Entire 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-04-15 5:38:22 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search