I have discussed different AJAX Control Toolkit extender controls on DevASP.NET one by one and explained it with example. Along with other extender controls, RoundedCornersExtender is also part of AJAX Control Toolkit. Rounded corner is one of the most demanded features for controls to give a better look. Rounded corners can be achieved with different techniques but most popular is the use of AJAX Control Toolkit RoundedCornersExtender. It has not many properties as other extenders controls in AJAX control Toolkit but it is very effective. We can round corner of a div or panel and we can also use it with TextBox, Labels, Image and other controls in ASP.NET.
Properties of RoundedCornersExtender
TargetControlID
We have to specify ID of the div, panel or control to attach RoundedCornersExtender to it.
Color
This property is used to set the color of the corners.
Radius
Radius property is used to set the radius of corners. The default is set to 5 but we change according to our requirements. If we want to broader the corners then we can set greater value for radius property.
Corners
This property provides the facility to set the corner position which you want round corners. It provides different values to set different positions as All, Bottom, BottomLeft, BottomRight, Left, None, Right, Top, TopLeft and TopRight.
1.Open Visual Studio 2010
2.File > New > Website
3.Visual basic or Visual C# > ASP.NET Empty Web Site
4.Website > Add New Item > Web Form
5.Open Toolbox > Right Click > Add Tab
6.Name the Tab As “AJAX Control Toolkit”
7.Click on Tab > Choose Items
8.Browse the “AjaxControlToolkit.dll” > Click Ok
9.I have downloaded and extracted AJAX Control Toolkit in “Ajax” folder in “C” Drive so my path to the file is “C:\Ajax\ AjaxControlToolkit.dll”
10.Open web form and add a ScriptManager control from “AJAX Extensions” tab.
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
ScriptManager control is necessary when you are using Ajax functionality in your application.
11.Add following code in Web form with 5 RoundedCornersExtender controls from “AJAX Control Toolkit” tab. Entire code in web form will look like as below.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:Panel ID="Panel1" BackColor="LightPink" Style="margin: 0 auto; width: 300px; height: 150px" runat="server">
<p align="center">Provide following information</p>
<table align="center">
<tr>
<td><asp:Label ID="lblName" runat="server" Text="Name:"></asp:Label></td>
<td><asp:TextBox ID="txtBoxName" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td><asp:Label ID="lblAge" BackColor="AliceBlue" runat="server" Text="Age:"></asp:Label></td>
<td><asp:TextBox ID="txtBoxAge" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td><asp:Label ID="lblGender" runat="server" Text="Gender:"></asp:Label></td>
<td>
<asp:CheckBoxList ID="CheckBoxList1" runat="server" RepeatDirection="Horizontal" AutoPostBack="True" BackColor="Lime">
<asp:ListItem>Male</asp:ListItem>
<asp:ListItem>Female</asp:ListItem>
</asp:CheckBoxList>
</td>
</tr>
<tr>
<td><asp:Label ID="lblCountry" runat="server" Text="Country:"></asp:Label></td>
<td><asp:TextBox ID="txtBoxCountry" runat="server"></asp:TextBox></td>
</tr>
</table>
</asp:Panel>
<ajax:RoundedCornersExtender ID="RoundedCornersExtender1" TargetControlID="Panel1" Corners="All" Radius="20" runat="server">
</ajax:RoundedCornersExtender>
<ajax:RoundedCornersExtender ID="RoundedCornersExtender2" TargetControlID="txtBoxName" Corners="Top" Color="Green" runat="server">
</ajax:RoundedCornersExtender>
<ajax:RoundedCornersExtender ID="RoundedCornersExtender3" TargetControlID="lblAge" Corners="TopRight" Radius="5" runat="server">
</ajax:RoundedCornersExtender>
<ajax:RoundedCornersExtender ID="RoundedCornersExtender4" TargetControlID="CheckBoxList1" Corners="Left" BorderColor="Black" runat="server">
</ajax:RoundedCornersExtender>
<ajax:RoundedCornersExtender ID="RoundedCornersExtender5" TargetControlID="txtBoxCountry" Corners="Bottom" Radius="10" runat="server">
</ajax:RoundedCornersExtender>
</div>
</form>
</body>
</html>
I have added a Panel control after ScriptManager control. Panel control works as a container like div element. We can attach panel to RoundedCornersExtender control as I have attached it to first RoundedCornersExtender control. Then I have added a paragraph tag and a table in the panel. Inside table, I have added Label and TextBox controls and a CheckBoxList control. I have attached RoundedCornersExtender controls to TextBox controls, to a Label control and to CheckBoxList control. I have set different property values for different RoundedCornerExtender controls for Radius and Corners properties. You can change values and can see the effect of those values.
