[Reference] MyndFyre's Guide to Resizing GUI Elements in .NET

[MyndFyre]

[note: this is a re-post from the StealthBot.net forums]
.NET provides two different kinds of automatic layout adjusting: Docking and Anchoring.  The behavior is hard to catch at first, and to make complicated layouts you often have to layer controls inside what are called "container" controls.  But once you get the knack of it, it's easy!  Note that you can combine these any way you want to, but you can only set either Dock or Anchor on any one control.  Setting both will have the result that only the last one to set has effect.

For your convenience I've made a demo for you.

These are a couple widgets I've put together that handle automatic resizing.  This one is called ConnectionDocument -- I use it to keep all of my GUI widgets together:


Here I have focused (selected) on the TextBox part of it.  Note that I've highlighted the Anchor property, and note that its value is "Bottom, Left, Right."  The Anchor property accepts a bitwise flag combination which combine Top, Bottom, Left, and Right, and the default setting for any control is Top, Left.


The way that the Anchor property works is that when the control's Container control (for example, a Panel) is resized, it keeps its relative position to the sides that are resized.  For example, if I were to resize the Panel that holds the text box -- to shrink it horizontally, for example -- because the TextBox's Anchor property specified both Left and Right, the TextBox will shrink towards the middle when I move it.  Conversely, if I grow the Panel, the TextBox will grow as well:


All told, the Panel that holds my TextBox has two other widgets -- both buttons.  Since I don't want the buttons to shrink (lest they look funny), but since I do want them to move left if the Panel shrinks, the Buttons are set to Anchor at Bottom, Right.

Now, let me drag another widget that I made, that I call the ChatBox, onto the work area.  I'm going to use this to demonstrate how the Dock property works.  Notice that the ChatBox is contained, again, within a Panel.  (Note that Panels are not the only container controls; GroupBox, TabPage, and others are container controls; if they have the grid surface in design mode, it's a container).  I've highlighted the default value of the Dock property, which is None, as well as the fact that the ChatBox is on a Panel:


When I set the Dock property to Left, the ChatBox is going to attach itself to the left side of the container.  The Height property of the ChatBox will have absolutely no effect; the ChatBox is going to stretch to take up the entire size of the Panel that contains it, and will move left so that its right side is as far away from the left side as the Width says:

The ONLY thing I have done here is set the Dock property to Left.

I can change the Dock property now to Top, and the ChatBox is going to reposition.  It will attach itself to the top side of the Panel, stretching horizontally to take up the entire top side.  Its Width property will now have no effect, but the bottom will be as far away from the top as the Height property says:

Again, the only change I made from the last picture was to change the Dock to Top.

Finally, although the DockStyle enumeration has the values Right and Bottom, they work generally the same way as their Left and Top counterparts.  However, there is also the Fill option -- that tells the control to take up all the space (*or all the space remaining) in the container control.  For example:


Perhaps the coolest thing (and I don't have a sample picture) about the Dock property is that they can be ordered.  If you look at the original picture, you'll notice that it looks like the line between the Panels containing the ChatBox and the TextBox is a little bit thick.  There are actually 3 panels there.  The bottom panel contains the panel that contains the main typing-into box.  That panel is set to Dock at the Bottom, and then the panel that contains the ChatBox is set to Dock as a Fill.  The trick is doing it in the right order in the visual designer; obviously you can't set the Fill first and then the Bottom; you have to do the Bottom first, and then the Fill.

Hope this explains the automatic resizing features in .NET!  As always, these are available to any language that uses the .NET Framework class library.

[dxoigmn]

A good complement to this is this .NET nugget.