The 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. The appearance of the resize handle can be specified by the page designer with a CSS style. The content within the element can use CSS styles to automatically resize to fit the new dimensions.

Alternatively, the ResizableControl exposes two events (onresizing and onresize) that the page designer can attach custom script to in order to enable more complex layout logic.

Element dimensions are preserved across postbacks to the server and “size” properties accessible on both the client and server can be used to enable custom resize behaviors.

Today we will be building a simple example of the ResizableControl, that is fully functional.
We will be resizing a few images within a panel.

It is extremely easy to use Visual Studio to build a new page.

First things first lets add a new WebForm to this project and name it ResizableControl.aspx.

As always please remember to add a ScriptManager to the page.

For this tutorial we are going to add a panel and inside of the panel we are going to add an image to be controlled.

We also styled the panel using these styles.

Now we add our Resizable Extender and set the properties and rules.

As you can see we set the minimum width of the image to 50 and a maximum height to 250. Below we set the actual functions using JavaScript. Not the most game changing JavaScript code but it does the job and works.

Now in a click event when the image is clicked we called the system.Drawing.Size library to activate on the Resizable click event.

Below are quick explanations of the 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
HandleOffsetX/HandleOffsetY – Offsets to apply to the location of the resize handle

The markup of the page will look like:

Download Source Files