[RESOLVED] Drawing gray rectangle instead of actually resizing

[eyeRmonkey]

Is there a way to create the effect that I have seen many programs do invloving a gray rectangle? When you drag the corner/side of something to resize it, you see a gray outline of where it WOULD be resized to if you left go of the mouse button.

The reason I ask is because I have an MDI form with a control aligned to one side that I want to make resizable. I added a very narrow picture box aligned to the same side the creates the effect of a re-size bar. The problem is the form flickers a lot when I resize it. I was wondering if there was a way to draw this rectangle ontop of all other windows to show where the control would be resized to if you left go of the mouse button. Any ideas?

[RhinoBull]

See if this sample works for you - it draws a rectangle when mouse is down on the form:

Option Explicit
 
Private Type tRect
    sLeft As Single
    sTop As Single
    sRight As Single
    sBottom As Single
End Type
Private tRect As tRect
 
Private bDragging As Boolean
 
Private Sub Form_MouseDown(Button As Integer, Shift As Integer, X As Single, Y As Single)
    bDragging = True
    Me.Cls
    Me.DrawMode = vbInvert
    With tRect
        .sLeft = X
        .sTop = Y
        .sRight = X
        .sBottom = Y
    End With
End Sub
 
Private Sub Form_MouseMove(Button As Integer, Shift As Integer, X As Single, Y As Single)
    If Not bDragging Then Exit Sub
    With tRect
        Me.Line (.sLeft, .sTop)-(.sRight, .sBottom), , B
        .sRight = X
        .sBottom = Y
        Me.Line (.sLeft, .sTop)-(X, Y), , B
    End With
End Sub
 
Private Sub Form_MouseUp(Button As Integer, Shift As Integer, X As Single, Y As Single)
    bDragging = False
    Me.Line (tRect.sLeft, tRect.sTop)-(tRect.sRight, tRect.sBottom), , B
    Me.DrawMode = vbCopyPen
    Me.Cls
End Sub

[eyeRmonkey]

That won't work quite right because I the control is aligned on an MDI form. I need the rectangle to be able to be ontop of any MDI windows (which would mean it can't be drawn ontop of the form). Here is a screen shot...

[RhinoBull]

Sorry, ERM but I don't quite understand you (even with your image).

[eyeRmonkey]

My bad. I had a feeling that would happen.

"Right-aligned contorl on MDI parent": It is an MDI form that I am deeling with. For MDI forms you can only put controls directly on the form that are alignable. We are clear on this point, right?

"Resize bar": Okay, I wanted to give the IMPRESSION that that control was resizable, so I added a narrow picture box (30 twips wide) that gives you the W E arrow pointer that makes you think you can resize something if you click and drag.

"MDI Child window": The white area to the left is a maximized MDI child window.

Now, if I use the code you posted, it wouldn't work, because I need the rectangle to be ontop of ALL OF THAT so that you know where you are resizing to without acutally doing the resize before hand.

I am probably asking too much, but I thought it might not be too hard. Here is another screenshot of the desired effect.

[RhinoBull]

Oh, so you need to mimic MDI splitter. Now we talking...
Here is nice little sample created by Edward Blake from www.cyanwerks.com (see attachments).

And here is another one (not mdi though but also nice): Form Splitter .

[eyeRmonkey]

Thanks RB. That is really close to what I am looking for, but not quite. I am guessing it isn't really possible to draw a line ontop of all the windows, otherwise the attachemnt project you posted would have done it that way. I might use that though. Great example. Thanks!

[RhinoBull]

No problem.

[Joacim Andersson]

I am guessing it isn't really possible to draw a line ontop of all the windows, otherwise the attachemnt project you posted would have done it that way.

Oh, it's fully possible to draw lines above all other windows by getting a device context of the desktop. I do that in my Windows Finder Tool (available in the CodeBank). But before you go and look at that I quickly wrote a little class module for you that you might find helpful. It's not 100% perfect since it will draw the line even when you drag it outside of the MDI window but you should be able to adjust that with a little more code.

This is how you use the class:

Private WithEvents oSplitter As CSplitter
 
Private Sub MDIForm_Load()
    Set oSplitter = New CSplitter
    Call oSplitter.Init(picSplitter)
End Sub
 
Private Sub MDIForm_Unload(Cancel As Integer)
    oSplitter.Destroy
    Set oSplitter = Nothing
End Sub
 
Private Sub oSplitter_Dropped(ByVal AdjustLeft As Long)
    Debug.Print AdjustLeft
End Sub

As you can see you must call the Init method and pass the PictureBox you use as the splitter as an argument. The class will then handle everything when you start dragging the picture box and it will raise the Dropped event when you stop dragging. The Dropped event has one argument called AdjustLeft which is how many pixels (you might need to recalculate that to Twips) away from the origional position you made the drop. This could be a negative value if you drag to the left.

Before you close the Form you should call the Destroy method to be 100% safe.

Edit: Here's a screen shot of how it could look:

[moeur]

One idea I had is that you can add a usercontrol to your project. Set the background to transparent and use it as a sizing box. Here is an example of sizing a picturebox
put a picturebox and usercontrol on your form. Name the usercontrol dragbox and bring it to the front

Option Explicit
Private Declare Function SetCapture Lib "user32" (ByVal hwnd As Long) As Long
 
Private isCaptured As Boolean
 
Private xBorderWidth As Long
Private yBorderWidth As Long
Private OnTheBorder As Boolean
 
Private myX As Long
Private myY As Long
Private myWidth As Long
Private myHeight As Long
Private myLeft As Long
Private myTop As Long
 
 
Private onLeft As Boolean
Private onRight As Boolean
Private onTop As Boolean
Private onBottom As Boolean
 
Private Sub Form_Load()
    DragBox.Visible = False
    'get borderwidths
    xBorderWidth = (Picture1.Width - Picture1.ScaleWidth)
    yBorderWidth = (Picture1.Height - Picture1.ScaleHeight)
End Sub
 
Private Sub Picture1_MouseDown(Button As Integer, Shift As Integer, x As Single, y As Single)
    If Button = 1 And OnTheBorder Then
        isCaptured = True
        With Picture1
            SetCapture .hwnd
            Debug.Print "Captured"
            DragBox.Move .Left, .Top, .Width, .Height
            .Visible = False
            myWidth = .Width
            myHeight = .Height
            myLeft = .Left
            myTop = .Top
        End With
        DragBox.Visible = True
        myX = x
        myY = y
    End If
    
End Sub
 
Private Sub Picture1_MouseMove(Button As Integer, Shift As Integer, x As Single, y As Single)
  If isCaptured Then
    If onTop Then
        DragBox.Top = myTop + y - myY
        DragBox.Height = myHeight - (y - myY)
    End If
    
    If onBottom Then DragBox.Height = myHeight + y - myY
    
    If onLeft Then
        DragBox.Left = myLeft + (x - myX)
        DragBox.Width = myWidth - (x - myX)
    End If
    
    If onRight Then DragBox.Width = myWidth + x - myX
    
  Else
    onTop = False
    onBottom = False
    onLeft = False
    onRight = False
    OnTheBorder = True
    'find out where mouse pointer is
    If x <= xBorderWidth Then onLeft = True
    If y <= yBorderWidth Then onTop = True
    If Picture1.Height - y <= 3 * yBorderWidth Then onBottom = True
    If Picture1.Width - x <= 3 * xBorderWidth Then onRight = True
    
    If onLeft And onTop Then
        Picture1.MousePointer = vbSizeNWSE
    ElseIf onLeft And onBottom Then
        Picture1.MousePointer = vbSizeNESW
    ElseIf onRight And onTop Then
        Picture1.MousePointer = vbSizeNESW
    ElseIf onRight And onBottom Then
        Picture1.MousePointer = vbSizeNWSE
    ElseIf onTop Then
        Picture1.MousePointer = vbSizeNS
    ElseIf onBottom Then
        Picture1.MousePointer = vbSizeNS
    ElseIf onLeft Then
        Picture1.MousePointer = vbSizeWE
    ElseIf onRight Then
        Picture1.MousePointer = vbSizeWE
    Else
        Picture1.MousePointer = vbDefault
        OnTheBorder = False
    End If
 End If
End Sub
 
Private Sub Picture1_MouseUp(Button As Integer, Shift As Integer, x As Single, y As Single)
    If isCaptured Then
        With DragBox
            Picture1.Move .Left, .Top, .Width, .Height
            .Visible = False
        End With
        Picture1.Visible = True
        isCaptured = False
        OnTheBorder = False
    End If
    
End Sub

[Joacim Andersson]

OK. I've added a Boundaries method which sets how long you can drag the splitter. I also added a StartDragging event in which you can Cancel the dragging if you like, but this is also a good place to set the boundaries.

Private Sub oSplitter_StartDragging(Cancel As Boolean)
    'You could set the Cancel argument to True if you do not
    'want to allow the resizing.
    Call oSplitter.SetBoundaries(MDIForm1.hWnd, 50)
End Sub

The above will set the boundaries to an offset of 50 pixels from the left and right borders of the MDIForm (a pretty good value, but try it out).

I've updated my previous post with the updated class module.

[Joacim Andersson]

@Moeur: But will that draw the drag rectangle above child windows as in this screen shot?

[moeur]

maybe I don't understand what the monkey is looking for. I was trying to build something like the picture in post #5. I'm not too familiar with MDI forms, so maybe you are saying that there is no way I can put the control on the MIDI form properly?

[moeur]

Ah yes...
It appears that you cannot place a usercontrol onto a MDI form.

[Joacim Andersson]

I made another slight change to my class module for the line to look a bit better.

[RhinoBull]

That's nice Joacim (it really is ) but somewhat close to that project I've posted but I think eye wants to draw (or mimic if you will) entire rectangle and not single "vertical line" so I'm thinking that multiple pic boxes will do it but it also might create some overhead. What do you think?

[Joacim Andersson]

I never looked at the project you posted. However drawing a full rectangle is not a problem you just have to draw the other 3 lines. The class of course needs to know where the "anchor" is, the upper left corner or the upper right corner of the rectangle depending on if your window is attached to the left or right hand side of the MDI Form.

[Joacim Andersson]

OK, let's call this the final update... See the attached demo project on how to use the class (I've also added a Color property so you can change the color of the dragging rectangle). The rectangle is optional, and you can still use it with just a line as previous posts show.

[eyeRmonkey]

WOW! JA, thats awesome! Thanks a ton. I am not at home right now but I wll definitely take a look at that. You should post that in the code bank. Maybe we can work together to have it offer all the proper options (like offering an option for just vertical OR anchored) and then you can post it in the code bank. I bet it would get a lot of downloads.

[Joacim Andersson]

As I said, the "anchored" version is optional. If you don't supply an anchor window only the vertical line will be drawn.

[eyeRmonkey]

I hate being a perfectionist, but if this wouldn't be too much work it would be awesome if you could get the line to look like this (a pattern instead of a solid color):

[Joacim Andersson]

Oh dear... There is just no way of pleasing some people

OK, attached is another version of the class (and a demo project). The demo now shows everything the class can do and you can change the styles of the class using the menu items. You can now either use a (changeble) color or you can use the pattern style, this code now shows how to draw a dotted line (or a line of any pattern).

Even though the demo is entitled MDISplitter, the class can just as well be used with regular Forms. However as it is designed (now) it is only a vertical splitter not a horizontal.

[Bruce Fox]

Nice work Joacim

(still can't rate you at this time)

[dglienna]

Got you covered

[eyeRmonkey]

Beautiful wonderful awesome work JA!

I'm working on adding the following:
* Horizontal support
* A focus on a more specific situation (MDI windows and aligned controls on them) instead of a general spliter
* More ease of use and less code needed outside the class.

Thanks again.

[Joacim Andersson]

Yes, feel free to extend it to your needs (that's what it's for). Personally I will not add any new features to this at the moment since I wrote it as a reply to this thread but I don't need it myself at the moment. However I will post this as it is in the code bank.

[eyeRmonkey]

I stayed up way too late last night working on it. I merged your most recent version withe changes I made and I will post it later today (I am at school right now).

Changes I changed/added:
* Added horizontal support
* Added properties (Full Box/Line, Enabled, Width)
* Geared the whole thing towards an MDI form that is using this on a class on an alignable control and a narrow picture box.
* Geared the picturebox towards being places on the MDI form instead of on the picture box.

Still working on:
* Making a Min and Max property that work properly.
* Getting the full box to be drawn horizontally (currently only draws the line)

[eyeRmonkey]

Okay here is my updated version with all the changes I mentioned in my last couple replies.

Now I am having some problems getting the full box to draw when it is aligned right top or bottom (left works fine). Joacim, I was wondering if you could skim through the code and fix the full box option for right, top and bottom. I would really appriciate it. Everything else works fine as far as I can tell excpet it could use some error checking here and there.

[eyeRmonkey]

And once again vbAcc comes to our rescue. I have been trying to put this whole thing into a control for a while, and little did I know it was already done for me (except not in a control...):

Splitting MDI forms:
http://www.vbaccelerator.com/home/VB...ms/article.asp

Splitting an SDI form:
http://www.vbaccelerator.com/home/VB...ay/article.asp

Drawing dotted lines:
http://www.vbaccelerator.com/home/VB...es/article.asp

If someone could help me throw the code from the second link into a control I would really appriciate it, but I will try to do it myself.

[Mark Gambo]

This post has probably been resolved but just in case someone is searching for a code to create a pane splitter, take a look at this code.

[eyeRmonkey]

Thanks Mark!

But the vbAccelerator code I posted in post #29 solved everything with great ease. vbAccelerator rocks. I use code from all over their site now. Its wonderful.