9

I have a few Button controls in a FlowLayoutPanel, and I want to set them precisely at middle bottom of Form. In the image below I set the Button precisely at middle by setting the FlowLayoutPanel padding manually by 400 to left.

max

But when I try to resize or restore down the buttons wont at middle anymore because of manually set of padding.

min

Is there anything that I can do to set the buttons in middle of FlowLayoutPanel whenever I try to resize it. I'm following the answer base on this post to add and remove buttons dynamically.

Reza Aghaei
  • 120,393
  • 18
  • 203
  • 398

1 Answers1

19

Using a single cell TableLayoutPanel which is suitable for centering the content and an auto-size FlowLayoutPanel you can achieve what you are looking for:

Perform these settings on the controls:

  • Add your images to a FlowLayoutPanel
    • Set AutoSize of FlowLayoutPanel to true
    • Set AutoSizeMode of FlowLayoutPanel to GrowAndShrink
    • Set Anchor property of FlowLayoutPanel to Top, Bottom
  • Use a TableLayoutPanel for hosting the FlowLayoutPanel
    • Use a single Column and a single Row in TableLayoutPanel.
    • Set Dock property of TableLayoutPanel to Bottom.

This way, when you add or remove images dynamically, all images will be shown at bottom center of the form.

Reza Aghaei
  • 120,393
  • 18
  • 203
  • 398
  • hey its you again, it works thanks man.. still have no idea about table layoutpanel with 1 column and 1 row –  Aug 08 '16 at 09:27
  • Take a look at [TableLayoutPanel Control Overview](https://msdn.microsoft.com/en-us/library/h21wykkx(v=vs.110).aspx) – Reza Aghaei Aug 08 '16 at 09:33
  • is it just in table layout when we use anchor top and down it settle in mid ? what if we use other or change table layout like panel control or flow layoutcontrol when it hosting some panel to top and bottom did it settle in mid ? iam also try increasing the row and column it seems like depend on how many row and column, so one row and one column makes it best (middle) –  Aug 08 '16 at 09:38
  • 1
    Each cell of `TableLayoutPanel` works this way, if you set the `Anchor` of the content to `Top, Bottom` it keeps the content in middle of the cell. So we used a single cell to occupy the whole row. Each cell can contain a single control. So to host more than one control, we use a container control in cell to host more than one control in that container. – Reza Aghaei Aug 08 '16 at 09:48
  • Here `FlowLayoutPanel` helps us to add or remove controls and forget about the layout. Controls will be automatically layout in a `FlowLayoutPanel`. – Reza Aghaei Aug 08 '16 at 09:51
  • mmmh, i have tried it too try to put in other than tablelayout , it wont works. and like u said if used a single cell it occupy the whole row. maybe the cons is when i try to insert many row or column and say the flow layout control got 5 button image, it only display less than 5.. thanks for your explanation sir +3 –  Aug 08 '16 at 09:58
  • You may find [this post](http://stackoverflow.com/a/39047133/3110834) useful. It's about centering a control in a panel. – Reza Aghaei Sep 21 '16 at 16:41