Home

Controls Properties

 

Control Identification

 

Introduction

Most of the controls you will use to create your applications are defined in the .NET Framework and each is based on a particular class. To provide them with basic and common characteristics, all visual Windows controls of the .NET Framework are based on a class called Control which is available in the System.Windows.Forms namespace of the System.Windows.Forms.dll assembly. Based on this, the characteristics common to .NET Framework graphical controls are accessed and managed from one point, then inherited by those controls.

As you should know from your learning C#, in order to use a variable in your application, you must declare a variable for it and, when declaring a variable, you must give it a name. This rule also applies to Windows controls you will use in your application. Based on this, and as seen in the previous lesson, you can programmatically create a control by declaring a variable for and give that variable a name.

Practical LearningPractical Learning: Introducing Characteristics of Controls

  1. Start Microsoft Visual Studio or Visual C#
  2. Create a Windows Application named Rectangle1
  3. On the Toolbox, click the Auto Hide button AutoHide
  4. On the Toolbox, click Label and click the form (no need for precision)
  5. On the Toolbox again, click Label and click an empty area of the form (no need for precision)
  6. Once again, on the Toolbox, click Label and click an unoccupied area of the form (no need for precision)
  7. One more time, on the Toolbox, click Label and click an unoccupied area of the form (no need for precision)

Control's Names

To create a control, the primary piece of information you must provide is its name. This allows you and the compiler to know what control you are referring to when the program is running. Specifying the name of a control may depend on the technique you decide to use to create the control.

After adding a control to a form, it automatically receives a name. In the Properties window, the controlís name displays in the (Name) field.

Author Note The Name property is in parentheses so that, since it is the most regularly used property, if you alphabetically arrange the names of properties in the Properties window, the (Name) property will be on top. This would help you to easily find it.

The default name of a newly added control reflects the name of its control. To differentiate newly added controls of the same class, the Properties window adds an incremental number. For example, if you click the TextBox button on the Toolbox and click the form, the control would be named TextBox1. If you add a second TextBox control, it would be named TextBox2. This causes the default names to be incremental. Since a program usually consists of many controls, it is usually a good idea to rename your controls and give them meaningful and friendlier names. The name should help you identify what the button is used for.

To change the name of a control, on the Properties window, click the (Name) field, type the desired name and press Enter.

When you add a control to a form, the Forms Designer declares a variable for it. To hold the names of controls on a form, Microsoft Visual Studio 2005 creates and associates an additional file to the form. This file is called Form_Name.Designer.cs and you can open it from the Solution Explorer. When you change the name of a control in the Properties window, the studio also changes that name in the designer file.

After creating a control in the Forms Designer, you can change its name programmatically but you should avoid doing that unless you have a good reason to. To change the name of a control, use the Properties window where you would click the (Name) field and type the desired name. If you change the name of a control in the Properties window, the studio automatically makes the necessary changes in the designer file but, if you had used the previous name in your code, you must manually update your code: the studio would not do it for you.

If you are creating a control with code, after declaring its variable and allocating memory for it, you can access its Name property and assign it a string as the name. The name must follow the rules of C# names. Here is an example:

public class Exercise : Form
{
    private Button btnSubmit;

    private void InitializeComponent()
    {
        btnSubmit = new Button();
        btnSubmit.Name = "Submit";

        this.Controls.Add(btnSubmit);
    }
}

To programmatically change the name of a control, access its Name property and assign a string, using the C# rules of variable names. To retrieve the name of a control, access its Name property.

Practical LearningPractical Learning: Naming Controls

  1. Press and hold Ctrl
  2. On the Toolbox, click TextBox
  3. Click the right section of the form four times
  4. On the Toolbox, click Pointer
  5. On the form, click textBox1
  6. In the Properties window, click (Name) and type txtLength
  7. In the top combo box of the Properties window, select textBox2
     
    Properties Window: Control Selection
  8. In the Properties window, click (Name) and type txtHeight
  9. In the same way, select textBox3 and change its Name to txtPerimeter
  10. Select textBox4 and change its Name to txtArea
  11. Change the Text of each text box to 0.00
  12. Save all

A Control's Handle

Up to 2002, Microsoft Windows programmers relied on a library called Win32 to create applications for the operating system. The Win32 library was the only resource of classes (in fact structures), functions, etc, that gave functional instructions to the operating system. The other languages such as Pascal, Visual Basic, etc, used directly or indirectly these resources in their own "dialect" to communicate with Microsoft Windows. The Win32 library is still around (it can never disappear unless the operating system changes completely) and serves as the platform for Microsoft Windows programming. To harmonize programming for this platform, Microsoft created the .NET Framework as a substitute library. This is the library used in Microsoft Visual Studio .NET programming environment. Most of the functionality of Win32 has been redefined in the .NET Framework. The operations were implemented in various libraries or assemblies. Some other operations, such as those related to the Registry, were kept in the Microsoft.Win32 namespace.

The Win32 library uses a concept called handle to represent each object of an application. A handle in Win32 is simply an unsigned integer used in place of a control. The new .NET Framework also uses handles to internally represent controls but defines a handle as a pointer to an integer. Based on this, every control has a handle. You have a choice of using it or not but it exists. The handle is created by the operating system when the application comes up. This means that you don't need to create it but you can access it to retrieve its value.

To access the handle to a control, you can call its Handle property. In the .NET Framework, the Handle property is defined as an IntPtr value. To retrieve the handle of a control, you can access its Handle property.

The Textual Characteristics of a Control

 

Introduction

Some controls are text-based, meaning they are meant to display or sometimes request text from the user. For such controls, this text is referred to as caption while it is simply called text for some other controls. This property is not available for all controls.

If a control displays text, then it has a property called Text. After adding such a control to a form, in some cases, its Text field in the Properties window would hold the same text as its name. In some other cases, the Text property would be empty.

At design time, to change the text of the control, in its Properties window, click its Text field and type the desired value. For most controls, there are no strict rules to follow for this text. Therefore, it is your responsibility to type the right value.

The text provided in a Text field of a text-based control can only be set ďas isĒ at design time. To programmatically specify or change the text of a control, assign a value to its Text property.

If you want the text to change while the application is running, you can format it. For example, such a control can display the current time or the name of the user who is logged in. These format attributes cannot be set at design time. To change the text of a text-based control at run time, either assign a simple string or provide a formatted string to the Text property. Here is an example:

public class Exercise : Form
{
    private Button btnSubmit;

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

        this.Controls.Add(btnSubmit);
    }
}

Practical LearningPractical Learning: Setting Controls Text

  1. On the form, click Label1
  2. In the Properties window, click Text and type Length:
  3. On the form, click Label2 and type Height:
  4. On the form, click Label3 and type Perim:
  5. On the form, click Label4 and type Area:
  6. On the form, click Perim:
  7. In the Properties window, in the Text field, click between m and : then type eter to produce Perimeter:

Auto-Sizing a Control

In the previous lesson, we saw how you could visually change the size of a control. In reality, many pre-requisites must be met and many options are available. After adding a control to a form, we saw that it would be surrounded by 8 small squares In reality, this is not true for all controls. 

Handles

Notice that some controls, such as the label, display one square handle. Some other controls, such as the text box, display 2 square handles. And then some controls display 8 square handles:

  • The presence of the single square button indicates that the control can only be moved: it cannot be resized (at that time)
  • Besides the possibility of moving it, the presence of only two square handles indicates that the control can only be enlarged or narrowed: it cannot be heightened or shrunk
  • The presence of the 8 square handles means that the control's size can be changed in all 8 directions

Many controls (not all), such as the Label , are configured to resize themselves as you provide a string to their Text field in the Properties window. If you type a long string, the control would be made large enough to show the whole text. Some other controls, such as the Button , will not resize themselves if their text is too long. On the following form, both the button and the label received the same text but, while the label shows the whole string, the button can only show the length that its width can afford:

Auto Size

The ability of a control to enlarge itself to accommodate its long is controlled by a Boolean property named AutoSize. For some controls, the default value of this property is False. For some other controls, this property is defaulted to True. Therefore, use this property to control whether a control on the form can be resized or not.

To programmatically specify the auto-sizing option of a control, access its AutoSize property and assign it the desired Boolean value. Here is an example:

public class Exercise : Form
{
    private Button btnSubmit;

    private void InitializeComponent()
    {
        btnSubmit = new Button();
        btnSubmit.Text = "Submit";
        btnSubmit.AutoSize = true;

        Controls.Add(btnSubmit);
    }
}

The Location of a Control

 

Introduction to the Location

The controls added to a parent window are confined to the area of the body offered by that window. After adding it to a window, the control is positioned in the body of the parent using a Cartesian coordinate system whose origin is located on the top-left corner of the parent window. If the parent is a form, the origin is located just under the title bar to the left. The horizontal measurements move from the origin to the right. The vertical measurements move from the origin to the bottom.

In the previous lesson, we saw how to position a control on a form. The position of a control on a form (or a container) is referred to as its location. The location is defined by two values:

  • The horizontal value of a location is the distance from the left border of a form (or container) to the left border of a control
  • The vertical value of a location is the distance from the top border of a form (or container) to the top border of a control

The location of a Windows control can be illustrated as follows:

Location

The location of a control is programmatically specified using a structure called Point. To identify the concept of a point, the System.Drawing namespace provides the Point structure. The Point structure is defined in the System.Drawing.dll. Therefore, if you want to use a Point object in your application, include that assembly in your application:

Add Reference

After adding the reference, you can access the Point object. One of the properties of the Point structure is X, which represents the horizontal distance of the point from the top-left corner of the object that owns the point. Another property, Y, represents the vertical measurement of the point with regards to the top-left corner of the object that owns the point. Based on this, a Point object can be represented on the Windows coordinate system as follows:

Representation of a Point

To visually specify the location of a control, access its Properties window, and use the Location field:

  • You can enter two numbers separated by a comma
  • You can expand the Location field, click X and type a value; click Y and type a value

Programmatically Locating a Control

You can programmatically specify the location of a control. To support this, each control has a property named Location. To assist you with specifying the location of a control, the Point class provides a constructor as follows:

public Point(int x, int y)

This constructor takes a left and a top arguments. Here is an example of programmatically setting the location of a control:

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(100, 40);

        this.Controls.Add(btnSubmit);
    }

    public Exercise()
    {
        InitializeComponent();
    }
}

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

You can also use an existing Point object and assign it to the Location property of the control. Here is an example:

public class Exercise : Form
{
    private Button btnSubmit;

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

        Point pt = new Point();
        pt.X = 100;
        pt.Y =  40;
        btnSubmit.Location = pt;

        this.Controls.Add(btnSubmit);
    }
}

You can also retrieve the location of a control and store it in a Point object. To do this, you can simply assign the Location property of a control to a Point object. 

public class Exercise : Form
{
    private Button btnSubmit;
    
    private void InitializeComponent()
    {
        btnSubmit = new Button();
        btnSubmit.Text = "Submit";
        btnSubmit.Location = new Point(100, 40);

        Point pt = btnSubmit.Location;

        Controls.Add(btnSubmit);
    }
}

When studying control alignment, we saw that you could use the location of one control as a reference to position another control. You can also do this programmatically by retrieving the location of one control and changing either its X or its Y values to position the new control. Here is an example:

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

public class Exercise : Form
{
    private Button btnSubmit;
    private TextBox txtEmployeeName;

    private void InitializeComponent()
    {
        btnSubmit = new Button();
        btnSubmit.Text = "Submit";
        btnSubmit.Location = new Point(100, 40);

        txtEmployeeName = new TextBox();
        Point pt = btnSubmit.Location;

        txtEmployeeName.Location = new Point(pt.X, pt.Y + 32);

        Controls.Add(btnSubmit);
        Controls.Add(txtEmployeeName);
    }

    public Exercise()
    {
        InitializeComponent();
    }
}

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

This would produce:

Location

The Point structure provides other constructors you can use for the location of a control.

 

The Size of a Control

 

Introduction

The distance from the left border to the right border of a control is referred to as its width property. In the same way, the distance from the top to the bottom borders of a control is its height value. This can be illustrated as follows:

The location and dimension of a control

The combination of the width and the height of a control is referred to as its size. If you add a control to a form, it assumes a default size.

To specify the size of a control during design, access its Properties window:

  • Click the Size field and enter two numbers separated by a comma
  • Alternatively, expand the Size field, click Width and type a value; click Height and type a value

Programmatically Specifying the Size of a Control

To support the size of an object, the System.Drawing namespace defines the Size structure. There are four characteristics that define a Size value: its location and its dimensions. A Size value must have a starting point (X, Y) just as the Point object was illustrated earlier. The width is the distance from the left to the right borders of a Size object. The height represents the distance from the top to the bottom borders of a Size value:

Size Representation

To assist you with sizes, the Size structure provides the following constructor:

public Size(int width, int height);

Using this constructor, to programmatically specify the size of a control, assign a Size value to its Size property. 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(100, 40);
        btnSubmit.Size = new Size(80, 32);

        Controls.Add(btnSubmit);
    }

    public Exercise()
    {
        InitializeComponent();
    }
}

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

You can also define a Size object using a Point value. To support this, the Size structure is equipped with the following constructor:

public Size(Point pt);

After declaring a variable with this constructor, you can access its Width and Height properties to complete the definition of the Size object. If you already have the size of an object, you may only want to specify the dimensions of the variable. To do this, you can use the 

Besides the Size, the System.Drawing namespace also provides the SizeF structure. It uses the same properties as Size except that its members float types.

To retrieve the dimensions of a control, you can get its Size property and assign it to a Size object.

The Rectangular Location and Size of a Control

The combination of the location and size of an object is represented as a rectangle: a geometric figure with four sides. To support this figure, the System.Drawing namespace provides the Rectangle and the RectangleF structures. A rectangle can be represented as follows:

Like every geometric representation in your program, a rectangular figure is based on a coordinate system whose origin is located on a top-left corner. The object that "owns" or defines the rectangle also owns this origin. For example, if the rectangle belongs to a control that is positioned on a form, then the origin is on the top-left corner just under the title bar of the form, provided the form has a title bar.

To completely represent it, a rectangle is defined by its location and its dimensions. The location is defined by a point on the top-left corner of the rectangle. The distance from the left border of the object that owns the rectangle to the left border of the rectangle is represented by a property called Left. The distance from the top border of the object that owns the rectangle to the top border of the rectangle is represented by a property called Top. The distance from the left to the right borders of the rectangle is represented by a property called Width. The distance from the left to the right borders of the rectangle is represented by a property called Height. The distance from the left border of the object that owns the rectangle to the right border of the rectangle is represented by a property called Right. The distance from the top border of the object that owns the rectangle to the bottom border of the rectangle is represented by a property called Bottom. Based on this, a rectangle can be illustrated as follows:

Rectangle Representation

 

To create a rectangle, you must provide at least its location and dimensions. The location can be represented by a Point value and the dimensions can be represented with a Size value. Based on this, you can use the following constructor to declare a Rectangle variable:

public Rectangle(Point location, Size size);

This constructor requires that you define a Point and a Size in order to use it. If instead you know the integer values of the location and dimensions, you can use the following constructor to declare a Rectangle object:

public Rectangle(int x, int y, int width, int height);

At any time, you can access or retrieve the characteristics of a Rectangle object as illustrated in the above picture from its properties. You use the same names we used in the picture.

Besides the Rectangle structure, the System.Drawing namespace provides the RectangleF structure that uses the same definition as Rectangle, except that it is defined with float values instead of integers.

The be able to recognize the location and the size of a control, the Control class is equipped with a property named Bounds. This property is of type Rectangle represented by the property. Therefore, at any time, to get the location and the size of a control, you can call its Bounds property, which produces a Rectangle value.

Techniques of Visually Resizing a Control

 

Introduction 

All graphical controls, including the form, can be resized using guiding mouse cursors or the keyboard. To resize a control, first select it. Except for the form, whenever a control is selected, there are eight handles around it. To resize the control, position your mouse on one of the handles. The mouse pointer will change, indicating in what direction you can move to resize the control.

Cursor Role
Mouse Moves the seized border in the North-West <-> South-East direction
Shrinks or heightens the control
Moves the seized border in the North-East <-> South-West direction
Narrows or enlarges the control


Before resizing a control, as mentioned already, first select it. To enlarge a control:

  • Position the mouse on the right (or the left) handle. Then click and drag in right (or left) direction. Once you get the desired width, release the mouse
  • Press and hold Shift. Then press the right arrow key as many times as you want. Once you get the desired width, release Shift

To narrow a control:

  • Position the mouse on its right (or its left) handle. Then click and drag in the left (or the right) direction. Once you get the desired width, release the mouse
  • Press and hold Shift. Then press the left arrow key as many times as you want. Once you get the desired width, release Shift

To heighten a control:

  • Position the mouse on its top (or its bottom) handle. Then click and drag in the top (or the bottom) direction. Once you get the desired width, release the mouse
  • Press and hold Shift. Then press the up arrow key as many times as you want. Once you get the desired width, release Shift

To shrink a control:

  • Position the mouse on its top (or its bottom) handle. Then click and drag in the bottom (or the top) direction. Once you get the desired width, release the mouse
  • Press and hold Shift. Then press the down arrow key as many times as you want. Once you get the desired width, release Shift

The Width and Height of a Control

Imagine you have added three controls to your form and, after spending some time designing them, they appear as follows:

Dimensions

The dimensions of the controls are not set professionally. As seen above, you can resize by dragging their borders but this might take a while if you want them to have the same width, the same height, or both the same height and width. The dimensions of a control or a group of controls are carried by a Size value.

At design time, to change the dimensions of a control, first click it. Then, in the Properties window, change the values of its Size property.

To change the dimensions of a group of controls, first select them. Then, in the Properties window, change the values of the Size field. The new value would be applied to all selected controls. Alternatively, the Form Designer provides tools to automatically do this for you.

To synchronize the widths of a group of controls, first select them. Then, on the Layout toolbar or on the Format group of the main menu, select:

Button Name Format
Make Same Width Make Same Width Make Same Size -> Width

Result: All controls, except for the base control (the control that has the dark handles), will be resized horizontally so they have the same width as the base control:

The top control is used as reference
A form with some controls selected using a fake rectangle => A form where a group of controls has been configured to have the same width with controls selected using a fake rectangle
The middle control is used as reference
=> A form where a group of controls has been configured to have the same width with controls selected at random
The bottom control is used as reference
A form with controls selected at random

To set the same height to a group of controls, first select them. Then, on the Layout toolbar or on the Format group of the main menu, select:

Button Name Format
Make Same Height Make Same Height Make Same Size -> Height

Result: All controls, except for the base control (the control that has the dark handles), will be resized vertically so they have the same height as the base control:

The top control is used as reference
A form with some controls selected using a fake rectangle =>
The middle control is used as reference
A form with controls selected at random =>
The bottom control is used as reference
=>

To set the same width and the same height to a group of controls, first select them. Then, on the Layout toolbar or on the Format group of the main menu, select:

Button Name Format
Make Same Size Make Same Size Make Same Size -> Both

Result: The Form Designer will calculate the sum of the heights of all controls and find their average height (AvgHeight). It will also calculate the sum of the widths of all controls and find their average width (AvgWidth). These averages will be applied to the height and the width respectively of each control:

=>
=>
=>
 

Practical LearningPractical Learning: Setting the Locations and Sizes of Controls

  1. To create a new application, on the main menu, click File -> New -> Project...
  2. In the Templates list, click Windows Application
  3. In the Name box, replace the content with Rectangle2 and press Enter
  4. From the Toolbox and from what we learned in the previous lesson, add four labels, four text boxes, and two buttons to the form
  5. Based on what we have reviewed so far, design the form as follows:
     
    The Calculate Form
  6. To test the application, on the Standard toolbar, click the Start Without Debugging button Start Without Debugging
     
    The Calculate Application
  7. While the form is displaying, drag its right border to widen it. Also drag its bottom border to heighten it
     
    The form resized by the user
  8. Close the form and return to your programming environment
  9. Save all

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;
    }
}

Text Align

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

Anchor

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:
     
    Calculate
  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:
     
    Anchor
  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:

Dock

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:

Dock

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

Aesthetic Aspects of a Control

 

Background Color

Controls used on Microsoft Windows are painted using a color known as Control. If you don't like the default color that paints the background of a control, you can access the BackColor field of the Properties window:

Back Color

You can then select one of the preset colors from 3 windows represented with tabs:

Back Color

As you can see, the System and the Web tabs provide colors by name. All regular names of colors of the English language are represented. If you have done Windows programming before, you may recognize the names of colors in the System tab because they are the same names you would see in Control Panel, except that the names are in one word. If you have done web development before, you may recognize the names because they are the same defined by Netscape. The names in both the System and the Web tabs are defined in an enumeration called Color.

If you are not familiar with the names of colors, you can visually select a color in the Custom tab.

To programmatically specify the background color of a control, access its BackColor property and assign it the desired member of the Color enumeration. Here is an example:

public class Exercise : Form
{
    private Button btnSubmit;
    
    private void InitializeComponent()
    {
        btnSubmit = new Button();
        btnSubmit.Text = "Submit";
        btnSubmit.BackColor = Color.Aquamarine;

        Controls.Add(btnSubmit);
    }
}

Practical LearningPractical Learning: Changing the Background Color of a Control

  1. On the form, click the bottom panel
  2. In the Properties window, click BackColor and click its arrow
  3. Click the Custom tab and click the color at 3rd column - 2nd row:
     
    A control with a new background color The result of a control with a new background color
  4. Execute the application to test it
  5. Close the form and return to your programming environment

Background Image

Instead of a color, you may want to fill the control with a picture. To do this, you can access the control's BackgroundImage property. This provides an ellipsis button you can use to locate and select the desired picture.

Border Style

Some controls display a border when they are drawn and some others don't. Consider the following:

Some of these controls allow you to specify a type of border you want to show surrounding the controls. This characteristic is controlled by the BorderStyle property, which is based on BorderStyle enumerator. Its members are:

Value Example
Fixed3D
FixedSingle
None

To programmatically specify the border style of a control, access its BorderStyle property and assign it the desired BorderStyle member. Here is an example:

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

public class Exercise : Form
{
    private Panel pnlViewer;

    private void InitializeComponent()
    {
        pnlViewer = new Panel();
        pnlViewer.BorderStyle = BorderStyle.Fixed3D;
        pnlViewer.BackColor = Color.LightBlue;
        Controls.Add(pnlViewer);
    }

    public Exercise()
    {
        InitializeComponent();
    }
}

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

API Characteristics of Controls

 

Tab Ordering

A user can navigate through controls using the Tab key. When that key has been pressed, the focus moves from one control to the next. By their designs, not all controls can receive focus and not all controls can participate in tab navigation. Even controls that can receive focus must be primarily included in the tab sequence.

At design time, the participation to tab sequencing is controlled by the Boolean TabStop property in the Properties window. Every visual control that can receive focus is already configured to have this property set to True. If you want to remove a control from this sequence, set its TabStop value to False.

If a control has the TabStop property set to True, to arrange the navigation order of controls, you have two main options. At design time, you can click a control on the form. Then, on the Properties window, change the value of its TabIndex field. The value must be a positive short integer.

The best and easiest way to arrange the tab sequence of controls is to manage it visually. To do this, first display the form. Then, on the main menu, click View. This causes a number to be positioned on every control of the form. Here is an example:

Tab Order

To arrange the sequence any way you like, click each control once in the desired order. Normally, static controls (such as the label, the picture box, the panel, etc) never receive focus when the application is running; therefore, you can skip such controls.

Practical LearningPractical Learning: Setting the Tab Order of Controls

  1. Click anywhere in the form
  2. On the main menu, click View -> Tab Order
  3. On the form, click, in the following order, the text box on the right side of Length, the text box on the right side of Height, the Calculate button, and the Close button
     
  4. Press Esc to dismiss the Tab Order tool
  5. On the form, click the text box on the right side of Perimeter:
  6. In the Properties window, set the TabStop to False
     
  7. In the same way, set the TabStop property of the text box on the right side of Area: to False
  8. Execute the application
  9. Press Tab a few times and observe the behavior
  10. Close the form and return to your programming environment

Control's Visibility

A control is referred to as visible if it can be visually located on the screen. A user can use a control only if he or she can see it. As a programmer, you have the role of deciding whether a control must be seen or not and when. The visibility of an object is controlled by the its Visible property. This is a Boolean property.

At design time, when you add a control to a parent, it is visible by default. This is because its Visible property is set to True in the Properties window. In the same way, if you programmatically create a control, by default, it is made visible once you add it to its parent's Controls property.

If you don't want a control to primarily appear when the form comes up, you can either set its Visible property to False or set its parentís visible property to False. Equivalently, at run time, to hide a control, assign a False value to either its Visible property or its parentís Visible property. Keep in mind that when a parent gets hidden, it also hides its children. On the other hand, a parent can be made visible but hide one or some of its children.

To programmatically check whether a control is visible at one time, apply a conditional statement (if or while) to its Visible property and check whether its value is true or false.

Control's Availability

For the user to use a control, it must allow operations on it. For example, if a control is supposed to receive text, the user can enter characters in it only if this is made possible. To make a control available to the user, the object must be enabled. The availability of an object is controlled by the Boolean Enabled property.

By default, after adding a control to a form, it is enabled and its Enabled property in the Properties window is set to True. An enabled control displays its text or other characteristics in their normal settings. If you want to disable a control, set its Enabled property to False. In the following picture, a text box and a button are disabled:

Enabled

To programmatically find out whether a control is enabled or not, check its Enabled property.

 
 

Home Copyright © 2008-2009, yevol.com