DropShadowExtender Control In Ajax

DropShadow is an extender that applies a drop shadow to an ASP.NET Panel control. The extender allows you to specify how wide the shadow is, how opaque it is, and whether the shadow should have rounded corners. For pages that let the user move or resize the panel, the DropShadow extender has a mode that will resize and reposition the shadow to match the target panel at run time.
DropShadowExtender Properties:-
1. TargetControlID :- The ID of the control to extend.
2. Width: - The width, in pixels, of the drop shadow. The default is 5.
3. Opacity :- The opacity of the drop shadow, from 0 (fully transparent) to 1.0 (fully opaque). The default is    .5.
4. TrackPosition :- A Boolean value that specifies whether the DropShadow should track the position of the panel it is attached to. Set this property to true if the panel is absolutely positioned or if it might move at run time. The default is false.
5. Rounded: - A Boolean value that specifies whether the corners of the target and drop shadow should be rounded.


Example:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DropShadowExtender.aspx.cs" Inherits="DropShadowExtender" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

 <form id="form1" runat="server">
 <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
 <h3> Using DropShadowExtender</h3>
 <hr />
 <div>
 <asp:Panel ID="Panel1" runat="server" Width="300" Height="150" BackColor="Blue" ForeColor="White"> <div style="padding: 10px; text-align: center">
<b>First Name:</b>
<asp:TextBox ID="txtFirstName" runat="server"></asp:TextBox>
<br /> <br />
 <b>Last Name:</b>
 <asp:TextBox ID="txtLastName" runat="server"></asp:TextBox>
<br /> <br />
 <hr style="width: 270px" />
 </div>
</asp:Panel>
<asp:DropShadowExtender ID="DropShadowExtender1" runat="server" TargetControlID="Panel1" Width="15" Rounded="true" Radius="20" Opacity=".75" TrackPosition="true" />
 </div>
 </form>


Output:


No comments:

Post a Comment