AJAX ControlToolkit学习日志-DropShadowExtender(10)

      该控件用于对一个面板实现Shadow的效果。对其的属性进行不同值的设置，可以实现不同的效果。

下面来看一个示例：

1)在VS中新建一个ASP.NET AJAX-Enabled Web Project项目工程，命名为DropShadowExtender1。

2)在Default.aspx中拖放一个Panel控件，在其里面拖放两个Label和两个TextBox。把Label的Text属性设置为Name和Password。

代码如下：

1            &nbsp;<asp:Label ID="Label1" runat="server" ForeColor="White" Text="Name"></asp:Label>
2            &nbsp; &nbsp; &nbsp;
3            <asp:TextBox ID="TextBox2" runat="server" Width="89px"></asp:TextBox>
4            &nbsp; &nbsp;&nbsp;<br />
5            &nbsp;<asp:Label ID="Label2" runat="server" ForeColor="White" Text="Password"></asp:Label>
6            <asp:TextBox ID="TextBox1" runat="server" Width="91px"></asp:TextBox></div>    
7            </asp:Panel>

3)然后再在页面上拖放一个DropShadowExtender控件，设置其一些属性。

代码如下：

1        <cc1:dropshadowextender id="DropShadowExtender1" BehaviorID="DropShadowBehavior1" TargetControlID="Panel1" Opacity="0.5" Rounded="true"
2         Radius="6" runat="server"></cc1:dropshadowextender>

属性说明：
      BehaviorID：为该控件在客户端行为表现的标识号。
      TargetControlID：该控件绑定的要实现Shadow效果的控件。
      Opacity：实现Shadow效果的控件的透明度。
      Rounded：实现Shadow效果的控件是否有圆角。
      Radius：实现Shadow效果的控件的半径。

4)同时在页面上拖放一些用于控制效果的控件。

代码如下：

 1        &nbsp;<asp:Label ID="Label3" runat="server" Text="Show Drop Shadow"></asp:Label>:<input type="checkbox" checked="checked" id="chkShadow" onclick="var b = $find('DropShadowBehavior1'); b.set_Width(chkShadow.checked ?  5 : 0);"/>   
 2        <br />
 3        Rounded:<input type="checkbox" checked="checked" id="chkRounded" onclick="var b=$find('DropShadowBehavior1');b.set_Rounded(chkRounded.checked);" /> 
 4        <br />
 5        Radius:<input type="radio" id="radio2" name="radiusName" value="2" onclick="var b=$find('DropShadowBehavior1');b.set_Radius(this.value);" />
 6        2
 7        <input type="radio" id="raido4" value="4" name="radiusName" onclick="var b=$find('DropShadowBehavior1');b.set_Radius(this.value);" />
 8        4
 9        <input type="radio" id="Radio6" value="6" name="radiusName" checked="true" onclick="var b=$find('DropShadowBehavior1');b.set_Radius(this.value);" />
10        6
11        <input type="radio" id="Radio8" value="8" name="radiusName" onclick="var b=$find('DropShadowBehavior1');b.set_Radius(this.value);" />
12        8 &nbsp;<input type="radio" id="Radio10" value="10" name="radiusName" onclick="var b=$find('DropShadowBehavior1');b.set_Radius(this.value);" />
13        10
14        <br />
15        Opacity:
16        <input type="radio" name="OpacityName" id="radio0" value="0" onclick="var b=$find('DropShadowBehavior1');b.set_Opacity(this.value);" />
17        0%
18        <input type="radio" name="OpacityName" id="radio2" value="0.25" onclick="var b=$find('DropShadowBehavior1');b.set_Opacity(this.value);" />
19        25%
20        <input type="radio" name="OpacityName" id="radio5" value="0.5" checked="checked" onclick="var b=$find('DropShadowBehavior1');b.set_Opacity(this.value);" />
21        50%
22        <input type="radio" name="OpacityName" id="radio7" value="0.75" onclick="var b=$find('DropShadowBehavior1');b.set_Opacity(this.value);" />
23        75%
24        <input type="radio" name="OpacityName" id="radio" value="1" onclick="var b=$find('DropShadowBehavior1');b.set_Opacity(this.value);" />
25        100%

最终视图如下：



5)按下CTRL+F5，在浏览器里查看效果。

效果图如下：