I have a group of components on the left side of a window. I would like to re-size the width of the entire group by clicking the edge of a component and moving it back and forth. I’m unable to find anything in the library that would do this. Any ideas?
Select them with your mouse and then resize using one of the handles displayed doesn’t work?
How do i resize all of them at once?
uhhh… My fault. I need to be more specific. At ‘run time’. I’ve already placed a group of components on the left side of the window, and I want to let the user re-size all the components at the same time.
Ah, I see. Well, I see two approaches.
-
Have a look at some existing splitter controls for RealStudio (ARBP is a good source) and how they handle it. What they usually do: when dragging a “splitter” control from the left to the right, they iterate through all controls on the window and identify the ones that are on the left. They then get resized proportionally.
-
on the window’s mouse down create a new canvas that mimics a selection rectangle, give it some resize handles and handle the resizing accordingly.
hmmm… that’s not what I had in mind. I’ve seen in many applications where the cursor changes when hovering over the edge of a group and indicates that it can be re-sized. All I can think of right now as an example is Adobe Light Room.
Can you provide an example pic?
The Xojo IDE. The ability to re-size the Library components on the right side of the screen.
That’s a splitter control basically… See:
http://forums.realsoftware.com/viewtopic.php?f=1&t=46267&hilit=splitter
That doesn’t seem to meet my needs. Thanks for trying to help Alex.
You determine when your cursor is over the “resize handle/edge” and change the cursor to indicate it can resize your group. You then track the x or y delta depending on direction and adjust your grouped controls accordingly.
You will also have to determine any restraints such as min/max width/height.
Look at the CanvasDrawDrag example in the graphics and multimedia examples folder. It is the same idea as presented here only instead of moving the objects you are resizing them. The example is good for seeing where in the event structure to put your code.
Thank you Peter.
Peter, are you sure the CanvasDrawDrag example is the one you meant? I don’t see any re-size in there.
There is no resize but the idea is the same. In the drag example the object is moved based on the mouse movement. For a resize you have to determine the delta between X and LastX or Y and LastY and then resize your object (and sub objects if applicable) accordingly.
I’ll try and dig up some example code.
Thanks. I need to determine when the cursor is over a component.
This is a stripped down example which is used to resize the height of a rectangular object. The MouseDown and MouseDrag code is from a custom canvas subclass (Workspace). DragType, LastX and LastY are properties of Workspace.
The Resize method is from a custom class which represents a database table. The Workspace has an array of tables.
The Workspace MouseMove event determines if the cursor is over the bottom of a table instance (resize area). If so, it sets the Workspace property DragType to “Resizing”. The table objects have Top, Left, Width, Height properties so the cursor position can be determined from them. “OverTable” (in Resize method) is a reference to the table being resized.
[code]Function MouseDown(X As Integer, Y As Integer) As Boolean
LastX = X
LastY = Y
if DragType = “Resizing” then
Return true
end if
End if
End Function[/code]
[code]Sub MouseDrag(X As Integer, Y As Integer)
If X = LastX and Y = LastY then return
’ calculate movement
Dim offsetX, offsetY As Integer
offsetX = abs(X - LastX)
offsetY = abs(Y - LastY)
if Y < LastY then
offsetY = offsetY * -1
end if
if X < LastX then
offsetX = offsetX * -1
end if
if DragType = “Resizing” then
OverTable.Resize(offsetY, me.Height - OverTable.top)
end if
’
’ update coordinates
LastX = X
LastY = Y
me.Invalidate(false)
End Sub[/code]
[code]Sub Resize(offset As Integer, maxHeight As Integer)
Dim minHeight As Integer
minHeight = max(75, ((linked.Ubound + 1) * 20) + 55)
maxHeight = min((Fields.Ubound + 1) * 20 + 25, maxHeight)
if Height + offset <= maxHeight and Height + offset >= minHeight then
Height = Height + offset
end if
End Sub[/code]
Hopefully this is enough to get you going. Once you add multiple object selection, constraints on vertical/horizontal movement/sizing, maximum movement boundaries (workspace borders), etc. it gets more complicated but all can be broken down pretty easily.
For your case, if you have a group object you just resize it as well as all it’s sub objects.
Terrific! Thank you.
Peter, I can’t find a ‘MouseOver’ (or something similar) event that will let me know when the mouse is over the component.
You should only get MouseMove events when the mouse is over the object.
You can also check MouseEnter and MouseLeave events.