How to add an AJAX Drop Shadow Extender in ASP.NET using C#
See more tutorials in Controls. This post has Comments Off on How to add an AJAX Drop Shadow Extender in ASP.NET using C#.
In this tutorial we will learn how to add a Drop Shadow Extender to a Panel to make your form look more aesthetically pleasing. This extender has no functional purpose only artistic, so a Form will still operate the same way with or without it, however this may make you Form look more appealing.
Step 1. Setting up the Form
1. Create a new Web Form called “Default.aspx”
2. Add an AJAX Script Manager (always do this with AJAX Forms)
3. Add Panel to the Form
4. Add a bunch of stuff to your Panel whether they be controls or text just so we can see it over a Larger scale. I added some filler text and a button.
4. Click the Smart Tag on the Panel and Select Add Extender
5. Choose the Drop Shadow extender
6. You can run the Project now, but it should not look appealing yet.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
<asp:Panel ID="Panel1" runat="server" BorderColor="Black" BorderStyle="Solid"
Height="300px" Width="500px" BackColor="White">
stuff<br /> on<br /> the<br /> form<br />
more stuff<br />
<asp:Button ID="Button1" runat="server" Text="nothing" />
<asp:DropShadowExtender ID="Panel1_DropShadowExtender" runat="server"
Enabled="True" TargetControlID="Panel1" Opacity="1"
Step 2. Tweaking the Visuals
You may have noticed if you ran the project that it looks almost unreadable. This is because the default layout is not what we want in this example so let’s change some settings.
1. We first have to adjust the Opacity of the extender by adding this to the Code View of the Extender
This will make the Opacity 20% visible so that we can see the Black text on the Form.
2. Now we can make the Panel Background color white so that we dont see the entire Drop Shadow just the perimeter. So put this code in the Panel Code View
3. With these settings changed it should be looking better. There are many more settings that you can tweak, but for this example you can leave it there. Once complete mine looked like this.
4. For future uses feel free to adjust the color settings as well as the opacity, and the rounded corners settings to make it fit your site.
In this tutorial we learned how to create, use, and setup a Drop Shadow Extender in AJAX. The extender has several different settings to tweak how it can look and it also is easy to setup and use. With this your forms will surely be looking better.