November 7, 2009

The DropShadowExtender adds a drop shadow to a asp.net Panel control. It is easy to add a DropShadowExtender to a panel control - simply add a panel control and add the extender to it.

After creating the page, I will add a panel control to the page.

    <asp:Panel ID="Panel1" runat="server" Height="180px" Width="400px" ForeColor="White" BackColor="Blue">
    some text some text some text some text some text<br />
    some text some text some text some text some text<br />
    some text some text some text some text some text<br />
    some text some text some text some text some text<br />
    some text some text some text some text some text<br />
    some text some text some text some text some text<br />
    some text some text some text some text some text<br />
    </asp:Panel>

Notice, that I have added height, width, ForeColor and BackColor attributes to it. It is important to add the BackColor property to it. Otherwise the panel control looks with some text outside the .

Then, to the Panel control, a DropShadowExtender extender is added.

    <cc1:DropShadowExtender ID="Panel1_DropShadowExtender" runat="server"
        Enabled="True" TargetControlID="Panel1"
        Rounded="true" Opacity="0.5" Radius="1"  >
    </cc1:DropShadowExtender>

Notice the TargetControlId attribute of the extender is assigned to the ID attribute of the Panel. The Rounded attribute is set to true - this means the Panel and its drop shadow will have rounded corners. The Opacity attribute determines the opacity (between 0 and 1.0) of the drop shadow. The radius attribute determines the radius of the rounded corners.

Finally, ScriptManager is added to the page. This is required to for the AJAX controls/extenders to work.

    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>



Reference: Shahed Kazi at AspNetify.com