ResizablecontrolExtender allows resizing of panel control.
ResizableControl Properties:
· TargetControlID - The ID of the element that becomes resizable
· HandleCssClass - The name of the CSS class to apply to the resize handle
· ResizableCssClass - The name of the CSS class to apply to the element when resizing
· MinimumWidth/MinimumHeight - Minimum dimensions of the resizable element
· MaximumWidth/MaximumHeight - Maximum dimensions of the resizable element
· OnClientResizeBegin - Event fired when the element starts being resized
· OnClientResizing - Event fired as the element is being resized
· OnClientResize - Event fired when the element has been resized
Code:
Write these codes on aspx page and apply these style classes in head tag of aspx page
<head>
<style type="text/css">
.main
{
width: 16px;
height: 16px;
background-image: url(~/Jellyfish.jpg);
overflow: hidden;
cursor: se-resize;
}
</style>
</head>
<%--Add the ScriptManager, ResizableControlExtender and Panel--%>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<cc1:ResizableControlExtender ID="ResizableControlExtender1" runat="server" TargetControlID="Panel1" HandleCssClass="main" MaximumHeight="700" MaximumWidth="1000" MinimumHeight="100"MinimumWidth="100">
</cc1:ResizableControlExtender>
<asp:Panel ID="Panel1" runat="server" BackImageUrl="~/Jellyfish.jpg">
</asp:Panel>
You Can limit maximum and minimum width and height of the resizable control
Run the project
When you stretch right corner of the image then image width and height will increase.
Leave a Comment