Search code examples
c#resizefill

Auto resize to fill all multi panels


How to size all panels as fill in form1 window without changing panels size? I searched on Google. very difficult to find. That why i want to help. like in below Thanks.

If 3 panels this will be resized:

enter image description here

4 Panels:

enter image description here

5 Panels:

enter image description here

9 Panels:

enter image description here


Solution

  • You can use a FlowLayoutPanel. Insert in your form and set Dock=Fill in the designer. Add this const to your form:

    private const int PanelSize = 200;
    

    In the constructor:

    this.flowLayoutPanel1.Resize += this.OnFlowLayoutPanel1_Resize;
    this.OnFlowLayoutPanel1_Resize(this.flowLayoutPanel1, EventArgs.Empty);
    

    And use this method to create/destroy the panels:

    private void OnFlowLayoutPanel1_Resize(object sender, EventArgs e)
    {
        // At least, one panel
        var columns = Math.Max(1, this.flowLayoutPanel1.Width / (double)PanelSize);
        var rows = Math.Max(1, this.flowLayoutPanel1.Height / (double)PanelSize);
    
        var panelsCount = this.flowLayoutPanel1.Controls.Count;
        var requiredPanelsCount = rows * columns;
        var diff = requiredPanelsCount - panelsCount;
        if (diff > 0)
        {
            // We need more panels: create it
            for (int i = 0; i < diff; i++)
            {
                var panel = new Panel
                {
                    Size = new Size(PanelSize, PanelSize),
                    TabIndex = this.flowLayoutPanel1.Controls.Count, 
                    BackColor = GetBackColor()
                };
                this.flowLayoutPanel1.Controls.Add(panel);
            }
        }
        else
        {
            // Remove unneeded panels
            for (int i = 0; i < diff; i++)
            {
                this.flowLayoutPanel1.Controls.RemoveAt(
                    this.flowLayoutPanel1.Controls.Count - 1);
            }
        }
    }
    

    I have used this method to set a color:

    private Color GetBackColor()
    {
        var colors = new[] 
        { 
            Color.Black, Color.Red, Color.Green, Color.Blue, Color.White
        };
        var index = this.flowLayoutPanel1.Controls.Count % colors.Length;
        return colors[index];
    }
    

    Adapt it to your needs.

    If you need fill entire form, you must work with a variable PanelSize. Use a minimum and maximum size for the panels instead a fixed value.

    I'm creating/removing Panels to fill entire space. If you only need fixed panels in the form, you don't need the resize event. The FlowLayoutControl do what you need.