Move & Resize
Allows the user to move and resize controls in the browser.
Last updated
Allows the user to move and resize controls in the browser.
Last updated
All Wisej controls support moving and resizing. ⭐ It's an amazing feature unique to Wisej.
Simply set the Movable property to true and users will be able to grab and drag the control within its parent. Enable the sides to resize using the ResizableEdges property and users will be able to grab and drag the resizable sides!
When a control is resized or moved, it will change the Size and Location properties on the server and fire the related events.
Resizable controls can resize in two modes: Live or Frame. By default all the resizable controls, including Forms, use a resize frame and then resize the actual control when the user releases the pointer.
Some controls expose the LiveResize property that lets you change the default behavior and update the control as the user resizes it:
Form. The window is resized immediately.
DataGridView. Columns are resized immediately.
ListView. Columns are resized immediately when Detail view.
When LiveResize is true, every movement of the mouse or the pointer or the touch causes a resize event and it can get heavy on the server.
You can enable the live resize mode on any resizable control that doesn't expose the LiveResize property by calling JavaScript in the control's InitScript property to set the "useResizeFrame" property to false:
It's a simple boolean property. Set it to true to make a control movable.
If you set the Movable property to false on a Form window then it will be displayed at the specified location and the user will not be able to move it.
The ResizableEdges property is a flags enumeration that takes the AnchorStyles values. You can enable any of the four sides of a control to be resizable, or any combination of the sides.
Combining the ResizableEdges, Dock, and Anchor properties is an easy and flexible way to create a splitter system without adding split containers or other controls.
Just putting together a Button with ResizableEdges=Right and Dock=Left, a TreeView with Dock=Fill, and a DataGridView with ResizableEdges=Bottom and Dock=Top, inside a Panel creates a flexible composite control.
When using the Movable or ResizableEdges properties to allow the user to move or resize a widget on the client, you can use the StartMove, EndMove, StartResize and EndResize events to detect when the user starts and ends the moving or resizing operation.
The Location and Size properties of the control will not change while the user is dragging or resizing the control on the browser.
Wisej provides advanced states and events that allow your application to style a control when it's being moved or resized and to detect when the moving or resizing operations start and end.
When moving, it adds the state "move".
When resizing, adds the state "resize".
When moving starts, fires the event "startmove".
When moving ends, fires the event "endmove".
When resizing starts, fires the event "startresize".
When resizing ends, fires the event "endresize".
These states are not defined in the built-in theme, but you can use them in your theme or in a mixin.
For example, adding a mixin that extends the "tree" appearance like this:
Results in the TreeView control showing the new styled border when it's being moved by the user.
