Docking/Anchoring controls

[Echilon]

I have a user control (which for the purposes of this post is just a container), and several nested user controls. I want to lay out the child controls inside the container in a similar way to the attached picture.

I've tried different combinations of Anchor and Dock properties as well as using a Flow Layout Panel, but I can't get it to work.

The two things I know are:
1) The location of each child control on the Y-axis
2) The height of the control

I need some way to assign these controls a combination of properties and have them stack up as shown in the picture. Full width child controls should float to the left, and if there's more than one child control at a Y location (eg: 3 and 4), the available space should be split.

I managed to get it sort of working, but items were overlapping.

 

[bledazemi]

Hi Echilon. One way to achieve the layout you specified in the picture you attached could be by using a number of panels and one splitContainer and then setting the Dock or Anchor properties accordingly.

Here is what i tried and it worked:

* Added a panel on the user control and set its dock property to Left (this would be your area 1).

* Added a panel on the user control and set its dock property to bottom (this should be your area 5).

* Added a panel on the user control and set its dock property to top (this will be where your area 2 will be placed). I named this one pnlTop

* Added a panel on the user control and set its dock property to Client (this will be where your area 3 and 4 will be placed). I named this pnlMiddle


* Added a panel on the pnlTop panel above positioned its initial Y and width and then set the Anchor properties to (Left+Right+Bottom) this will be your area 2.


* Added a splitContainer on the pnlMiddle and set its initial Y and width and then set the anchor properties to (Left+Right+Bottom)

For the purposes of testing use different colours for each area so that you can see it all working. I tried the above and it worked.

Hope this helps you a little.

"It is in our collective behaviour that we are most mysterious" Lewis Thomas

 

[bledazemi]

Forgot to mention the splitContainer in the pnlMiddle would be your area 3 and 4. SplitContainer contains two panels and by default has the ability to split the available space into proportional size for its two panels. In your case if you size the splitContainer panels to have equal width on design then they will always have equal width even when the splitContainer changes size.

 

[Echilon]

Thanks bledazemi, the one problem is that I don't know how many containers will occupy the same Y-Position. In the example there are a maximum of two, but there could be up to ten depending on the situation. I'll have a play with the anchor settings using your examples and see if I can come up with something. Thanks again.

 

[bledazemi]

You could try using the TableLayoutComponent with one row and then add the columns at run time. If you specify the column width as percentage then provided the TableLayoutComponenthas Align set to (Left+Right) the columns will resize proportionally.

/// <summary>
        /// Function: PrepareTableLayout
        /// Purpose : Prepare a table layout with given number of columns
        /// </summary>
        /// <param name="NumberOfContainers"></param>
        void PrepareTableLayout(int NumberOfContainers)
        {
            //Clear the table layout if desired
            tableLayoutPanel1.Controls.Clear();
            tableLayoutPanel1.ColumnStyles.Clear();

            for (int i = 0; i < NumberOfContainers; i++)
            {
                ColumnStyle colStyle = new ColumnStyle();
                colStyle.SizeType = SizeType.Percent;
                colStyle.Width = 100 / NumberOfContainers;
                tableLayoutPanel1.ColumnStyles.Add(colStyle);
            }

            tableLayoutPanel1.ColumnCount = NumberOfContainers;
        }

"It is in our collective behaviour that we are most mysterious" Lewis Thomas

 

[Echilon]

I was thinking about a tablelayoutpanel, but each user control could be a different height. I think calculating the bounds is the only way to do it.