ResizableControl Sample

ResizableControl Demonstration

Resizable image with buttons for automatic resizing

Submit
Shrink (via Server)
Grow (via Client)

Last image resize: Unknown

ASP.NET AJAX is a free framework for building a new generation of richer, more interactive, highly personalized cross-browser web applications. This new web development technology from Microsoft integrates cross-browser client script libraries with the ASP.NET 2.0 server-based development framework. In addition, ASP.NET AJAX offers you the same type of development platform for client-based web pages that ASP.NET offers for server-based pages. And because ASP.NET AJAX is an extension of ASP.NET, it is fully integrated with server-based services. ASP.NET AJAX makes it possible to easily take advantage of AJAX techniques on the web and enables you to create ASP.NET pages with a rich, responsive UI and server communication. However, AJAX isn't just for ASP.NET. You can take advantage of the rich client framework to easily build client-centric web applications that integrate with any backend data provider and run on most modern browsers.

Resizable text with "onresize" event handler

This text resizes itself to be as large as possible within its container.

ResizableControl Description

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, 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. ResizableControl can optionally limit the maximum and minimum width and height of the target control so that resizing can be constrained by the page author (for example, to limit scrolling to only the horizontal dimension).

ResizableControl Properties

The controls above are initialized with code like this. The italic properties are optional:

<ajaxToolkit:ResizableControlExtender ID="RCE" runat="server"
    TargetControlID="PanelImage"
    HandleCssClass="handleImage"
    ResizableCssClass="resizingImage"
    MinimumWidth="50"
    MinimumHeight="20"
    MaximumWidth="260"
    MaximumHeight="130"
    OnClientResize="OnClientResizeImage"
    HandleOffsetX="3"
    HandleOffsetY="3" />

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