How to make the Corners of any ASP.NET controls Round using Concepts of Ajax

This is very useful for the asp.net developers to make the asp.net controls round.For this , RoundedCornersExtender control is used to make the corners of any asp.net controls round.This control adds a background panel to an asp.net control so that the control,when rendered on a web page appears with rounded corners.There are some properties of this RoundedCornersExtender as given below:-

TargetControlID:- It sets the ID of the control whose corners are to be modified.
Corners:-It is helpful to sets the corners of the target control,which you want to round.
Radius:-It sets the radius of the rounded corners by default this value is 5 pixel.

You have to install AjaxToolkit in your visual studio before use RoundedCornersExtender control.

Step 1:- First open your visual studio-->File-->New-->Website-->Select Asp.net Empty Website-->OK -->Open Solution Explorer Window -->Add a New Web Form(Default.aspx)-->First Drag and drop AjaxToolKit and Panel Control-->After that inside Panel Control,drag and drop Text Box and Button controls as shown below:-

Step 2:-Now open Source file -->Drag and Drop RoundedCornersExtender in this code file-->and set its properties as shown below:-

Step 3:- You see complete source code as given below:-

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>

<!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:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
        </asp:ToolkitScriptManager>
        <br />
        <asp:Panel ID="Panel1" runat="server" Height="150px" Width="380px">
            &nbsp; UserName&nbsp;
            <asp:TextBox ID="TextBox1" runat="server" Height="31px" Width="194px"></asp:TextBox>
            <br />
            &nbsp; Password&nbsp;&nbsp;
            <asp:TextBox ID="TextBox2" runat="server" Height="32px" Width="197px" 
                TextMode="Password"></asp:TextBox>
            <br />
            <asp:Button ID="Button1" runat="server" Height="32px" 
                style="font-weight: 700; background-color: #99CCFF" Text="Logon" 
                Width="87px" />
            <br />
        </asp:Panel>
        <asp:RoundedCornersExtender ID="RoundedCornersExtender1" runat="server" TargetControlID="Panel1"
        Radius="35" BehaviorID = "RoundedCornersBehavior1" Corners="All" BorderColor="Red"> 
        </asp:RoundedCornersExtender>
    </div>
    </form>
</body>
</html>

Descriptions:-This control target the panel control that contains a set of different Asp.net controls.You can use the Corners property to specify the corners that you want to make round,such as TopRight,TopLeft,BottomRight,BottomLeft and All.The Radius property,st to 35,controls the roundness of the corners.The BorderColor property,set to Red,specifies the color in which the borders appears.
Step 4:- Now Run the Application (press F5)--> You will see following output as shown below

For More...

Download Whole Attached file
Download

How to make the Corners of any ASP.NET controls Round using Concepts of Ajax

Subscribe through email and get Free updates in inbox

Please like and share this post with your friends...

0 comments:

Post a Comment

How to make the Corners of any ASP.NET controls Round using Concepts of Ajax

Subscribe through email and get Free updates in inbox

Please like and share this post with your friends...

You May Also Like...

0 comments:

Post a Comment