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.
Lets begin
- 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.
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"> </asp:ToolkitScriptManager>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.
<asp:Panel ID="PanelImage" runat="server" CssClass="frameImage">
<asp:Image ID="Image1" runat="server" ImageUrl="images/5516920314_70af046936_b.jpg"
AlternateText="ASP.NET AJAX" Style="width: 100%; height: 100%;" />
</asp:Panel>
We also styled the panel using these styles.
<style>
<%-- /* ResizableControl */--%>
.frameImage
{
width:130px;
height:65px;
overflow:hidden;
float:left;
padding:3px;
}
.frameText
{
width:100px;
height:100px;
overflow:auto;
float:left;
background-color:#ffffff;
border-style:solid;
border-width:2px;
border-color:Gray;
font-family:Helvetica;
line-height:normal;
}
.handleImage
{
width:15px;
height:16px;
background-image:urlundefinedimages/HandleHand.png);
overflow:hidden;
cursor:se-resize;
}
.handleText
{
width:16px;
height:16px;
background-image:urlundefinedimages/HandleGrip.png);
overflow:hidden;
cursor:se-resize;
}
.resizingImage
{
padding:0px;
border-style:solid;
border-width:3px;
border-color:#B4D35D;
}
.resizingText
{
padding:0px;
border-style:solid;
border-width:2px;
border-color:#7391BA;
}
</style>
Now we add our Resizable Extender and set the properties and rules.
<asp:ResizableControlExtender ID="ResizableControlExtender1" runat="server" BehaviorID="ResizableControlBehavior1"
TargetControlID="PanelImage" ResizableCssClass="resizingImage" HandleCssClass="handleImage"
MinimumWidth="50" MinimumHeight="26" MaximumWidth="250" MaximumHeight="170" HandleOffsetX="3"
HandleOffsetY="3" OnClientResize="OnClientResizeImage" />
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.
function OnClientClickGrowundefined) {
var rcp = $findundefined'ResizableControlBehavior1');
var size = rcp.get_Sizeundefined);
rcp.set_Sizeundefined{ width: size.width * 2, height: size.height * 2 });
return false;
}
function OnClientResizeImageundefinedsender, eventArgs) {
$getundefined"lastResize").innerHTML = "Last image resize at " + undefinednew Dateundefined)).toStringundefined);
}
var fontSize = 12;
function OnClientResizeTextundefinedsender, eventArgs) {
// This sample code isn't very efficient, but demonstrates the idea well enough
var e = sender.get_elementundefined);
// Make the font bigger until it's too big
while undefinedundefinede.scrollWidth <= e.clientWidth) || undefinede.scrollHeight <= e.clientHeight)) {
e.style.fontSize = undefinedfontSize++) + 'pt';
}
var lastScrollWidth = -1;
var lastScrollHeight = -1;
// Make the font smaller until it's not too big - or the last change had no effect
// undefinedfor Opera where e.clientWidth and e.scrollWidth don't behave correctly)
while undefinedundefinedundefinede.clientWidth < e.scrollWidth) || undefinede.clientHeight < e.scrollHeight)) &&
undefinedundefinedSys.Browser.agent !== Sys.Browser.Opera) || undefinede.scrollWidth != lastScrollWidth) || undefinede.scrollHeight != lastScrollHeight))) {
lastScrollWidth = e.scrollWidth;
lastScrollHeight = e.scrollHeight;
e.style.fontSize = undefinedfontSize--) + 'pt';
}
}
Now in a click event when the image is clicked we called the
system.Drawing.Size library to activate on the Resizable click event.
protected void Button2_Clickundefinedobject sender, EventArgs e)
{
System.Drawing.Size s = ResizableControlExtender1.Size;
ResizableControlExtender1.Size = new System.Drawing.Sizeundefineds.Width / 2, s.Height / 2);
}
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
<form id="form1" runat="server">
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<p><strong>Resizable image with buttons for automatic resizing</strong></p>
<asp:Panel ID="PanelImage" runat="server" CssClass="frameImage">
<asp:Image ID="Image1" runat="server" ImageUrl="images/AJAX.gif"
AlternateText="ASP.NET AJAX" style="width:100%; height:100%;" />
</asp:Panel>
<p style="width:400px;float:left">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 exte</p>
<p></p>
<script type="text/javascript">
function OnClientClickGrowundefined) {
var rcp = $findundefined'ResizableControlBehavior1');
var size = rcp.get_Sizeundefined);
rcp.set_Sizeundefined{ width: size.width * 2, height: size.height * 2 });
return false;
}
function OnClientResizeImageundefinedsender, eventArgs) {
$getundefined"lastResize").innerHTML = "Last image resize at " + undefinednew Dateundefined)).toStringundefined);
}
var fontSize = 12;
function OnClientResizeTextundefinedsender, eventArgs) {
// This sample code isn't very efficient, but demonstrates the idea well enough
var e = sender.get_elementundefined);
// Make the font bigger until it's too big
while undefinedundefinede.scrollWidth <= e.clientWidth) || undefinede.scrollHeight <= e.clientHeight)) {
e.style.fontSize = undefinedfontSize++) + 'pt';
}
var lastScrollWidth = -1;
var lastScrollHeight = -1;
// Make the font smaller until it's not too big - or the last change had no effect
// undefinedfor Opera where e.clientWidth and e.scrollWidth don't behave correctly)
while undefinedundefinedundefinede.clientWidth < e.scrollWidth) || undefinede.clientHeight < e.scrollHeight)) &&
undefinedundefinedSys.Browser.agent !== Sys.Browser.Opera) || undefinede.scrollWidth != lastScrollWidth) || undefinede.scrollHeight != lastScrollHeight))) {
lastScrollWidth = e.scrollWidth;
lastScrollHeight = e.scrollHeight;
e.style.fontSize = undefinedfontSize--) + 'pt';
}
}
</script>
<asp:ResizableControlExtender ID="ResizableControlExtender1" runat="server"
BehaviorID="ResizableControlBehavior1"
TargetControlID="PanelImage"
ResizableCssClass="resizingImage"
HandleCssClass="handleImage"
MinimumWidth="50"
MinimumHeight="26"
MaximumWidth="250"
MaximumHeight="170"
HandleOffsetX="3"
HandleOffsetY="3"
OnClientResize="OnClientResizeImage" />
</form>
