Group and Arrange Controls

Microsoft .NET Framework, ASP.NET, Visual C# (CSharp, C Sharp, C-Sharp) Developer Training, Visual Studio

Exam 70-526 Preparation Guide: Group and arrange controls by using the Panel control, GroupBox control, TabControl control, FlowLayoutPanel control, and TableLayoutPanel control.

1 Adding a control to a container via the IDE
2 Adding a control to a container manually
3 Fixing the position of controls
- 3.1 Anchoring controls
- 3.2 Docking controls
4 The Z-Order
5 MSDN references

Container controls represents a control that can function as a container for other controls. This section of the exam looks at the following container controls:

Panel control
GroupBox control
TabControl control
FlowLayoutPanel control
TableLayoutPanel control

Container controls provide a logical boundary for the controls contained within them giving the user interface subunits which perform a certain function. Each container control can capture the TAB key press and move focus to the next control within the collection of controls in the container.

Note:

The container control itself does not receive focus, instead the focus is always set to the first control within the collection of contained controls.

Changes to the container control can affect the controls contained within the container. For instance, if the Enabled property of the container is set to false, then all of the contained controls will be disabled.

Each container has a property called Controls. This represents the collection of controls contained within the container. When a control is added to a container by the IDE, the control is added to the container's Controls property.

[edit]

Adding a control to a container via the IDE

A Form is inherited from ContainerControl, so we can use this for our example.

Create a Windows Forms application.
With the Form Designer open, click on Button in the Toolbox.
Now click anywhere on the Form.

[edit]

Adding a control to a container manually

To add a button to the form we need two pieces of code. This first is a declaration of a button in the file Form1.Designer.cs just within the class.

private System.Windows.Forms.Button button1;

Secondly we add the following code to the InitializeComponent() method after the code that already exists.

// Create the new button
this.button1 = new System.Windows.Forms.Button();
 
// Set up its properties
this.button1.Location = new System.Drawing.Point(30, 30);
this.button1.Name = "button1";
this.button1.Size = new System.Drawing.Size(75, 23);
this.button1.TabIndex = 0;
this.button1.Text = "Hello";
this.button1.UseVisualStyleBackColor = true;
 
// Add it to the form
this.Controls.Add(this.button1);

[edit]

Fixing the position of controls

Unless you set a Form's FormBorderStyle to FixedDialog, Fixed3D, FixedSingle or FixedToolWindow; all of the controls in the container must cope with the container being resizeable. If a control has its Anchor property set to AnchorStyles.None, the control moves half of the distance that the container of the control is resized. For example, if a Button has its Anchor property set to AnchorStyles.None and the Form that the control is located on is resized by 20 pixels in either direction, the button will be moved 10 pixels in both directions.

Container controls provide two ways of overcoming this problem; using the Dock and Anchor properties.

Note:

The Anchor and Dock properties are mutually exclusive. Only one can be set at a time, and the last one set takes precedence.

[edit]

Anchoring controls

Anchoring a control to its parent control ensures that the anchored edges remain in the same position relative to the edges of the parent control when the parent control is resized.

You can anchor a control to one or more edges of its container using a bitwise combination of the AnchorStyles values. The default is Top and Left.

Bottom - The control is anchored to the bottom edge of its container.
Left - The control is anchored to the left edge of its container.
None - The control is not anchored to any edges of its container.
Right - The control is anchored to the right edge of its container.
Top - The control is anchored to the top edge of its container.

If you anchor a control to two or more opposing sides, then the control will stretch when the container is resized.

[edit]

Docking controls

A control can be docked to one edge of its parent container or can be docked to all edges and fill the parent container. Docking is controlled using the DockStyle enumeration. The default is None.

Bottom - The control's bottom edge is docked to the bottom of its containing control.
Fill - All the control's edges are docked to the all edges of its containing control and sized :* appropriately.
Left - The control's left edge is docked to the left edge of its containing control.
None - The control is not docked.
Right - The control's right edge is docked to the right edge of its containing control.
Top - The control's top edge is docked to the top of its containing control.

Within the IDE, the DockStyle can be chosen visually.

When a control is docked to the edge of a container, it is positioned flush against the edge when the container is resized. If more than one control is docked to an edge, the controls appear side by side according to their z-order; controls higher in the z-order are positioned farther from the container's edge.

If Left, Right, Top, or Bottom is selected, the specified and opposite edges of the control are resized to the size of the containing control's corresponding edges. If Fill is selected, all four sides of the control are resized to match the containing control's edges.

[edit]

The Z-Order

When you layout controls using the Dock property, the order you add controls is called the Z-order. Each control is docked according to their position in the z-order.

To show this, first dock a control to the left of its parent control. Then add a control using DockStyle.Fill. The second control will occupy all the space not taken up by the first control.

If you were to add a control with DockStyle.Fill first, the second control will not be visible.

You can bring a control the front of the Z-order by calling the BringToFront method.

[edit]