Best way to Arrange Controls in FlowlayoutPanel

Question

Hi... Just want to know what would be the best way to arrange controls in my FlowLayoutPanel using my mouse.

For example in my flowlayoutpanel.. I have button1 and button2, I can arrange them according to my wanting..

Answer 1

Hi GodspeedSupreme,

You can use Drag-and-Drop functionality in your FlowLayoutPanel (set AllowDrop to True), in Drag Events:

Private Sub FlowLayoutPanel1_DragEnter(ByVal sender As Object, ByVal e As System.Windows.Forms.DragEventArgs) Handles FlowLayoutPanel1.DragEnter
        If e.AllowedEffect = DragDropEffects.Move AndAlso e.Data.GetDataPresent(dragtype) Then
            e.Effect = DragDropEffects.Move
        End If
End Sub

Private Sub FlowLayoutPanel1_DragDrop(ByVal sender As Object, ByVal e As System.Windows.Forms.DragEventArgs) Handles FlowLayoutPanel1.DragDrop
        Dim source As Control = CType(e.Data.GetData(dragtype), Control)
        Dim target As Control = Me.FlowLayoutPanel1.GetChildAtPoint(Me.FlowLayoutPanel1.PointToClient(New Point(e.X, e.Y)))
        If target IsNot Nothing Then
            Dim ix As Integer = Me.FlowLayoutPanel1.Controls.GetChildIndex(target)
            Me.FlowLayoutPanel1.Controls.SetChildIndex(source, ix)
        End If
End Sub

GiveFeedback:

Private Sub FlowLayoutPanel1_GiveFeedback(ByVal sender As Object, ByVal e As System.Windows.Forms.GiveFeedbackEventArgs) Handles FlowLayoutPanel1.GiveFeedback
        e.UseDefaultCursors = False
        Cursor.Current = Me.dragcursor
End Sub

In FlowLayoutPanel, all controls must be added MouseDown handler:

Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
        For Each child As Control In Me.FlowLayoutPanel1.Controls
            AddHandler child.MouseDown, AddressOf childs_MouseDown
        Next
End Sub

Private Sub childs_MouseDown(ByVal sender As System.Object, ByVal e As System.Windows.Forms.MouseEventArgs)
        If Me.ReorderCheckBox.Checked Then
            Dim source As Control = CType(sender, Control)
            Using bmp As New Bitmap(source.Width, source.Height)
                source.DrawToBitmap(bmp, New Rectangle(Point.Empty, source.Size))
                Me.dragcursor = New Cursor(bmp.GetHicon)
            End Using
            Me.dragtype = source.GetType
            Me.FlowLayoutPanel1.DoDragDrop(source, DragDropEffects.Move)
            Me.dragcursor.Dispose()
        End If
End Sub

Screenshot:

I've uploaded my sample project to SkyDrive:)
http://sdrv.ms/196lL8M

Please check the following references:

#Walkthrough: Performing a Drag-and-Drop Operation in Windows Forms
http://msdn.microsoft.com/en-us/library/za0zx9y0.aspx

#Drag-and-Drop Functionality in Windows Forms
http://msdn.microsoft.com/en-us/library/ms171546.aspx

---

Franklin Chen
MSDN Community Support | Feedback to us
Develop and promote your apps in Windows Store
Please remember to mark the replies as answers if they help and unmark them if they provide no help.

Answer 2

Hi GodspeedSupreme,

You can use Drag-and-Drop functionality in your FlowLayoutPanel (set AllowDrop to True), in Drag Events:

Private Sub FlowLayoutPanel1_DragEnter(ByVal sender As Object, ByVal e As System.Windows.Forms.DragEventArgs) Handles FlowLayoutPanel1.DragEnter
        If e.AllowedEffect = DragDropEffects.Move AndAlso e.Data.GetDataPresent(dragtype) Then
            e.Effect = DragDropEffects.Move
        End If
End Sub

Private Sub FlowLayoutPanel1_DragDrop(ByVal sender As Object, ByVal e As System.Windows.Forms.DragEventArgs) Handles FlowLayoutPanel1.DragDrop
        Dim source As Control = CType(e.Data.GetData(dragtype), Control)
        Dim target As Control = Me.FlowLayoutPanel1.GetChildAtPoint(Me.FlowLayoutPanel1.PointToClient(New Point(e.X, e.Y)))
        If target IsNot Nothing Then
            Dim ix As Integer = Me.FlowLayoutPanel1.Controls.GetChildIndex(target)
            Me.FlowLayoutPanel1.Controls.SetChildIndex(source, ix)
        End If
End Sub

GiveFeedback:

Private Sub FlowLayoutPanel1_GiveFeedback(ByVal sender As Object, ByVal e As System.Windows.Forms.GiveFeedbackEventArgs) Handles FlowLayoutPanel1.GiveFeedback
        e.UseDefaultCursors = False
        Cursor.Current = Me.dragcursor
End Sub

In FlowLayoutPanel, all controls must be added MouseDown handler:

Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
        For Each child As Control In Me.FlowLayoutPanel1.Controls
            AddHandler child.MouseDown, AddressOf childs_MouseDown
        Next
End Sub

Private Sub childs_MouseDown(ByVal sender As System.Object, ByVal e As System.Windows.Forms.MouseEventArgs)
        If Me.ReorderCheckBox.Checked Then
            Dim source As Control = CType(sender, Control)
            Using bmp As New Bitmap(source.Width, source.Height)
                source.DrawToBitmap(bmp, New Rectangle(Point.Empty, source.Size))
                Me.dragcursor = New Cursor(bmp.GetHicon)
            End Using
            Me.dragtype = source.GetType
            Me.FlowLayoutPanel1.DoDragDrop(source, DragDropEffects.Move)
            Me.dragcursor.Dispose()
        End If
End Sub

Screenshot:

I've uploaded my sample project to SkyDrive:)
http://sdrv.ms/196lL8M

Please check the following references:

#Walkthrough: Performing a Drag-and-Drop Operation in Windows Forms
http://msdn.microsoft.com/en-us/library/za0zx9y0.aspx

#Drag-and-Drop Functionality in Windows Forms
http://msdn.microsoft.com/en-us/library/ms171546.aspx

---

Franklin Chen
MSDN Community Support | Feedback to us
Develop and promote your apps in Windows Store
Please remember to mark the replies as answers if they help and unmark them if they provide no help.

Thank you for your assistance and time :)

Followup Question.. is this applicable in UserControl? I mean.. instead of buttons a Controls, Im using a UserControl that I created as a Child.