Centering controls within a form in .NET (Winforms)?

Viewed 213278

I'm trying to center a fixed size control within a form.

Out of interest, is there a non-idiotic way of doing this? What I really want is something analogous to the text-align css property.

At the moment, I'm setting the padding property of the surrounding form to a suitable size and setting the Dock property of the control to fill.

11 Answers

You could achieve this with the use of anchors. Or more precisely the non use of them.

Controls are anchored by default to the top left of the form which means when the form size will be changed, their distance from the top left side of the form will remain constant. If you change the control anchor to bottom left, then the control will keep the same distance from the bottom and left sides of the form when the form if resized.

Turning off the anchor in a direction will keep a control centered when resizing, if it is already centered. In general, a control not anchored maintains its proportional position to the dialog. E.g. If you put a control at X=75% of the dialog width and turn off left/right anchors, the control will maintain its center at X=75% of the dialog width.

NOTE: Turning off anchoring via the properties window in VS2015 may require entering None (instead of default Top,Left)

myControl.Left = (this.ClientSize.Width - myControl.Width) / 2 ;
myControl.Top = (this.ClientSize.Height - myControl.Height) / 2;

Since you don't state if the form can resize or not there is an easy way if you don't care about resizing (if you do care, go with Mitch Wheats solution):

Select the control -> Format (menu option) -> Center in Window -> Horizontally or Vertically

To center Button in panel o in other container follow this step:

  1. At design time set the position
  2. Go to properties Anchor of the button and set this value as the follow image

enter image description here

In addition, if you want to align it to the center of another control:

//The "ctrlParent" is the one on which you want to align "ctrlToCenter".
//"ctrlParent" can be your "form name" or any other control such as "grid name" and etc.
ctrlToCenter.Parent = ctrlParent;

ctrlToCenter.Left = (ctrlToCenter.Parent.Width - ctrlToCenter.Width) / 2;
ctrlToCenter.Top = (ctrlToCenter.Parent.Height - ctrlToCenter.Height) / 2;

It involves eyeballing it (well I suppose you could get out a calculator and calculate) but just insert said control on the form and then remove any anchoring (anchor = None).

To keep the control centered even the form or parent control were resize.

  1. Set the following properties of the parent element (you can set it through the property window):
    parentControl.AutoSize = true;
    parentControl.AutoSizeMode = System.Windows.Forms.AutoSizeMode.GrowAndShrink; 
  1. Put this code in the Resize event of the form or the parent control (if the control is inside of another control).
    controlToCenter.Left = (parentControl.Width- controlToCenter.Width) / 2;
    controlToCenter.Top = (parentControl.Height - controlToCenter.Height) / 2;
  1. If the parent control is docked to the form, add this line of code.
       //adjust this based on the layout of your form
       parentControl.Height = this.ClientSize.Height; 

So, I am currently working on a pagination control and I came up with the following to achieve the below result.

example

  • Add a PanelLayout to your container (e.g. form or usercontrol)
  • Set the PanelLayout properties:
    • Dock: Bottom (or Top)
    • AutoSize: False

This will center the PanelLayout horizontally. Now, in your codebehind, do something like this:

    public MyConstructor()
    {
        InitializeComponent();

        for (var i = 0; i<10; i++)
        {
            AddButton(i);
        }
    }

    void AddButton(int i)
    {
        var btn = new Button();
        btn.Width = 30;
        btn.Height = 26;
        btn.Text = i.ToString();
        this.flowLayoutPanel1.Controls.Add(btn);
        btn.Anchor = AnchorStyles.None;
    }

There is a ceveat, however. If I make my form too small (horizontally) buttons will "disappear" outside of the viewport. In my case, that's not a problem, but you could take care of this by writing code that listens to the Resize event, and remove elements (buttons) based on the viewport Width.

Related