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

By
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...
  1. Learn Microsoft SQL Server concepts with Real Life Examples
  2. Learn Microsoft LINQ concepts with Real Life Examples
  3. Learn Microsoft WCF concepts with Real Life Examples
  4. Learn .NET Interviews Questions and answers with Real Life Examples
  5. Learn Microsoft C# concepts with Real Life Examples
  Download Whole Attached file
          Download

0 comments:

Post a comment

Powered by Blogger.