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.
<ajaxToolkit:DropShadowExtender ID="DropShadowExtender1" runat="server" Opacity="0.50" TargetControlID="Image1" TrackPosition="True" Width="8"/>
Properties of Drop shadow:
- TargetControlID - The ID of the button or link for this extender to operate on
- Width - The width, in pixels of the drop shadow. Default value is 5.
- Opacity - The opacity of the drop shadow, from 0 (fully transparent) to 1.0 (fully opaque). The default value is .5.
- TrackPosition - Whether 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.
- Rounded - Set to true to set rounded corners on the target and the shadow. Default is false.
Example:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DropShadow.aspx.cs" Inherits="DropShadow" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>AJAX DropShadow</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<table width="100%" cellpadding="5" cellspacing="5">
<tr>
<td>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:Panel ID="Panel1" runat="server">
<asp:TextBox ID="TextBox1" runat="server" Width="125px" Visible="false"></asp:TextBox>
<ajaxToolkit:SliderExtender ID="SliderExtender1" runat="server" TargetControlID="TextBox1" />
<asp:Image ID="Image1" runat="server" Height="200" Width="200" ImageUrl="~/Image1.jpg" />
</asp:Panel>
<ajaxToolkit:DropShadowExtender ID="DropShadowExtender1" runat="server" Opacity="0.50" TargetControlID="Image1" TrackPosition="True" Width="8">
</ajaxToolkit:DropShadowExtender>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
<head runat="server">
<title>AJAX DropShadow</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<table width="100%" cellpadding="5" cellspacing="5">
<tr>
<td>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:Panel ID="Panel1" runat="server">
<asp:TextBox ID="TextBox1" runat="server" Width="125px" Visible="false"></asp:TextBox>
<ajaxToolkit:SliderExtender ID="SliderExtender1" runat="server" TargetControlID="TextBox1" />
<asp:Image ID="Image1" runat="server" Height="200" Width="200" ImageUrl="~/Image1.jpg" />
</asp:Panel>
<ajaxToolkit:DropShadowExtender ID="DropShadowExtender1" runat="server" Opacity="0.50" TargetControlID="Image1" TrackPosition="True" Width="8">
</ajaxToolkit:DropShadowExtender>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
When you use property Rounded=true like as follows:
<ajaxToolkit:DropShadowExtender ID="DropShadowExtender1" runat="server" Rounded=true Radius=8
Opacity="0.50" TargetControlID="Image1" TrackPosition="True" Width="8">
</ajaxToolkit:DropShadowExtender>
<ajaxToolkit:DropShadowExtender ID="DropShadowExtender1" runat="server" Rounded=true Radius=8
Opacity="0.50" TargetControlID="Image1" TrackPosition="True" Width="8">
</ajaxToolkit:DropShadowExtender>
