Creating/Moving/Sizing Controls at Runtime

• Download source code - 3.6 KB

Introduction

Recently, looking for a VB.NET Form Creator, I found a professional control for ~$140 that added resize handles to controls on a form. So I decided to see whether I could duplicate the functionality without spending that much money. Also, I was looking for a way to add unlimited controls to the form that also had event handlers. The resultant combination is here for you to see.

Using the code

In the code, I have defined five labels (H_Top_Right, H_Top_Left, H_Bottom_Left, H_Bottom_Right, Mover) that act as the handles. The Drag1-Drag4 and isMoving variables keep track of whether the particular handle is in drag mode or not. This variable is set to 'True' on mouseDown and 'False' on mouseUp. The SelControl variable keeps track of the currently focused control. The SetActive() method is used to set the focused control.

The five handles change the SelControl's left, top, height, and width properties accordingly:

Private Sub H_Top_Left_Click (ByVal sender As System.Object, _
          ByVal e As System.Windows.Forms.MouseEventArgs) _
          Handles H_Top_Left.MouseMove
    If Not Drag1 then Exit Sub
    Me.H_Top_Left.Left += e.X
    Me.H_Top_Left.Top += e.Y
    SelControl.Width += -(e.X)
    SelControl.Height += -(e.Y)
    SelControl.Top = H_Top_Left.Top + 4
    SelControl.Left = H_Top_Left.Left + 4
    SetActive(SelControl)
End Sub

Private Sub H_Top_Right_Click (ByVal sender As System.Object, _
        ByVal e As System.Windows.Forms.MouseEventArgs) _
        Handles H_Top_Right.MouseMove
    If Not Drag2 then Exit Sub
    Me.H_Top_Right.Left += e.X
    Me.H_Top_Right.Top += e.Y
    SelControl.Width += e.X
    SelControl.Height += -(e.Y)
    SelControl.Top = H_Top_Right.Top + 4
    SetActive(SelControl)
End Sub

Private Sub H_Bottom_Right_Click (ByVal sender As System.Object, _
        ByVal e As System.Windows.Forms.MouseEventArgs) _
        Handles H_Bottom_Right.MouseMove
    If Not Drag3 then Exit Sub
    Me.H_Bottom_Right.Left += e.X
    Me.H_Bottom_Right.Top += e.Y
    SelControl.Width += e.X
    SelControl.Height += e.Y
    SetActive(SelControl)
End Sub

Private Sub H_Bottom_Left_Click (ByVal sender As System.Object, _
        ByVal e As System.Windows.Forms.MouseEventArgs) _
        Handles H_Bottom_Left.MouseMove
    If Not Drag4 then Exit Sub
    Me.H_Bottom_Left.Left += e.X
    Me.H_Bottom_Left.Top += e.Y
    SelControl.Width += -(e.X)
    SelControl.Height += e.Y
    SelControl.Left = H_Bottom_Left.Left + 4
    SetActive(SelControl)
End Sub

Private Sub Mover_Click (ByVal sender As System.Object, _
        ByVal e As System.Windows.Forms.MouseEventArgs) _
        Handles Mover.MouseMove
    If Not isMoving then Exit Sub
    Me.Mover.Left += e.X
    Me.Mover.Top += e.Y
    SelControl.Top = ((Me.Mover.Top + 4) * 2 - SelControl.Height) /2
    SelControl.Left = ((Me.Mover.Left + 4) * 2 - SelControl.Width) /2
    SetActive(SelControl)
End Sub

Here the position of all five handles is calculated according to the current position of the control.

The SetActive() method sets SelControl = the receiving button, and positions the handles accordingly.

Private Sub SetActive (ByVal button as System.Object)

    SelControl = button

    Me.H_Top_Left.Left = button.Left - 4
    Me.H_Top_Left.Top = button.Top - 4

    Me.H_Top_Right.Left = button.Left + button.Width
    Me.H_Top_Right.Top = button.Top - 4

    Me.H_Bottom_Right.Left = button.Left + button.Width
    Me.H_Bottom_Right.Top = button.Top + button.Height 

    Me.H_Bottom_Left.Left = button.Left - 4
    Me.H_Bottom_Left.Top = button.Top + button.Height 

    Me.Mover.Left = (button.Left + button.Left + Button.Width) /2 - 4
    Me.Mover.Top = (Button.Top + Button.Top + Button.Height) /2 - 4

End Sub

Bugs

Yep! Every code has its bugs! Since this is my first attempt at any such thing, I was bound to make a few slips. To list them:

• The Move method has not yet been implemented, i.e., you cannot drag buttons like in VS. You can only move them using the handlers.

Updated: You can now move the control using the white square in the centre of the control.

• The top left handler, if dragged below the bottom of the button or to the right of the button, moves the entire button. This means that the button moves with 0 height/width and moves to the current mouse position. Irritating.

I'll try to wrinkle out those bugs in time. Suggestions and tips are welcome.

I'll also try to add a few more control types (e.g., ComboBox, CheckBox, RadioButton etc.) for the demo.