c#/winforms: how can two controls dynamically share available space?

Question

hello, how would i setup my controls for the following situation.

i have a parent-container for example a GroupBox.

inside this parent-container i have two similar controls like for example ListBoxes, next to each other. they both have the same size, so the border between the two of them is exactly in the middle of the groupBox.

now when the GroupBox is resized, i want to ListBoxes to also be resized, but the two should always be at the same size than the other one. So also the border between the two of them stays in the middle of the GroupBox.

(i hope this is understandable)

so, how would i set up the properties for these three controls to achieve my desired behaviours?

thanks!

Answer 1

Perhaps a SplitContainer with the two-halves set evenly and IsSplitterFixed set to true (to stop the user moving it):

[STAThread]
static void Main() {
    Application.EnableVisualStyles();
    Application.Run(new Form {
        Controls = { new SplitContainer {
            Width = 200,
            IsSplitterFixed = true,
            SplitterDistance = 100,
            SplitterWidth = 1,
            Dock = DockStyle.Fill,
            Panel1 = { Controls = {
                    new ListBox {
                        IntegralHeight = false,
                        Dock = DockStyle.Fill,
                        BackColor = Color.Blue,
                        Items = {"abc","def","ghi"}
                    }
                }
            }, Panel2 = { Controls = {
                    new ListBox {
                        Dock = DockStyle.Fill,
                        BackColor = Color.Red,
                        IntegralHeight = false,
                        Items = {"jkl","mno","pqr"}
                    }
                }
            }
        }}
    });        
}

Answer 2

It is also possible without the splitcontainer.

In the resize event of the groupbox set the location of the first control to {0,0} and of the second to {GroupBox.Width/2,0}, and set the sizes of both to {GroupBox.Width/2, GroupBox.Height}

You should also leave space around the controls so they don't overlap with the border of the GroupBox.

private void groupBox1_Resize(object sender, EventArgs e)
{
    groupBox1.SuspendLayout();

    listBox1.Location = new Point(7, 20);
    listBox2.Location = new Point(groupBox1.Width / 2, 20);

    listBox1.Size = new Size(groupBox1.Width / 2 - 6, groupBox1.Height - 27);
    listBox2.Size = new Size((groupBox1.Width + 1) / 2 - 6, groupBox1.Height - 27);

    groupBox1.ResumeLayout();
}

Answer 3

You need another container. The TableLayoutPanel is the best solution. Use 1 row and 2 columns and dock (Dock = Fill) it in the group box. The width of both columns should be set to 50%. Next you can add your controls in the individual cells and dock them (Dock = Fill)