Keeping controls centralized in a TableLayoutPanel

Question

I am starting to use C# and am trying to create a Form which will contain many different controls. In order to keep things simple, I am using a TableLayoutPanel to deal with the formatting. However, I'd like all the controls to be centralized within their respective cells. After some searching, I found this page which shows that to do so, you can merely set control.Anchor = AnchorStyles.None and the control will be centered in its cell.

This does indeed work quite well, but I've now found an odd behavior. I'm starting to build the form now, so it's completely bare bones, with a simple graph above and a single Textbox below it. Once I'm done, the graph will occupy the entire first row of the panel and all the rest of the controls will be distributed below it.

Therefore, I was going to simply set panel.SetColumnSpan(graph, 2) (in the case of two columns). That works just as expected, except that now the TextBox below is no longer centralized.

Here's the code I have so far:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows.Forms;
using System.Windows.Forms.DataVisualization.Charting;

namespace ConsoleApplication1
{
    class Program
    {
        static void Main(string[] args)
        {
            Form form = new Form();
            form.AutoSize = true;
            form.FormBorderStyle = FormBorderStyle.FixedDialog;

            Chart chart = new Chart();
            chart.Anchor = AnchorStyles.None;
            //...

            TextBox text = new TextBox();
            text.Text = "A";
            text.Anchor = AnchorStyles.None;

            TableLayoutPanel box = new TableLayoutPanel();
            box.AutoSize = true;
            box.RowCount = 2;
            box.ColumnCount = 2;
            box.Controls.Add(chart,0,0);
            box.SetColumnSpan(chart, 2);
            box.Controls.Add(text,0,1);

            form.Controls.Add(box);
            form.ShowDialog();
        }
    }
}

Here are the results with the box.SetColumnSpan commented out:

And with it active:

---

UPDATE: Setting the TextBox with ColumnSpan(2) as well works, but it somewhat beats the point. For instance, if I want to have two TextBoxes on the second row, I'd want them each centered within their respective cells.

In this case, I now add a second Textbox:

        TextBox text2 = new TextBox();
        text2.Text = "B";
        text2.Anchor = AnchorStyles.None;

And add that to the panel:

    TableLayoutPanel box = new TableLayoutPanel();
    box.AutoSize = true;
    box.RowCount = 2;
    box.ColumnCount = 2;
    box.Controls.Add(chart,0,0);
    box.SetColumnSpan(chart, 2);
    box.Controls.Add(text,0,1);
    box.Controls.Add(text2, 1, 1);

However, once again the result is unsatisfactory: each Textbox is clearly "left-justified".

Answer 1

UPDATE: your code is missing colum styles. Just set as this, and your're done:

this.box.ColumnStyles.Add(new System.Windows.Forms.ColumnStyle(System.Windows.Forms.SizeType.Percent, 50F));
this.box.ColumnStyles.Add(new System.Windows.Forms.ColumnStyle(System.Windows.Forms.SizeType.Percent, 50F));

---

For your textbox to be aligned in the center of form (TableLayoutPanel), set column span to 2 too. If not, depending on text box size, it is centered in first column.

this.box.ColumnCount = 2;
this.box.RowCount = 2;
this.box.Controls.Add(this.chart, 0, 0);
this.box.Controls.Add(this.text, 0, 1);

this.box.SetColumnSpan(this.chart, 2);

this.text.Anchor = System.Windows.Forms.AnchorStyles.None;

Gives

And setting this:

this.box.SetColumnSpan(this.text, 2);

And without text column span, but with to text boxes: