Home

Introduction to Windows Controls

   

Control Addition

 

Visual Control Addition

To add a control to your application, you can select it from the Toolbox and click the desired area on the form. Once added, the control is positioned where your mouse landed. In the same way, you can add other controls as you judge them necessary for your application. Here is an example of a few controls added to a form:

A form equipped with various controls

Alternatively, to add a control, you can also double-click it from the Toolbox and it would be added to the top-left section of the form.

If you want to add a certain control many times, before selecting it on the Toolbox, press and hold Ctrl. Then click it in the Toolbox. This permanently selects the control. Every time you click the form, the control would be added. Once you have added the desired number of this control, on the Toolbox, click the Pointer button to dismiss the control.

Practical LearningPractical Learning: Using the Toolbox

  1. To create a new application, on the main menu, click File -> New Project...
  2. In the middle list, click Windows Forms Application
  3. Set the Name to Windows1 and click OK
  4. On the main menu, click View -> Toolbox.
    Position the mouse on the Toolbox word and wait for the Toolbox to expand
  5. Click the Label button Label and position the mouse on the form
     
    Form Design
  6. Click
  7. To add another control, position the mouse again on the Toolbox word until the Toolbox has expanded
  8. Find and double-click the TextBox button TextBox
  9. To use a hidden area of the form, position the mouse on the Toolbox word. When the Toolbox has expanded, click the Auto Hide button
  10. On the Toolbox, click the TreeView button Tree View and click the left section of the form
  11. After using the Toolbox, to hide it, click the Auto Hide button
  12. To execute the application, on the main menu, click Debug -> Start Without Debugging
  13. After using it, close the form and return to your programming environment

Copying a Control

We mentioned earlier how you could add a control many times. An alternative is to copy a control. To do this, on the form:

  • Right-click the control and click Copy. Right-click another area of the form and click Paste
  • Click (once) the control you want to copy
     
    Copying a Control

    Press and hold Ctrl. Then drag the selected control to another area of the form. The mouse cursor would display a + plus indicating that the control is being duplicated:
     


    Once you get to another area of the form, release the mouse and Ctrl

You can use these two techniques to copy a group of controls.

Dynamic Control Creation

 

Introduction

The objects used in a Windows application are defined in various assemblies. To add one of these controls to your application, you must first know the name of its class. With this information, you can declare a variable of its class. For example, a command button is an object of type Button that is based on the Button class. The Button class is defined in the System::Windows::Forms namespace of the System.Windows.Forms.dll assembly. Based on this, to create a button, you can create a handle to Button. Here is an example:

#pragma once

using namespace System;
using namespace System::Windows::Forms;

public ref class CFundamentals : public Form
{
	Button ^ btnSubmit;

public:
	CFundamentals(void);
};

After declaring the variable, you can use the gcnew operator to allocate memory for it:

CFundamentals::CFundamentals(void)
{
	btnSubmit = gcnew Button;
}

This is also referred to as dynamically creating a control. After declaring the variable and allocating memory for it, the control is available but doesn't have a host, which makes it invisible. Remember that the controls are positioned on a host like a form. The Form class itself contains a member variable named Controls. This member holds a list of the objects that are placed on a form. To specify that a control you have instantiated must be positioned on a for, the Controls member has a method named Add. Therefore, to make an object part of the form, pass its variable to the Add() method. Here is an example:

CFundamentals::CFundamentals(void)
{
	btnSubmit = gcnew Button;
	
	this->Controls->Add(btnSubmit);
} 

These two techniques of visual addition of objects and dynamic creation are the most used to add Windows controls to an application. The Windows controls are also called components.

Initializing the Components

Because there can be many controls used in a program, instead of using the constructor to initialize them, Visual Studio 2005 standards recommends that you create a method called InitializeComponent to initialize the various objects used in your application. Then simply call that method from the constructor of your form. This would be done as follows:

Header File: Fundamentals.h
#pragma once

#using <System.dll>
#using <System.Windows.Forms.dll>

using namespace System;
using namespace System::Windows::Forms;

public ref class CFundamentals : public Form
{
    Button ^ btnSubmit;

public:
    CFundamentals(void);
    ~CFundamentals();

private:
    void InitializeComponent();
};
Source File: Fundamentals.cpp
#include "Fundamentals.h"

CFundamentals::CFundamentals(void)
{
    InitializeComponent();
}

void CFundamentals::InitializeComponent()
{
    btnSubmit = gcnew Button;

    this->Controls->Add(btnSubmit);
}

CFundamentals::~CFundamentals()
{
}
Source File: Exercise.cs
#include <windows.h>
#include "Inventory.h"

int  APIENTRY WinMain(HINSTANCE hInstance,
		     HINSTANCE hPrevInstance,
		     LPSTR lpCmdLine,
		     int nCmdShow)
{
    Application::Run(gcnew CFundamentals());
    return 0;
}

This would produce:

Notice that the control is created in the InitializeComponent() method.

Components Tracking on an Application

As you add and remove components on an application, you need a way to count them to keep track of what components and how many of them your application is using. To assist you with this, the .NET Framework provides a class called Container. This class is defined in the ComponentModel namespace that is itself part of the System namespace. To use a variable of this class in your application, declare a handle to Container. Because no other part of the application is interested in this variable, you should declare it private. This can be done as follows:

#pragma once

#using <System.dll>
#using <System.Windows.Forms.dll>

using namespace System;
using namespace System::Windows::Forms;

public ref class CFundamentals : public Form
{
private:
	Button ^ btnSubmit;
	System::ComponentModel::Container ^ components;

public:
	CFundamentals(void);
	~CFundamentals();

private:
	void InitializeComponent();
};

After this declaration, the compiler can keep track of the components that are part of the form.

Control Derivation

If you are using a .NET Framework control, you must know the name of the class on which the control is based (and each control is based on a particular class). If you have examined the types of classes available but none implements the behavior you need, you can first locate one that is close to the behavior you are looking for, then use it as a base to derive a new class.

To derive a class from an existing control, you can use your knowledge of C++ inheritance to derive a new class. Here is an example:

public ref class Numeric : public System::Windows::Forms::TextBox
{
};

If you want to perform some early initialization to customize your new control, you can declare a constructor. Here is an example:

public ref class Numeric : public System::Windows::Forms::TextBox
{
public:
	Numeric() { }
};

Besides the constructor, in your class, you can add the member variable and methods you see fit. You can also use it to globally set a value for a member variable of the parent class. Once the control is ready, you can dynamically use it like any other control. Here is an example:

Header File: Fundamentals.h
#pragma once

#using <System.dll>
#using <System.Windows.Forms.dll>

using namespace System;
using namespace System::Windows::Forms;

public ref class Numeric : public TextBox
{
public:
	Numeric() { }
};

public ref class CFundamentals : public Form
{
private:
	Numeric ^ txtBox;
	System::ComponentModel::Container ^components;

public:
	CFundamentals(void);
	~CFundamentals();

private:
	void InitializeComponent();
};
Source File: Fundamentals.cpp
#include "Fundamentals.h"

CFundamentals::CFundamentals(void)
{
    InitializeComponent();
}

void CFundamentals::InitializeComponent()
{
    txtBox = gcnew Numeric();
    this->Controls->Add(txtBox);
}

CFundamentals::~CFundamentals()
{
}
Source File: Exercise.cpp
#include <windows.h>
#include "Fundamentals.h"

int  APIENTRY WinMain(HINSTANCE hInstance,
		     HINSTANCE hPrevInstance,
		     LPSTR lpCmdLine,
		     int nCmdShow)
{
    Application::Run(gcnew CFundamentals());
    return 0;
}

This produce:

Fundamentals

 

Control Selection

 

Introduction

When designing an application, you will manipulate the windows controls on a form. After adding a control to a form, before performing any operation on that control, you must first select it. You can also manipulate many controls at the same time. To do that, you will have to select all those controls.

Single Control Selection

To select one 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:

After selecting a control, you can manipulate it or change its characteristics, also called properties.

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 square handles around but its handles are white while the others are black. 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:

 

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.

 
 
 

The Properties Window

 

Introduction

Like the classes we have seen in the previous lessons, the objects of an application use characteristics that are defined are properties. A property is a piece of information that characterizes or describes a control. It could be related to its location or size. It could be its color, its identification, or any visual aspect that gives it meaning. The properties are primarily created as we reviewed in the previous lesson. Once the properties have been defined for a control, you can customize them when using a control on your application. The properties of an object can be changed either at design time or at run time. You can also manipulate these characteristics both at design and at run times. This means that you can set some properties at design time and some others at run time.

To manipulate the properties of a control at design time, first select it on the form. While a control is selected, use the Properties window to manipulate the properties of the control at design time. To access the Properties window if it is not visible:

  • On the main menu, you can click View -> Properties Window
  • On the form, you can right-click anything (either the form itself or any control positioned on it) and click Properties
  • The shortcut to display the Properties window is F4

Description

The Properties window uses the behaviors we reviewed in Lesson 1 about auto-hiding, docking, floating or tabbing the tools that accompany Microsoft Visual Studio 2010. This means that you can position it on one side of the screen or to have it float on the screen as you wish.

The Properties window is divided in 5 sections:

Sections of the Properties window

The Properties window starts on top with a title bar, which displays the string Properties. If the window is docked somewhere, it displays the Window Position Window Position, the Auto-Hide Auto-Hide, and the Close Close buttons on its right side. If the window is floating, it would display only the Close button.

Under the title bar, the Properties window displays a combo box. The content of the combo box is the name of the form plus the names of the controls currently on the form. Besides the technique we reviewed earlier to select a control, you can click the arrow of the combo box and select a control from the list:

Combo Box

Under the combo box, the Properties window displays a toolbar with 4 buttons.

Under the toolbar, the Properties window displays the list of properties of the selected control(s). On the right side, the list is equipped with a vertical scroll bar. The items in the Properties window display in a list set when installing Microsoft Visual Studio. In the beginning, you may be regularly lost when looking for a particular property because the list is not arranged in a strict order of rules. You can rearrange the list. For example, you can cause the items to display in alphabetic order. To do this, on the toolbar of the Properties window, click the Alphabetic button . To restore the list, you can click the categorized button Categorized.

Two lists share the main area of the Properties window. When the list of properties is displaying, the Properties button is clicked Properties. The second is the list of events. Therefore, to show the events, you can click the Events button . If the events section is displaying, to show the list of properties, you can click the Properties button Properties.

Under the list of properties, there is a long bar that displays some messages. The area is actually a help section that displays a short description of the property that is selected in the main area of the Properties window.

Accessing the Properties of One or More Controls

Based on a previous description,

  • If the Properties window is already displaying, to access the properties of the form or of a control, simply click it
  • If the Properties window is not displaying, to access the characteristics of an object, right-click either the form or a control on the form and click Properties
  • If the Properties window is not available, to access the characteristics, click either the form or a control on the form and, on the main menu, click View -> Properties

When a control is selected, the Properties window displays only its characteristics:

Properties

You can also change some characteristics of various controls at the same time. To do this, first select the controls on the form and access the Properties window:

Common properties of different controls

When various controls have been selected:

  • The Properties window displays only the characteristics that are common to the selected controls
  • The combo box on top of the Properties window is empty
  • Some fields of the Properties window appear empty because the various controls that are selected have different values for those properties

Practical LearningPractical Learning: Introducing the Properties Window

  1. Start Microsoft Visual C++
  2. To create a new application, on the main menu, click File -> New -> Project...
  3. In the New Project dialog box, make sure that Visual C++ Projects is selected in the Project Types list. In the middle list, click Windows Forms Application
  4. Replace the content of the Name box with Fundamentals1
     
    New Project
  5. Click OK
  6. Display the Toolbox. In the Toolbox, click the ProgressBar button ProgressBar and click the form
  7. Still in the Toolbox, click the Timer button Timer and click the form
  8. To add a new class to the project, on the main menu, click Project -> Add Class...
  9. In the Categories list, expand Visual C++ and click C++
  10. In the middle list of the Add Class dialog box, click C++ Class and click Add
  11. Set the Class Name to CTriangle and press Enter
  12. To see the properties of the form, on the main menu, click Window -> Form1.h [Design]
  13. Click the Class View tab and expand Fundamentals1
  14. To see the properties of a class, in Class View, click CTriangle
  15. To view the properties of a control, click the only control in the form and observe the Properties window
  16. To view the properties of another control, in the bar under the form, click the timer and observe the Properties window. Notice that it displays different properties

Properties Categories

Each field in the Properties window has two sections: the property's name and the property's value:
 

Properties Names and Values

The name of a property is represented on the left column. This is the official name of the property. Notice that the names of properties are in one word. You can use this same name to access the property in code.

The box on the right side of each property name represents the value of the property that you can set for an object. There are various kinds of fields you will use to set the properties. To know what particular kind a field is, you can click its name. To set or change a property, you use the box on the right side of the property's name: the property's value, also referred to as the field's value.

General Properties

 

Empty Fields

Property Empty  

By default, these fields have nothing in their properties. Most of these properties are dependent on other settings of your program. For example, you can set a menu property for a form only after you have created a menu.

To set the property on such a field, you can type in it or select from a list. 

 

Practical LearningPractical Learning: Setting Empty Properties

  1. On the form, click the only control (the ProgressBar control) to select it
  2. In the Properties window, click Tag, type ctlProgress and press Enter

Text Fields

There are fields that expect you to type a value. Most of these fields have a default value. Here is an example:

Property Text

To change the value of the property, click the name of the property, type the desired value, and press Enter. While some properties, such as the Text, would allow anything, some other fields expect a specific type of text, such as a numeric value.

Practical LearningPractical Learning: Setting a Text-Based Property

  • In the Properties window, click (Name), type pgrSeconds and press Enter

Boolean Properties

Boolean Fields

Some fields can have only a True or False value. To change their setting, you can either select from the combo box or double-click the property to toggle to the other value.

 

Expandable Fields

 
Expandable Fields

Some fields have a right-point button. This indicates that the property has a set of sub-properties that actually belong to the same property and are defined together. To expand such a field:

  • Click its right-point button
  • Double-click the property name

After expanding the field, it would be equipped with a down-right pointing arrow:

Expandable Fields

To collapse the field, click the – button. Some of the properties are numeric based, such as the Size. With such a property, you can click its name and type two numeric values separated by a comma. Some other properties are created from an enumerator or a class. If you expand such a field, it would display various options. Here is an example from the Font property:

Expandable Fields

With such a property, you should select from a list.

Practical LearningPractical Learning: Using Expandable Properties

  1. Click an empty area on the form
  2. In the Properties window, click the + button of Size
  3. Click Width and type 620
  4. Click Height and type 244
  5. On the form, click the ProgressBar
  6. In the Properties window, click Location
  7. Type 10,10 and press Enter
  8. Click Size, type 580, 32 and press Enter

Action Fields

Some fields would require a value or item that needs to be set through an intermediary action. Such fields display an ellipsis button Ellipsis . When you click the button, a dialog box would come up and you can set the value for the field.

Property Action
 

Numeric Properties

 

Introduction

A property is referred to as numeric if it must hold a number. To set it, you can click the name of the field and type the desired value. Here is an example:

Numeric Fields

If you type an invalid value, you would receive a message box notifying you of the error:

When this happens, click OK and type a valid value. If the value is supposed to be an integer, make sure you don't type it as a decimal number.

 

Practical LearningPractical Learning: Setting a Numeric Property

  1. On the form, click the ProgressBar control
  2. In the Properties window, click Value, type 65 and pres Enter

 

Date-Based Fields

Some fields expect you to enter a date. Here is an example:

Date-Based Field

You must type a valid date recognized by the operating system and the Regional and Language Settings in Control Panel. If you enter an invalid date, you would receive an error.

Enumerated Properties

 

Creating an Enumerated Property

As done for a regular data type, you can create a property that is an enumeration type. To create the property, start with the property keyword followed by the name of the enumeration and a name for the property. Here is an example:

using namespace System;

public enum class FlowerArrangement
{
	Basket  = L'A',
	Bouquet = L'U',
	Vase    = L'V',
	Bundle  = L'D',
	Any
};

public ref class CFlower
{
private:
    FlowerArrangement arng;
    double price;

public:
    property FlowerArrangement Arrangement;
    property double UnitPrice
    {
        double get() { return price; }
	void set(double p) { price = p; }
    }

    CFlower();
    ~CFlower();
};

CFlower::CFlower()
{
    Arrangement = FlowerArrangement::Any;
    UnitPrice   = 0.00;
}

CFlower::~CFlower()
{
}

void ShowFlower(CFlower ^ %one)
{
    Console::WriteLine(L"== Flower Order ==");
    Console::Write(L"Arrangement:  ");
    Console::WriteLine(one->Arrangement);
    Console::WriteLine(L"Price:        {0:C}", one->UnitPrice);
}

int main()
{
    CFlower ^ inspiration = gcnew CFlower;
	
    inspiration->Arrangement = FlowerArrangement::Bouquet;
    inspiration->UnitPrice   = 32.25;
	
    ShowFlower(inspiration);

    Console::WriteLine(L"");
    return 0;
}

This would produce:

== Flower Order ==
Arrangement:  Bouquet
Price:        $32.25

Press any key to continue . . .

As you can see, the property can be simple, read-only, write-only, or read/write.

List-Based Fields

To change the value of some of the fields, you would use their combo box to display the available values. After clicking the arrow, a list would display:

Property Selection

There are various types of list-based fields. Some of them display just two items. To change their value, you can just double-click the field. Some other fields have more than two values in the field. To change them, you can click their arrow and select from the list. You can also double-click a few times until the desired value is selected.

Area-Selection Fields

 

Some properties provide a window from where you can select the desired option. The field primarily displays the arrow of a combo box. To use the field, you click the arrow of the combo box and the window appears. Here are examples:

Alignment Back Color

After expanding the window, you can select the desired option. We will eventually review them. To programmatically use an enumerated property, type its name, followed by the :: operator, followed by the desired member of the enumeration and assign it to the property. Here is an example:

System::Void btnSubmit_Click(System::Object ^ sender, System::EventArgs ^ e)
{
	 ctlObject->Dock = DockStyle::Top;
}

Notice that you must know the name of the enumeration.

 
 
   
 

Previous Copyright © 2010-2012 FunctionX Next