Home

Common Properties of Controls

 

The Content Alignment of a Control

When a control can be resized, or it has been configured to be sizable, as it would be the case for a label or a button, you can specify in what part of its confined borders the text should display. This characteristics is controlled by the TextAlign property. To specify the alignment of text during design, access the Properties window for a control and use the TextAlign field:

The TextAlign property is of type ContentAlignment, which is an enumeration. The members and result of this enumeration are:

TopLeft TopCenter TopRight
TopLeft TopCenter TopRight
MiddleLeft MiddleCenter MiddleRight
MiddleLeft MiddleCenter MiddleRight
BottomLeft BottomCenter BottomRight
BottomLeft BottomCenter BottomRight
 

To programmatically specify the text alignment of a control, access its TextAlign property and assign it the desired member of the ContentAlignment enumeration. Here is an example:

using System;
using System.Drawing;
using System.Windows.Forms;

public class Exercise : Form
{
    private Button btnSubmit;

    private void InitializeComponent()
    {
        btnSubmit = new Button();
        btnSubmit.Text = "Submit";
        btnSubmit.Location = new Point(20, 20);
        btnSubmit.Size = new Size(100, 60);
        btnSubmit.TextAlign = ContentAlignment.BottomRight;

        Controls.Add(btnSubmit);
    }

    public Exercise()
    {
        InitializeComponent();
    }
}

public class Program
{
    static int Main()
    {
        Application.Run(new Exercise());
        return 0;
    }
}

Anchoring a Control

If you position a (visual) control on a form and if the control is positioned on the top left section of the form, when the user resizes the form, the controlís position would appear static, it would not move. This could be a concern if the control is positioned on the right, the bottom or the lower right sections of the form. When the user resizes the form, the controlís position would not be updated. Sometimes you will want the control to have the same location and/or distance with regard to the bottom, the right, and/or the lower right corners of the form.

The ability to manage a control or a group of controls' location and size when the user resizes it is done using the Anchor property:

The Anchor Property

The Anchor property is created from the AnchorStyles enumeration. By default, when you add a control to a form, its position is relative to the top left corner of its container. You can also set the controlís position with regards to its containerís right and bottom borders. The Anchor property can be used to "glue" one border of a control to its parent using one of the following values:

Bottom: The control bottom border will be the same even if the parent is heighten or shrunk

Left: The control left border will be the same even if the parent is widened or narrowed

None: No anchoring is applied

Right: The control right border will be the same even if the parent is widened or narrowed


Top: The control top border will be the same even if the parent is heightened or shrunk

In the same way, you can combine AnchorStyles values to "glue" one or more corners of a control to its parent when the parent is resized:

  • To visually combine two or more AnchorStyles values, after selecting the control(s) on the form, in the Properties window, click the arrow of the Anchor field and click each desired Anchor button
  • To programmatically combine two or more AnchorStyles values, you use the OR bit operator, which is |

Practical LearningPractical Learning: Anchoring the Controls

  1. On the form, select the buttons on the right side:
     
  2. In the Properties window, click Anchor and click the arrow of its combo box
  3. Click the top vertical line and the right horizontal line. Click the left horizontal line to clear it:
     
  4. On the form, select all text boxes
  5. In the Properties window, click Anchor and click the arrow of its combo box. Click the right horizontal line and keep the others
     
  6. Execute the application
  7. Resize it horizontally and vertically to see the result
     
  8. Close the form and return to your programming environment

Control Docking

When a control is added to a host, depending on the control, it may be automatically positioned where the mouse landed. In some cases, you will want the control to be attached to a border or to a corner of its parent. This can be done using the Dock property:

This property is managed through the DockStyle enumeration. To use this property, click the control and, in the Properties window, click the arrow of the Dock field. You can then select one of the following values:

Bottom: The control will be attached to the bottom border of its parent:

Dock: Bottom A control docked bottom

Fill: The control will use the whole client area of its parent.

Left: The control will be attached to the left border of its parent:

Dock: Right A control docked right

None: The control will be kept where it was positioned on the parent:

Right: The control will be attached to the right border of its parent:

Top: The control will be attached to the top border of its parent:

To programmatically specify the docking option of a control, access its Dock property and assign the desired member of the DockStyle enumeration. Here is an example:

public class Exercise : Form
{
    private Button btnSubmit;

    private void InitializeComponent()
    {
        btnSubmit = new Button();
        btnSubmit.Text = "Submit";
        btnSubmit.Dock = DockStyle.Right;

        Controls.Add(btnSubmit);
    }
}

Practical LearningPractical Learning: Docking a Control

  1. On the Toolbox, click Panel
  2. On the form, click and hold the mouse somewhere in the lower-left section. Then drag right and slightly up to draw it as follows (no need for precision):
     
  3. While the panel control is still selected, in the Properties window, click Dock and click the arrow of its combo box
  4. Select the box above None (to select Bottom)
     
  5. Save all
 

Previous Copyright © 2007 FunctionX, Inc. Next