ASP.NET AJAX offers you Resizable Extender Control. ResizableControl is an extender that attaches to any element on a web page and allows the user to resize that control with a handle that attaches to lower-right corner of the control. The resize handle lets the user resize the element as if it were a window.
<ajaxToolkit:ResizableControlExtender ID="ResizableControlExtender1" runat="server" TargetControlID="Panel1" />
There are the following properties of Resizable extender control:
-
TargetControlID
-
HandleCssClass
-
ResizableCssClass
-
MinimumWidth
-
MinimumHeight
-
MaximumWidth
-
MaximumHeight
-
OnClientResizeBegin
-
OnClientResizing
-
OnClientResize
-
HandleOffsetX
-
HandleOffsetY
Example:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ResizableControl.aspx.cs" Inherits="ResizableControl" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<!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 id="Head1" runat="server">
<title>Resizable Control</title>
<style type="text/css">
.handle
{
width:10px;
height:10px;
background-color:#aaccee;
}
.resizing
{
padding:0px;
border-style:solid;
border-width:1px;
border-color:#aaccee;
cursor:se-resize;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager runat="server" ID="scriptManager" />
<div>
<asp:Panel ID="Panel1" runat="server" Style="width: 300px; height: 200px;">
<asp:Label ID="image1" runat="server" Text="ASP.NET AJAX offers you Resizable Extender Control. ResizableControl is an extender that attaches to any element on a web page and allows the user to resize that control with a handle that attaches to lower-right corner of the control. The resize handle lets the user resize the element as if it were a window.">
</asp:Label>
</asp:Panel>
<ajaxToolkit:ResizableControlExtender ID="ResizableControlExtender1" runat="server" TargetControlID="Panel1" HandleCssClass="handle" ResizableCssClass="resizing" MaximumHeight="400" MaximumWidth="500" MinimumHeight="100" MinimumWidth="100" HandleOffsetX="5" HandleOffsetY="5" />
</div>
</form>
</body>
</html>
Output: Now Press F5 to debug the application. You will get the following output:
![Image1.JPG]()
If you want to resize the panel then put the mouse on right button corner and drag as you want.
![Image2.JPG]()