Ajax controltoolkit Learning Log-dropshadowextender (10)

This control is used to implement the shadow effect on a panel. You can set different values for attributes to achieve different effects.

Here is an example:

1) Create an ASP. NET Ajax-enabled web project in Vs and name it dropshadowextender1.

2) drag and drop a panel control in default. aspx, and drag and drop two labels and two textbox. Set the text attribute of label to name and password.

CodeAs follows: 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; < 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) then drag and drop a dropshadowextender control on the page to set some of its properties.

The Code is as follows: 1 < C0: dropshadowextender ID = "Dropshadowextender1" Behaviorid = "Dropshadowbehavior1" Targetcontrolid = "Panel1" Opacity = "0.5" Rounded = "True"
2 Radius = "6" Runat = "Server" > </ C0: dropshadowextender >

Attribute description:
Behaviorid: ID of the control's behavior on the client.
Targetcontrolid: the control bound to the control to implement the shadow effect.
Opacity: the transparency of the control that implements the shadow effect.
Rounded: Specifies whether the shadow control has rounded corners.
RADIUS: the radius of the control that implements the shadow effect.

4) drag and drop some controls on the page to control the effect.

The Code is as follows:

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%

The final view is as follows:

5) press Ctrl + F5 to view the effect in the browser.

As follows: