The roundedcornersextender control is used to set the Panel, including the rounded corner, radius, and border color.
The following is an example:
1) Create an ASP. NET Ajax-enabled web project in vs2005 and name it roundedcornersextender1.
2) drag and drop a panel control in default. aspx and name it panel1. Drag and Drop a roundedcornersextender control and associate it with panel1. At the same time, set some of its attributes.
CodeAs follows:
1 1 < ASP: Panel ID = "Panel1" Runat = "Server" Height = "50px" Width = "125px" >
2 2 fdfggsgdggdgdgg </ ASP: Panel >
3 3 < BR />
4 4 < BR />
5 5 < C0: roundedcornersextender ID = "Roundedcornersextender1" Behaviorid = "Roundedcornersbehavior1" Radius = "6" Runat = "Server" Bordercolor = "Khaki" Corners = "All"
6 6 targetcontrolid = "Panel1" >
7 7 </ C0: roundedcornersextender >
Attribute description:
Behaviorid: The identifier of the control on the client.
Radius: This control specifies the radius of the target control.
Bordercolor: This control specifies the border color of the target control.
Corners: Specifies which corners of the target control are rounded corners.
Targetcontrolid: Specifies the target control of the control.
3) after completing the basic functions, add some functions to help adjust the panel. Add five radio entries to the page to adjust the Panel radius.
The Code is as follows:
1 1 radius: < BR />
2 2 < Input ID = "Radio1" Type = "Radio" Value = "0" Name = "Radiusvalue" Onclick = "$ Find ('fig). set_radius (this. Value );" /> None & Nbsp;
3 3 < Input ID = "Radio2" Type = "Radio" Value = "2" Name = "Radiusvalue" Onclick = "$ Find ('fig). set_radius (this. Value );" /> 2 & Nbsp;
4 4 < Input ID = "Radio3" Type = "Radio" Value = "4" Name = "Radiusvalue" Onclick = "$ Find ('fig). set_radius (this. Value );" /> 4 & Nbsp;
5 5 < Input ID = "Radio4" Type = "Radio" Value = "6" Name = "Radiusvalue" Onclick = "$ Find ('fig). set_radius (this. Value );" /> 6 & Nbsp;
6 6 < Input ID = "Radio5" Type = "Radio" Value = "8" Name = "Radiusvalue" Onclick = "$ Find ('fig). set_radius (this. Value );" /> 8 & Nbsp;
7 7 < Input ID = "Radio6" Type = "Radio" Value = "10" Name = "Radiusvalue" Onclick = "$ Find ('fig). set_radius (this. Value );" /> 10 < BR />
8 8 < BR />
4) then add four checkpoints to adjust which corners of the Panel need to be rounded.
The Code is as follows:
1 1 corners: < BR />
2 2 < Input ID = "Checkbox1" Type = "Checkbox" Value = "1" Name = "Cornersvalue" Checked = "Checked" Onclick = "$ Find ('fig). setcorner (this. value, this. Checked );" /> Top left & Nbsp; & Nbsp; & Nbsp; & Nbsp; & Nbsp;
3 3 & Nbsp; & Nbsp; & Nbsp; & Nbsp; & Nbsp;
4 4 < Input ID = "Checkbox2" Checked = "Checked" Value = "2" Name = "Cornersvalue" Type = "Checkbox" Onclick = "$ Find ('fig). setcorner (this. value, this. Checked );" /> Top right < BR />
5 5 < Input ID = "Checkbox3" Checked = "Checked" Name = "Cornersvalue" Type = "Checkbox" Value = "8" Onclick = "$ Find ('fig). setcorner (this. value, this. Checked );" /> Bottom
6 6 left & Nbsp; & Nbsp; & Nbsp; & Nbsp; & Nbsp; & Nbsp; & Nbsp; & Nbsp;
7 7 < Input ID = "Checkbox4" Checked = "Checked" Name = "Cornersvalue" Type = "Checkbox" Value = "4" Onclick = "$ Find ('fig). setcorner (this. value, this. Checked );" /> Bottom right < BR />
8 8 < BR />
5) add four radio entries on the page to control the panel color.
The Code is as follows:
1 1 border color: < BR />
2 2 < Input ID = "Radio7" Type = "Radio" Name = "Colorvalues" Value = "" Onclick = "$ Find ('fig ('). set_bordercolor (this. Value );" /> None & Nbsp;
3 3 < Input ID = "Radio8" Type = "Radio" Name = "Colorvalues" Value = "Black" Onclick = "$ Find ('fig ('). set_bordercolor (this. Value );" /> Black & Nbsp;
4 4 < Input ID = "Radio9" Type = "Radio" Name = "Colorvalues" Value = "Red" Onclick = "$ Find ('fig ('). set_bordercolor (this. Value );" /> Red & Nbsp;
5 5 < Input ID = "Radio10" Type = "Radio" Name = "Colorvalues" Value = "Aqua" Onclick = "$ Find ('fig ('). set_bordercolor (this. Value );" /> Aqua
6) After completing these steps, press Ctrl + F5 to view the effect in the browser.
