Home

Characteristics of Windows Controls

   

Control Identification

 

Introduction

Most of the controls you will use to create your applications are defined in the .NET Framework and, as mentioned in the previous lesson, 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.

 

Practical LearningPractical Learning: Introducing Characteristics of Controls

  1. Start Microsoft Visual Studio
  2. To start a new program, on the main menu, click File -> New Project...
  3. In the middle list, click Windows Forms Application
  4. In the Name box, type Identification1 and click OK
  5. On the Toolbox, click the Auto Hide button
  6. On the Toolbox, click the Label control Label and click the form (no need for precision)
  7. On the Toolbox again, click the Label Label and click an empty area of the form (no need for precision)
  8. Once again, on the Toolbox, click Label Label and click an unoccupied area of the form (no need for precision)
  9. One more time, on the Toolbox, click Label Label and click an unoccupied area of the form (no need for precision)

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, directly or indirectly used 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 2005 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. Because the Win32 library was written in C, Visual C++ is the only programming environment of Visual Studio 2005 that directly understands Win32 without always needing to import a DLL of Win32. For example, in the previous lesson, you noticed that we used the window.h library and the WinMain() function without caring where they came from. Many other (unfortunately not all) Win32 functions can be easily used like that.

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 (IntPtr). 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. Here is an example:

Form1(void)
{
	InitializeComponent();
	this->Text = this->Handle.ToString();
}

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.

The Text of a Control

Some controls, as we will see, 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, it then has a Text property in the Properties window. After adding such a control to a form, its Text field would hold the same text as its name. At design time, to change the text of the control, 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. 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:

this->checkBox1->Text = DateTime::Today.ToString();

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:

The Name of a Control

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. You can also change the name of a control programmatically but you should avoid doing that unless you have a good reason to. If you want to change the name of a control, use the Properties window. To programmatically change the name of a control, access its Name property and assign a string, using the C++ rules of variable names. Here is an example:

this->checkBox1->Name = L"chkPepperoni";

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 the TextBox button TextBox
  3. Click the right section of the form four times (no need for precision)
  4. On the Toolbox, click the Pointer button Pointer
  5. On the form, click textBox1
  6. In the Properties window, click (Name) and type txtLength

Control Selection

 

Single Control Selection

If you visually add a control to a form (at design time), in order to perform any type of configuration on the control, you must first select it. Sometimes you will need to select a group of controls.

To select a control, if you know its name, you can click the arrow of the combo box in the top section of the Properties window and select it.

To select a control on the form, you can simply click it. A control that is selected indicates this by displaying 8 small squares, also called handles, around it. Between these handles, the control is surrounded by dotted rectangles. In the following picture, the selected rectangle displays 8 small squares around its shape:

Form 2

After selecting a control, you can manipulate it or change its characteristics, also called properties. To change some, if not most, of the characteristics of a control, you use the Properties window. When a control is selected, the Properties window displays only its characteristics.

Practical LearningPractical Learning: Naming Controls

  1. In the top combo box of the Properties window, select textBox2
     
    Properties Window: Control Selection
  2. Notice that it becomes selected in the form. In the Properties window, click (Name) and type txtHeight
  3. In the same way, select textBox3 and change its Name to txtPerimeter
  4. Select textBox4 and change its Name to txtArea

Multiple Control Selection

To select more than one control on the form, click the first. Press and hold either Shift or Ctrl, then click each of the desired controls on the form. If you click a control that should not be selected, click it again. After selecting the group of controls, release either Shift or Ctrl that you were holding. When a group of controls is selected, the last selected control displays 8 handles too but its handles are white while the others are black. In the following picture, a form contains four controls, three controls are selected:

Form 3

Another technique you can use to select various controls consists of clicking on an unoccupied area on the form, holding the mouse down, drawing a fake rectangle, and releasing the mouse:

Every control touched by the fake rectangle or included in it would be selected:

When various controls have been selected, the Properties window displays only the characteristics that are common to the selected controls.

Practical LearningPractical Learning: Selecting and Using Various Controls

  1. On the form, click one of the text boxes
  2. Press and hold Shift
  3. Click each of the other three text boxes. When the four text boxes have been selected, release Shift
  4. In the Properties window, click Text
  5. Type 0.00 and press Enter. Notice that the string in each text box has changed

Control Deletion

If there is a control on your form but you don't need it, you can remove it from the application. To delete a control, first select it and then click or press Delete. You can also right-click a control and click Cut. To remove a group of controls, first select them, then click or press Delete or right-click the selection and click Cut.

Moving a Control

When adding a control to a form, it assumes a position based on where the mouse landed when you clicked the form. Most of the time, that position will not be convenient. Moving a control consists of specifying its position by changing its previous left and top values. You can do this either graphically or programmatically.

To move a control graphically:

  • Position the mouse on the control until the cursor changes into a cross:
     

    Then click and drag left, right, up or down, until you get to the desired location
  • Click the control (once) to select it. Using your keyboard, press either the left, the up, the right, or the down arrow keys to move the control until you get the desired position

The Location of a Control

 

Introduction

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.

The distance from the control's left border to the parent's left border is referred to as the Left property. The distance from the control's top border to the parent's top border is referred to as the Top property. The Left and Top values are known as the control's location. This can be illustrated as follows:

The location of a control inside a parent window

When you click a control on the Toolbox and click its parent window, the Left and Top values are set where the mouse landed. One of the operations you will perform during design consists of correctly positioning your controls to give them a better location and take advantage of the form's real estate. Various options are available to do this. To assist you with setting control's location, the form designer draws aligned dots on the form, forming columns and rows.

Control Locking

In the next section we will review various ways of positioning controls on a parent. One technique we will review consists of moving one or more controls. In some cases, while working on one or more controls for better positioning, you may not want one particular control or a certain group of controls to be moved around. If you want to, you can "fix" a controls so that it cannot be moved (or resized) even if you click and start dragging it. This is referred to as locking the control or the group of controls.

To lock a control, click in on the form. Then, in the Properties window, set its Locked Boolean property to True. To lock a group of controls, first select them on the form. Then, in the Properties window, set the Locked Boolean property to True.

Control Moving

One of the techniques you can use to change the location of a control or a group of controls consists of moving it. To move one control, click and hold the mouse on it, then drag in the desired direction, and release the mouse. This technique allows you to move a control one unit at a time in either direction. You can also click the control, then press one of the arrow keys to move one unit at a time, either left to move the control left, up to move the control up, right to move the control in the right direction, or down to move the control down.

To move a control with more precision, click the control to select it, press and hold Ctrl, then click one of the arrow keys, either left to move the control left, up to move the control up, right to move the control in the right direction, or down to move the control down.

To move a group of controls, select them first. Then click and drag any area in the selection to the desired location. Alternatively, once you have  the controls, you can press one of the arrow keys to move the whole group.

When moving either a control or a group using either the mouse or the keyboard, the control or the group would follow the grids on the form and it can move only one grid mark at a time. This allows you to have a better alignment of controls. If you want to move the control or the group in smaller units than those of the grid, press and hold Ctrl. Then press one of the arrow keys. Once the control or the group is positioned to your liking, release the Ctrl key.

To programmatically move a control, which is equivalent to changing the values of the Left or the Top properties at run time, assign the desired respective values. If you set a negative value for the Left field, the left border of the control would be hidden. In the same way, a negative Top value would hide the top border of the control. Make sure you use valid integer values; otherwise you would receive an error when you compile the project.

The location of a control is also defined by its Location property.

 
 
 

Design Time Control Alignment

 

Introduction

During design, you may want to provide a good alignment of the controls to make the form appear more attractive and look professional. The Microsoft Visual Studio 2005 provides various tools to assist you with this. To start, you can first add one control on the form and position the control the way you want. Here is an example:

Once you have a control on your form, you can add another as we saw in the previous lesson. When adding another control, you can use the previous one as a reference to position the new one. To assist you with this, when moving the new control to position it, a guiding vertical would show you the alignment to follow with regards to an existing control. Here is an example:

Using this approach, once the control is aligned fine, you can release the mouse. There are various other techniques you can use to align the controls.

After adding a control to a form, when it is selected, a control may be surrounded by 8 small squares:

As we saw in the previous lesson, you can also select more than one control. When many controls are selected, you can then align them. To do this, you can use the Layout toolbar.

Control Centering Towards the Center of the Form

If you have a certain control on the form and want to position it exactly at equal distance between the left and the right borders of the form, select the control, then click the Center Horizontally button on the Layout toolbar Center Horizontally:

=>
 

Horizontal Alignment

Horizontal alignment affects controls whose distance from the left border of the parent must be the same. To perform this type of alignment, the Layout toolbar provides the necessary buttons. The same actions can be performed using menu items of the Format group on the main menu. The options are as follows:

Button Name Format Menu Description
Align Lefts Align Lefts Align -> Lefts All selected controls will have their left border coincide with the left border of the base control
Align Centers Align Centers Align -> Centers The middle handles of the selected controls will coincide with the middle handles of the base control
Align Rights Align Rights Align -> Rights All selected controls will have their right border coincide with the right border of the base control
 

Vertical Alignment

As seen above, the horizontal-oriented buttons allow moving controls left or right. Another option you have consists of moving controls up or down for better alignment. Once again you must first select the controls. Then on the Layout toolbar or the Format group of the main menu, use the following options:

Button Name Format Menu Description
Align Tops Align Tops Align -> Tops All selected controls will have their top border coincide with the top border of the base control but their left border would have the same distance with the left border of the parent
Align Middles Align Middles Align -> Middles The top handles of the selected controls will align vertically with the top handle of the base control
Align Bottoms Align Bottoms Align -> Bottoms All selected controls will have their bottom border coincide with the bottom border of the base control but their left border would have the same distance with the left border of the parent

Another valuable option you have consists of controlling the alignment of objects with regards to the extreme borders of controls of the selected group.

Control Centering Towards the Middle of the Form

You can also position one or more controls in the middle of the form. To do that, select the control, then click the Center Vertically button on the Layout toolbar Center Vertically:

Control Centering =>
 

Horizontal Spacing and Alignment

Suppose you have a group of horizontally aligned controls as follows:

Obviously the buttons on this form are not enjoying the most professional look. For one thing, the distance between the Continue and the Submit buttons is longer than the distance between the Submit and the Deny buttons. The Layout toolbar and the Format group of the main menu allow you to specify a better horizontal alignment of controls with regards to each other. The options available are:

Button Name Format
Make Horizontal Spacing Equal Make Horizontal Spacing Equal Horizontal Spacing -> Make Equal

Result: The Forms Designer will calculate the horizontal distances that separate each combination of two controls and find their average. This average is applied to the horizontal distance of each combination of two controls:

Aligned Controls => Increase Horizontal Spacing
Button Name Format
Increase Horizontal Spacing Increase Horizontal Spacing Horizontal Spacing -> Increase

Result: The Forms Designer will move each control horizontally, except the base control (the control that has white squares) by one unit away from the base control. This will be done every time you click the Increase Horizontal Spacing button or the Format -> Horizontal Spacing -> Increase menu item:

Selected Controls - Left Reference => Increase Horizontal Spacing
      
Selected Controls - Center Rerefence =>
      
Selected Controls - Right Reference =>

 

Button Name Format
Decrease Horizontal Spacing Decrease Horizontal Spacing Horizontal Spacing -> Decrease

Result: The Forms Designer will move each control horizontally, except the base control (the control that has darker handles) by one unit towards the base control. This will be done every time you click the Decrease Horizontal Spacing button or the Format -> Horizontal Spacing -> Decrease menu item:

Selected Controls - Left Reference =>
      
Selected Controls - Center Rerefence =>
      
Selected Controls - Right Reference
 
Button Name Format
Remove Horizontal Spacing Remove Horizontal Spacing Horizontal Spacing -> Remove

Result: The Forms Designer will move all controls (horizontally), except for the left control, to the left so that the left border of a control touches the right border of the next control:

Selected Controls - Left Reference => Remove Horizontal Spacing
 

Vertical Spacing and Alignment

Suppose you have a group of horizontally positioned controls as follows:

The text boxes on this form are not professionally positioned with regards to each other. Once again, the Layout toolbar and the Format group of the main menu allow you to specify a better vertical alignment of controls relative to each other. The options available are:

Button Name Format
Make Vertical Spacing Equal Make Vertical Spacing Equal Vertical Spacing -> Make Equal

Result: The Forms Designer will calculate the total vertical distances that separate each combination of two controls and find their average. This average is applied to the vertical distance of each combination of two controls:

=>
 
Button Name Format
Increase Vertical Spacing Increase Vertical Spacing Vertical Spacing -> Increase

Result: The Forms Designer will move each control vertically, except the base control (the control that has darker handles) by one unit away from the base control. This will be done every time you click the Increase Horizontal Spacing button or the Format -> Horizontal Spacing -> Increase menu item:

Selected Control - Top Reference => Increase Vertical Spacing
Selected Controls - Center Reference =>
Selected Controls - Bottom Reference =>
 
Button Name Format
Decrease Vertical Spacing Decrease Vertical Spacing Vertical Spacing -> Decrease

Result: The Forms Designer will move each control, except the base control (the control that has darker handles) by one unit towards the base control. This will be done every time you click the Decrease Horizontal Spacing button or the Format -> Horizontal Spacing -> Decrease menu item:

Selected Control - Top Reference =>
      
Selected Controls - Center Reference =>
      
Selected Controls - Bottom Reference
 
Button Name Format
Remove Horizontal Spacing Remove Vertical Spacing Vertical Spacing -> Remove

Result: The Forms Designer will move all controls vertically, except for the top control, to the top so that the top border of a control touches the bottom border of the next control towards the top:

Selected Control - Top Reference =>
  

Accessories for Measures and Dimensions

 

The Point

A control can be visually represented on the screen by a geometric point on a coordinate system. A point is a pixel on the monitor screen, on a form, or on any object of your application. A point is represented by its coordinates with regard to the object that "owns" the point:

Representation of a Point

To identify the concept of a point, the System::Drawing namespace provides the Point structure. 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.

The Size

To represent the size of something, the System::Drawing namespace defines the Size structure that is equipped with two main properties. 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 value. The Height property represents the distance from the top to the bottom borders of a Size value:

Size Representation

 

Based on this, to create a Size object, if you know only its location (X and Y), you can use 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 location of a Size object by other means, you may not be interested in (re)defining its location. In this case, you may only want to specify the dimensions of the variable. To do this, you can use the following constructor:

public:
    Size(int width, int height);

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

The Rectangle

A rectangle is a geometric figure that has four sides. To support this figure, the System::Drawing namespace provides the Rectangle and the RectangleF structures. A rectangle can be represented as follows:

Rectangle

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.

 
 
   
 

Previous Copyright © 2004-2010 FunctionX, Inc. Next