Responsive Design UI with DockPanel Suite

Question

I have design 1 winform to look like the picture. But I want the highlighted yellow part to be dockable with dockpanel suite reference. Is that do-able or any other suggestion of better design?

Right now the treeview is on the dockpanel and the red box part is a usercontrol placed in the same dockpanel. I tried to put the redbox as another form but I can't place it as it is in the picture. Also, this winform is need to be responsive so I put in the redbox part in a table layout panel.winform design and not familiar actually with the dockpanel suite reference. If there is a beginner tutorial that I can refer to, it would be much appreciated.

Current design:

Answer 1

There are two approach to your problem. First is dirty one and second elegant one. By dirty and elegant i mean way they display. Method they work are both same.

I will explain to you how to do it on empty form and you just implement that in your populated one.

• First create new form.
• Add 2 or more GroupBoxes to it
• Add some items inside them (just to see if it works)
• At the top of the each boxes add Button which will toggle visibility

Our form now looks like this and let's look of code behind it.

using System;
using System.Drawing;
using System.Windows.Forms;

namespace Test
{
    public partial class TestForm : Form
    {
        // This is property
        bool ShowFirstGroupBox
        {
            get
            {
                // We let user get our property from private variable
                return _ShowFirstGroupBox;
            }
            set
            {
                // When user change this property we do something based on that
                switch(value)
                {
                    case true:
                        groupBox1.Size = new Size(groupBox1.Width, FirstGroupBoxDefaultHeight);
                        break;
                    case false:
                        groupBox1.Size = new Size(groupBox1.Width, 55);
                        break;
                }

                _ShowFirstGroupBox = value;
            }
        }
        bool ShowSecondGroupBox
        {
            get
            {
                return _ShowSecondGroupBox;
            }
            set
            {
                switch (value)
                {
                    case true:
                        groupBox2.Size = new Size(groupBox1.Width, FirstGroupBoxDefaultHeight);
                        break;
                    case false:
                        groupBox2.Size = new Size(groupBox1.Width, 55);
                        break;
                }

                _ShowSecondGroupBox = value;
            }
        }

        // We store our boxes current state ( TRUE = shown, FALSE = HIDDEN )
        bool _ShowFirstGroupBox = true;
        bool _ShowSecondGroupBox = true;

        // We store our default height for groupboxes
        int FirstGroupBoxDefaultHeight;
        int SecondGroupBoxDefaultHeight;

        public TestForm()
        {
            InitializeComponent();

            // Assigning default height of our groupboxes
            FirstGroupBoxDefaultHeight = groupBox1.Height;
            SecondGroupBoxDefaultHeight = groupBox2.Height;
        }

        private void button1_Click_1(object sender, EventArgs e)
        {
            ShowFirstGroupBox = !(_ShowFirstGroupBox); // This sets our property value to opposite of this boolean
        }

        private void button1_Click_1(object sender, EventArgs e)
        {
            ShowSecondGroupBox = !(_ShowSecondGroupBox); // This sets our property value to opposite of this boolean
        }
    }
}

Now when we have code like this and press button it will collapse groupbox.

NOTE: Controls under groupbox are still on place but just hidden since they are child of groupbox and everything outside of bounds is not visible to user.

This is dirty way since i would like to display it much prettier with MINUS sign on the right side of the groupbox title so i do not have button inside it. To do this you would need to create custom control which inherits groupbox, add button to it and position it in title bar and create event for it. It is easy if you have ever tried creating custom controls but if you haven't and you think dirty approach is okay with you then do not try it.