Reordering of controls within a flow layout panel

Question

I'm having trouble using the flowlayoutPanel in a C# winform application. What I basically have is a flow layout panel that has 3 sections.

Section #1 is a set of 2 controls .. two dropdown controls, they are always in the same order, always visible in all instances

Section #2 is a set of 5 different controls ... based on a series of factors, 1 of the 5 controls is made visible, all others have the Visible propert set to false

Section #3 is a set of 3 controls .. like Section #1 they are always in the same order and always visible.

So what this boils down to is that Section #2 is variable, the others are static.

The problem comes with Section #2 ... when I change the visibility of any of the controls they appear just fine (I.E. ... Section 1 then Section 2 then Section 3) ... EXCEPT when I set the combobox control to be Visible .... in that case, and ONLY in that case .. the order becomes (Section 1 then Section 3 then Section 2) ... I can't figure out what would cause the ordering to be out of sync in just that case.

What I basically do at the beginning of my method is set ALL controls to Visible = false ... then I set Section 1 Visible = true ... then loop through the conditions of Section 2 and set the appropriate controls Visible = true and finally set Section 3 controls Visible = true.

Does anyone have any experience with the flow layout panel control ordering? I can't figure out what is happening for the ComboBox.

Calva

Answer 1

Might it be easier to drop another flowlayoutpanel in for section 2, then drop your section 2 controls into that? That way, the visible controls in your top panel never change and you won't have to worry about ordering.

Whitaker

Answer 2

Inside FlowLayoutPanel.Controls is a method function called SetChildIndex(Control c, int index) which allows you to set an object to a specific index.

Since FlowLayoutPanel uses control's indices to determine which order to draw them in, you can set this to whichever control's index you are wanting to swap with, and it will bump that controls index up by one, and every one after that.

Here is snippet from my blog of reordering PictureBoxes in a FlowLayoutPanel.

Add a FlowLayoutPanel on a WinForm named flowLayoutPanel1:

public partial class TestForm: Form
{
   public TestForm()
    {
        InitializeComponent();
        this.flowLayoutPanel1.AllowDrop = true
    }

    private void AddImageToBlog(System.Drawing.Image image)
    {
        PictureBox pbox = new PictureBox();
        pbox.SizeMode = PictureBoxSizeMode.Zoom;            
        pbox.Height = (_picturebox_height * _ScaleFactor);
        pbox.Width = (_picturebox_width * _ScaleFactor);
        pbox.Visible = true;
        pbox.Image = image;

        pbox.MouseDown += new MouseEventHandler(pbox_MouseDown);
        pbox.DragOver += new DragEventHandler(pbox_DragOver);            
        pbox.AllowDrop = true;
        flpNewBlog.Controls.Add(pbox);
    }

    void pbox_DragOver(object sender, DragEventArgs e)
    {
        base.OnDragOver(e);
        // is another dragable
        if (e.Data.GetData(typeof(PictureBox)) != null)
        {
            FlowLayoutPanel p = (FlowLayoutPanel)(sender as PictureBox).Parent;                 
            //Current Position             
            int myIndex = p.Controls.GetChildIndex((sender as PictureBox));

            //Dragged to control to location of next picturebox
            PictureBox q = (PictureBox) e.Data.GetData(typeof(PictureBox));                
            p.Controls.SetChildIndex(q, myIndex);
        }           
    }

    void pbox_MouseDown(object sender, MouseEventArgs e)
    {
        base.OnMouseDown(e);
        DoDragDrop(sender, DragDropEffects.All);
    }
}

Timothee

Answer 3

You can reorder controls on flowpanel, changing parent property of controls and reassigning parent property with the order that you need.

Prolongation

Answer 4

Try this generic solution where you can sort you controls according to a property in the user control.

// When adding and removing controls, the order is not kept.
var runsOrderedByStartDate = this.nodesFlowLayoutPanel.Controls.Cast<RunNodeControl>().Select(_ => new { StartDate = _.StartDateTime, RunControl = _ }).OrderBy(_ => _.StartDate).ToList();

// Sets index of controls according to their index in the ordered collection
foreach (var anonKeyValue in runsOrderedByStartDate)
{
    this.nodesFlowLayoutPanel.Controls.SetChildIndex(anonKeyValue.RunControl, runsOrderedByStartDate.IndexOf(anonKeyValue));
}

Sideburns

Answer 5

SetChildIndex does not reset the order of the controls in the flowlayout panel. So when we perform FlowLayoutPanel.GetNextControl(q, true) the output is not correct.

Majordomo

You need to also change the TabOrder. You can set this when the index changes as well. – Lanilaniard

Answer 6

For basic control ordering, the simplest way to control the order of controls in the flowlayoutPanel is to set the flowlayoutPanel TabStop property to true. Set the controls tabstop property to True and set the tab order to the order in which you want the controls to appear.

Vogler