how to arrange controls in dock mode

Question

I have almost spent 2hrs doing trial and error on these controls. I need some help.
that is my GOAL.. to be able to dock all three of them to the right, X Y under that progressbar.. and the trackbar under X Y.. (I maximize my form so I need to dock it) unless you have some cool tricks that can automatically adapt..

X and Y are labels.. which I display my map coordinates.
then below them is a TrackBar inside a Panel..

Solutions tried - Result:

• dock them all right - X Panel Y / X Y Panel
• put the three to the panel and dock right - X Y Track which consumes too much width
• no panel, dock the three right - Track X Y
• dock X Y top - appeared on the top-left side with X below Y

I am not getting to what I want.. any ideas?

Answer 1

Add all controls to a FlowLayoutPanel.

Set the flow direction of the panel to "RightToLeft".

Me.FlowLayoutPanel1.FlowDirection = FlowDirection.RightToLeft 

In designer, select all controls contained in the panel and set the property "FlowBreak" to "True".

Alternative

You can also create your own flow panel.

Public Class MyFlowPanel
    Inherits Panel

    Protected Overrides Function CreateControlsInstance() As System.Windows.Forms.Control.ControlCollection
        Return New ControlCollection(Me)
    End Function

    Private Sub EnsureLayout(sender As Object, e As EventArgs)
        If (Not Me.isUpdatingLayout) Then
            Me.UpdateLayout()
        End If
    End Sub

    Private Sub NotifyControlIndexChanged(child As Control)
        'This will cause some selection issues in designer.
        'Implement a custom designer to fix this.
        Me.UpdateLayout()
    End Sub

    Protected Overrides Sub OnControlAdded(e As System.Windows.Forms.ControlEventArgs)
        AddHandler e.Control.SizeChanged, New EventHandler(AddressOf Me.EnsureLayout)
        AddHandler e.Control.LocationChanged, New EventHandler(AddressOf Me.EnsureLayout)
        AddHandler e.Control.Resize, New EventHandler(AddressOf Me.EnsureLayout)
        AddHandler e.Control.MarginChanged, New EventHandler(AddressOf Me.EnsureLayout)
        MyBase.OnControlAdded(e)
        Me.UpdateLayout()
    End Sub

    Protected Overrides Sub OnControlRemoved(e As System.Windows.Forms.ControlEventArgs)
        RemoveHandler e.Control.SizeChanged, New EventHandler(AddressOf Me.EnsureLayout)
        RemoveHandler e.Control.LocationChanged, New EventHandler(AddressOf Me.EnsureLayout)
        RemoveHandler e.Control.Resize, New EventHandler(AddressOf Me.EnsureLayout)
        RemoveHandler e.Control.MarginChanged, New EventHandler(AddressOf Me.EnsureLayout)
        MyBase.OnControlRemoved(e)
        Me.UpdateLayout()
    End Sub

    Protected Overrides Sub SetBoundsCore(x As Integer, y As Integer, width As Integer, height As Integer, specified As System.Windows.Forms.BoundsSpecified)
        MyBase.SetBoundsCore(x, y, width, height, specified)
        Me.UpdateLayout()
    End Sub

    Private Sub UpdateLayout()
        Me.isUpdatingLayout = True
        Dim top As Integer = Me.ClientRectangle.Top
        Dim right As Integer = Me.ClientRectangle.Right
        Dim c As Control
        For index = 0 To (Me.Controls.Count - 1)
            c = Me.Controls.Item(index)
            top += c.Margin.Top
            c.Location = New Point((right - (c.Width + c.Margin.Right)), top)
            top += (c.Height + c.Margin.Bottom)
        Next
        Me.isUpdatingLayout = False
    End Sub

    Private isUpdatingLayout As Boolean

    Public Shadows Class ControlCollection
        Inherits Panel.ControlCollection
        Public Sub New(owner As MyFlowPanel)
            MyBase.New(owner)
            Me.owner2 = owner
        End Sub
        Public Overrides Sub SetChildIndex(child As System.Windows.Forms.Control, newIndex As Integer)
            MyBase.SetChildIndex(child, newIndex)
            Me.owner2.NotifyControlIndexChanged(child)
        End Sub
        Private owner2 As MyFlowPanel
    End Class

End Class