title: Keeping controls centralized in a TableLayoutPanel
body: <p>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 <code>TableLayoutPanel</code> to deal with the formatting. However, I'd like all the controls to be centralized within their respective cells. After some searching, I found <a href="https://stackoverflow.com/questions/491399/centering-controls-within-a-form-in-net-winforms">this page</a> which shows that to do so, you can merely set <code>control.Anchor = AnchorStyles.None</code> and the control will be centered in its cell.</p>
  
  <p>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.</p>
  
  <p>Therefore, I was going to simply set <code>panel.SetColumnSpan(graph, 2)</code> (in the case of two columns). That works just as expected, except that now the TextBox below is no longer centralized.</p>
  
  <p>Here's the code I have so far:</p>
  
  <pre><code>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();
          }
      }
  }
  </code></pre>
  
  <p>Here are the results with the <code>box.SetColumnSpan</code> commented out: 
  <img src="https://i.stack.imgur.com/WN5zM.jpg" alt="Commented out"></p>
  
  <p>And with it active: <br>
  <img src="https://i.stack.imgur.com/JxeOc.jpg" alt="Active"></p>
  
  <hr>
  
  <p>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.</p>
  
  <p>In this case, I now add a second Textbox:</p>
  
  <pre><code>        TextBox text2 = new TextBox();
          text2.Text = "B";
          text2.Anchor = AnchorStyles.None;
  </code></pre>
  
  <p>And add that to the panel:<br></p>
  
  <pre><code>    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);
  </code></pre>
  
  <p>However, once again the result is unsatisfactory: each Textbox is clearly "left-justified".
  <a href="https://i.stack.imgur.com/XxCpp.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XxCpp.jpg" alt="Both Textboxes are left-justified"></a>
  </p>