Modify Control Properties

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

Exam 70-526 Preparation Guide: Modify Control properties.

1 The Anchor Property
2 The Dock Property
3 Smart tags
4 Document Outline Window
5 Tab ordering
6 Flat style
7 MSDN references

Once you have placed a control on a Form or Container, you will more often than not want to change some aspect of how the control looks. These properties of a control can be modified through the use of the Properties Window.

Most of the properties of an object are exposed within this window, and can be set by either typing a new value, or selecting one of a set of predefined values. Some properties have special graphical interfaces, like choosing a colour.

To open the Properties Window, choose Properties from the View menu, or press F4.

Two of these special graphical interfaces that are worth mentioning are for 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]

The Anchor Property

The Anchor property defines an anchor position for the control. When a control is anchored to a form and the form is resized, the control maintains the distance between the control and the anchor positions.

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.

To anchor a control to a form do the following:

Select the control you want to anchor. Multiple controls can be anchored simultaneously by pressing the CTRL key and clicking on each control to select it.
In the Properties Window, click the down arrow to the right of the Anchor property. A special graphical interface is shown.

Choose the anchors that you wish the control to have. To clear a side of the control that has been anchored, click that arm of the cross.
To close the Anchor property editor, click the Anchor property name again.

If the control is anchored to opposite edges of its container (for example, to the Top and Bottom), it stretches when the container resizes. If a control has its Anchor property set to None, the control moves half of the distance that the container of the control is resized.

[edit]

The Dock Property

The Dock property defines which control borders are docked to its parent control and determines how a control is resized with its parent.

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.

To dock a control in a form do the following:

Select the control you want to dock.
In the Properties Window, click the down arrow to the right of the Dock property. A special graphical interface is shown.
Click the button that represents the edge of the form where you want to dock the control. If you want to fill the contents of the control's form or container control, click the centre box. To disable docking, click (none). The control is automatically resized to fit the boundaries of the docked edge.

Note:
Controls are docked in reverse z-order.

[edit]

Smart tags

When you place some controls such as a Panel, TabControl, FlowLayoutPanel, etc on a Form, they expose some of the common tasks through Smart Tags. Controls that do this show a Smart Tag icon to the top-right of the control. Clicking on the Smart Tag brings up a menu showing what can be accomplished, as shown here with a Panel control.

[edit]

Document Outline Window

This window provides a hierarchical view of all the controls on a form, including those that might not be visible or easily selectable. When you select a given control in the Document Outline Window, it is also selected in the Design Window, even if it is not currently visible. For example, if the item you select in the Document Outline Window is a sub-sub-menu item, the menu strip in the Designer will expand to show you the control.

To open the Document Outline Window, do the following:

Open the View menu
Select Other Windows
Select Document Outline

Above you can see the hierarchy of the controls with the Design View.

Controls can be dragged from one container to another within the Window. You can also delete controls by selecting them and pressing the DELETE key. If you want to add a control to the Document Outline Window, then select the control in the Toolbox, right-click and choose copy, then paste the control into the appropriate container in the Document Outline Window.

[edit]

Tab ordering

The tab order of a Form is the order in which a user moves focus from one control to another when pressing the TAB key. By default, the tab order is the same as the order in which you placed the controls on the Form.

Every control that can receive focus is configured to have the TabStop property set to true. To remove a control from the tab order sequence, set the TabStop property to false.

To set the tab order of a control, do the following:

Click on the View menu.
Select Tab Order, this activates the tab-order selection mode on the form. A number representing the TabIndex property appears in the upper-left corner of each control. Tab order numbering begins with zero.

Click the controls sequentially to establish the tab order you want.
Select Tab Order from the View menu to deactivate the tab-order selection mode on the form.

[edit]

Flat style

Some controls can change their appearance through the use of the FlatStyle property.

Flat - The control appears flat until the mouse pointer moves over it, at which point it becomes highlighted.
Popup - A control appears flat until the mouse pointer moves over it, at which point it appears three-dimensional.
Standard - The control appears three-dimensional.
System - The appearance of the control is determined by the user's operating system.

[edit]