FlowLayoutPanel issues

Question

Hi everyone,

I hope you can help with this one - I'm having a really hard time with the FlowLayoutPanel.

I have a Winforms app with a FLP(FlowLayoutPanel) with one child control - a tabControl(with a webBrowser in it). The form also has a TableLayoutPanel docked on top, and another TableLayoutPanel docked at the bottom. So my intention is to fill the space between these TLP's with the FlowLayoutPanel. All controls are added to the form in design view.

What I need - when I resize the form, the FLP should resize nicely with it, filling the form, and the tabControl should fill the FLP too.

The form is set to run maximized, so a first resize happens by default when I run the app - at that point, the FLP and its control do not resize unless I tel them specifically to do so, in the Form_Layout event handler.

The problem is that no matter what combination of Size changes, Anchors, Docks I try in that event handler, always the top or bottom part of the tabControl is out of the form area and I can't see the full scroll bar of the webbrowser in it; so the tab control is not properly docked inside the FLP(or the FLP is not docked in the form), even if I tell it to be. Here is the Form_layout code:

    private void MyForm_Layout(object sender, LayoutEventArgs e)
    {
        //resize FLP
        pnlMainFlowLayout.Size = this.Size - new Size(15, 0);
        pnlMainFlowLayout.Dock = DockStyle.Fill;
        pnlMainFlowLayout.BringToFront();

        //resize child control of FLP
        tabControl.Size = pnlMainFlowLayout.Size;
        tabControl.BringToFront();
    }

I really need to understand the FlowLayoutPanel's resizing behaviour. Thank you for any idea in advance.

Best regards,

/Andrei

Answer 1

When using docking the order in which the controls are added to the parent are important. The control added first has a higher precedence. This precedence could lead to the effects you describe.

To ensure the correct docking behaviour select one of the controls docked at top or bottom and say send them to the background. Then select the other control and do the same. Usually this solves these kind of problems.

Just as a matter of interest why are you using a flow layout to render a single tab page, wouldn't it be better to place the tabControl directly on you form and set Dock to Fill?

Answer 2

There is no point in using a FLP if it contains only one control. Its job is to flow the controls inside of it, nothing to flow if there's only one.

Use the TabControl as-is, set its Dock property to Fill. If that make it overlap one of the TLPs then right-click the TLP and click 'Send To Back'.

Answer 3

Your answers targeting the TLP's and sending them to back helped me think out of the box and understand the problem - the height of the TLPs at the top and bottom was causing it.

When I resized dynamically, I should have wrote:

pnlMainFlowLayout.Size = this.Size - new Size(15, (pnlTopTableLayout.Height + pnlBottomTableLayout.Height)

Cheers!

PS - who do i mark as accepted when you both helped for the solution ? :)