CODEWITHSUNDEEP
c#.netwinformscenter-align
user47741
user47741

Reputation: 3015

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

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.

Upvotes: 163

Views: 246657

Answers (11)

Gerhard Schreurs
Gerhard Schreurs

Reputation: 663

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.

Upvotes: 0

splattne
splattne

Reputation: 104070

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)

Upvotes: 292

ron
ron

Reputation: 157

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;

Upvotes: 0

M. Fawad Surosh
M. Fawad Surosh

Reputation: 480

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;

Upvotes: 6

Ahad aghapour
Ahad aghapour

Reputation: 2553

you can put all your controls to panel and then write a code to move your panel to center of your form.

panelMain.Location = 
    new Point(ClientSize.Width / 2 - panelMain.Size.Width / 2, 
              ClientSize.Height / 2 - panelMain.Size.Height / 2);

panelMain.Anchor = AnchorStyles.None;

Upvotes: 0

daniele3004
daniele3004

Reputation: 13970

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

Upvotes: 7

Droj
Droj

Reputation: 3771

You can put the control you want to center inside a Panel and set the left and right padding values to something larger than the default. As long as they are equal and your control is anchored to the sides of the Panel, then it will appear centered in that Panel. Then you can anchor the container Panel to its parent as needed.

Upvotes: 2

Chad
Chad

Reputation: 111

I found a great way to do this and it will work with multiple controls. Add a TableLayout with 3 columns. Make the center column an absolute size (however much room you need). Set the two outside columns to 100%. Add a Panel to the center column and add any controls you need and place them where you want. That center panel will now remain centered in your form.

Upvotes: 11

Robert MacLean
Robert MacLean

Reputation: 39291

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

Upvotes: 54

t3rse
t3rse

Reputation: 10124

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).

Upvotes: 0

Mitch Wheat
Mitch Wheat

Reputation: 300797

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

Upvotes: 136

Related Questions