ResizableControl

Descripción

El ResizableControl extiende cualquier control Web (por ejemplo un Panel o una imagen) confiriéndole la propiedad de redimensionamiento. Podemos, por ejemplo, coger un Panel con texto y redimensionarlo a nuestro gusto sin más que cogerlo con el ratón.

Además, añade multitud de funcionalidades, como lanzamiento de eventos “onresizing” y “onresize” con los que podemos crear lógica compleja. Su estado se mantiene durante los postbacks y sus dimensiones se pueden acceder desde cliente (javascript) y desde servidor (ASP.NET). También podemos limitar su anchura y altura máximas.

Propiedades

• TargetControlID: ID del control Web que vamos a poder redimensionar.
• HandleCssClass: clase CSS de elemento que debemos coger para redimensionar.
• ResizableCssClass: clase CSS que se aplicará cuando estemos redimensionando.
• MinimumWidth/MinimumHeight: anchura/altura mínimas.
• MaximumWidth/MaximumHeight: anchura/altura máximas.
• OnClientResize: evento que se lanzará cuando el elemento haya sido redimensionado
• OnClientResizing: evento que se lanzará cuando el elemento esté siendo redimensionado.
• HandleOffsetX/HandleOffsetY: offsets a aplicar sobre el elemento redimensionador.

Ejemplo

<style>
.handleText
{
width:16px;
height:16px;
background-image:url(images/HandleGrip.png);
overflow:hidden;
cursor:se-resize;
}
</style>

<asp:Panel ID="Panel1" runat="server" Height="50px" Width="125px">
Elemento que se va a redimensionar
</asp:Panel>

<ajaxToolkit:ResizableControlExtender ID="ResizableControlExtender1" runat="server"
MinimumWidth="50"
MinimumHeight="20"
MaximumWidth="250"
MaximumHeight="125"
HandleCssClass="handleText"
TargetControlID="Panel1">
</ajaxToolkit:ResizableControlExtender>