Winforms: FlowLayoutPanel with Docking

Question

This is in winforms. I am creating a User control that is basically a FlowlayoutControl filled with other User Controls. I need each of the controls added to be docked to the top of the previous (from left to right). Unfortunately it looks like the flowlayoutcontrol ignores any of the docking properties. Is there any way to dock the controls inside there? I need it to fill the item from left to right, but the items should be laid out like a list view. Theres really no code i can provide due to the fact that its a matter of figuring out what approach to take.

Solution 1

FlowLayoutPanel.FlowDirection Property indicates the flow direction of the FlowLayoutPanel control.

FlowLayoutPanel.WrapContents Property indicates whether the FlowLayoutPanel control should wrap its contents or let the contents be clipped.

Solution 2

Getting the FlowLayoutPanel to dock right is tricky. From the original question, you want something like a list view. It's important to know that ONE of the items in your list (the widest one) defines a "virtual column" in the FlowLayoutPanel. The rest of the items will follow it. You can prove this in the VS designer by dragging one of the items to the right. The 'virtual column' will follow it, and if your other items are anchored they will follow the virtual column.

Note that you can't anchor the control that is defining the column. It has nothing to anchor to and strange things will happen.

Do do all this programatically, handle the Layout event on your FlowLayoutPanel and put code similar to the code below. It's important that in the designer all the items in your list are not docked and and have their anchoring set to 'none'. I spent a day on this yesterday and doing that in the designer is what made the code below work.

flowLayoutPanel.Controls[0].Dock = DockStyle.None;                
flowLayoutPanel.Controls[0].Width = flowLayoutPanel.DisplayRectangle.Width - lowLayoutPanel.Controls[0].Margin.Horizontal;

for (int i = 1; i < flowLayoutPanel.Controls.Count; i++)
{
    flowLayoutPanel.Controls[i].Dock = DockStyle.Top;
} 

Solution 3

The docking properties of the FlowLayoutPanel are for the panel itself (like if you wanted the FlowLayoutPanel docked to the left of the form, etc.), not the container of controls inside of it.

Try playing with the DefaultPadding and DefaultMargin properties, these apply to the spacing of the controls it contains

Comments

[Alex]

@Akram, The WrapContents property fixed the problem of the controls filling next to each other thanks. The issue i Have now is getting the userControls to fill all the way from left to right.

[Alex]

Thanks for the reply, however I am refering to the docking properties of the Usercontrols within the flowlayoutpanel, not the panel itself.

[Alex]

Also I've tried to set the Dock Properties of the user control to DockStyle.Top and DockStyle.Fill, however, when I do that it does not draw the control. It does however still show the scrollbars. I do not understand why it would not draw the control when it's docked.

[Akram Shahda]

@Alex: Have you considered using TableLayoutPanel here ??

[Alex]

I have and when I used TableLayoutPanel it did not detect the scrollbars when they were needed. Even with AutoScroll set to true.

[Akram Shahda]

@Alex: Have you thought about placing the TableLayoutPanel inside a Panel ??

[Alex]

@Akram, I had that but now that I think of it, I dont believe I had AutoScroll set to true for the panel. I'll give that a go.

[Akram Shahda]

@Alex: I believe it would be a stable solution.

[argyle]

Thanks for the idea to subscribe to the Layout event. That is what I needed, and I just set the width of the child controls manually based on the width of the parent.