Read documentation and seek tutorials about the following topics:
- The Dock property
- The Anchor property
- Layout panels such as FlowLayoutPanel in WinForms and every panel in WPF.
- 2D geometry
Here's a whirlwind tour:
Dock works like window docking in VS. A control can be docked to the top, bottom, left, or right edge of a form. When a control is docked, it is moved as close to the dock location as it can go and sized so that it fills all available space in the perpendicular dimension. Docking uses Z-order for resolving conflicts; this is typically the order that you added controls to the form but the designer provides a
ZIndex property that lets you change it.
For example, if you add a button to a form and change
Dock to
Top, the button will be placed a the top of the form and will always be as wide as the form. If you then add a 2nd button and dock it to the top, it will be placed beneath the first button. If you dock the 2nd button to the left, it will be placed at the left edge of the form but its height will only reach to the bottom of the first button. I encourage you to make a form with some docked controls to get a feel for how it works.
Anchor works more like attaching a
bungee cord to an edge of the control and an edge of the form. For example, you place a button in the center of the form and set
Anchor to
None, the button will always remain in the center of the form as it is resized. If you anchor to the left edge, the button will remain vertically centered but never get closer or farther from the left edge. If you anchor to top and left, the button will stay a fixed width from the top and left edge (this is the default). If you anchor to two opposite edges, the control resizes: anchoring to top and bottom means the control will get taller as you resize the form and anchoring to left and right means the control will get wider as you resize the form.
Layout panels can be a big help for complicated layouts.
TableLayoutPanel lets you create a table with individual cells. Each control goes in a cell, and you can use
Anchor and
Dock to specify how the control is laid out in that cell. Table cells can be specified to be the size of the control, an absolute size in pixels, or a percentage of the total size of the layout panel. I *love*
TableLayoutPanel.
FlowLayoutPanel accepts any number of controls and will try to lay them out as best as it can. You use
FlowDirection and
WrapContents to control how it works.
FlowDirection tells it where to put new items;
WrapContents tells it whether it should start a new row/column when it runs out of room or just clip controls that don't fit. WPF has a very large set of layout panels and is much more useful for creating fluid layouts.
Of note:
Anchor and
Dock refer to the container of the current control. If you put a control in something like a
GroupBox or
TableLayoutPanel the control is resized and moved as the container moves; if the container is fixed-sized the control will remain fixed.
2D geometry is the most reliable and difficult way to do this. This requires you to look at your form and define where each control is relative to each other control, resizing as needed. For example, you might say "This label goes at (0, 0). This text box goes 5 pixels beneath the label and must be half the width of the form." In code, you'd express this like so:
Code:
_thisLabel.Location = New Point(0, 0)
_thisButton.Location = New Point(_thisLabel.Left, _thisLabel.Bottom)
_thisButton.Size = New Size(ClientRectangle.Width / 2, _thisButton.Height)
You have to make sure your layout code is run whenever the form size changes if you use this method; that means handling resize events.