Rounded Corner Extender
In this article,
I will show you step by step procedure, how to use a Rounded Corner
Extender
In ASP.NET using Visual Studio 2005 or Visual
Studio 2008.
Rounded Corner
Extender is used for formatting the web page like this…
![Rounded Corner Extender.JPG]()
To follow this code sample, you must use Visual Studio 2005 or Visual Studio
2008.
I have used <! – –>
to comment HTML part of the code.
Note: Rounded
Corner Extender is a part of
AjaxControlToolkit.
To attach right click on the toolbox under Ajax Extensions and select
Choose Items - > Browse Button - > select the AjaxControlToolkit.dll. If
you are using Visual Studio 2008, you may not need AJAX Toolkit but if you are
using Visual Studio 2005, you will need to download it from http://www.msdn.com/ or http://www.asp.net/.
Step 1. Start -> All Programs -> Visual Studio 2005
or Visual Studio 2008
Step 2. Now go to File Menu -> New -> Web Site
Step 3.
Under Visual Studio Installed Template-> Choose ASP.NET WEB SITE ->
Choose File System from the location combo box -> Set the
path by the browse button - > Choose the language from the Language ComboBox
(Visual C# , Visual Basic , J #)
Choose Visual C#
Step 4. Click on the OK Button.
This is the source code window and in this page you will se this code.
<%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”Default.aspx.cs” Inherits=”_Default” %>
<!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>Type your
webpage title here</title> <!– Here you can specify your page title in between title tag ->
</head>
<body>
<form id=”form1? runat=”server”>
<div>
<!– In between
div tags you can manage your web controls like buttons, labels, picture Box, ImageMap etc
–>
</div>
</form>
</body>
</html>
|
See here is a tab named Design in the bottom of this page.
Step 5. Click on this tab and you will see a blank web page where you can drag any control from the
toolbox (which is in the left side of this window).
Step 6. Now drag
controls under the AJAX Extensions.
First control you are going to drag and drop on the page is - Script
Manager.
first add a tag on the top of your source code window:
<%@ Register Assembly="AjaxControlToolkit"
Namespace="AjaxControlToolkit"
TagPrefix="cc1"
%>
Under the form tag,
Don’t
be frustrate on seeing this code please read carefully it’s very simple.
|
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:Panel ID="Panel1" runat="server" BackColor="LightPink">
<center>
<asp:Image ID="image1" runat="server" ImageUrl="~/lod.gif" />
</center>
</asp:Panel>
<c1:RoundedCornersExtender runat="server" ID="rd1" TargetControlID="Panel1" BorderColor="DarkGreen" Radius
="50" Corners="All">
</c1:RoundedCornersExtender>
|
Step 7. Now run your web site by Ctrl + F5
OUT PUT
Step 8. When you run the Rounded Corner Extender will seem like this...
![Rounded corner extender fill.JPG]()
Rounded Corner Extender is used for format you web
page… I have used a panel here and you know that the corner of panels are not
rounded they always of straight and here the corners are rounded that’s the use
of Rounded Corner Extender which is a Ajax
Control Toolkit Control…
Step 9. Close Browser
Step 10. Close Visual Studio…
Thanks!
--Nikhil
Kumar
![manjil.jpg]()