Home

Introduction to Controls Containers

 

Overview of Parent Controls

 

Introduction

An application's object is programmatically referred to as a parent when it can host, hold, or carry other objects. For this reason, such a window is also referred to as a container. Although the first object that comes in mind is the form, this is not the only window that can act as parent.

The most common and the most widely used container is the form. In an application, a form can be configured to display like a regular dialog box, to become a Single Document Interface (SDI) or to participate in a Multiple Document Interface (MDI) application.

As mentioned already, there are two categories of controls: parents and children:

  • Parent: The child controls are positioned on a parent. To keep track of its children, a parent control has the Controls property. To create a control inside of a parent, a child control is added to the Controls property of the parent using the Controls::Add() method. When a parent control is created, it "gives life" to other windows that can depend on it. When a parent is destroyed, it also destroys its children. A parent control "carries", "holds", or hosts the controls positioned on it. When a parent is created, made active, or made visible, it gives existence and visibility to its controls. When a parent gets hidden, it also hides its controls. If a parent moves, it moves with its children. The controls keep their positions and dimensions inside the parent. The .NET Framework provides various parent controls.
  • Child: A window is referred to as child when its existence, its visibility, and its availability depend on another window referred to as its parent. Except for the forms, all of the Windows controls you will use in your applications are child controls and they must be parented by another control.

A child window can be a parent of another control. For example, the Standard toolbar of Visual Studio 2005 is the parent of the buttons on it. If you close or hide the toolbar, its children disappear. At the same time, the toolbar is a child of the application's form. If you close the application, the toolbar disappears, along with its own children. In this example, the toolbar is a child of the form but is a parent to its buttons.

Using a Parent Control

The type of container you want to use dictates how you acquire that container and add it to your application. Parent controls are somewhat divided in two broad categories: primary parents and intermediate parents. Once you have spent time with them, you will decide which one and when to use a particular control.

The primary type of control parenting you will use is a form. This is used as the platform for other controls, including other containers. Therefore, when you start your application, you first decide on the type of application. If you create a Windows Forms application, it gets automatically equipped with a form on which you can add child controls. When the application executes, it can present its contents to the user:

The form as a Parent

The second category of parents you will encounter qualify as intermediate. Theses containers cannot be the base of an application as does the form. These parents must be positioned on another parent first, then they can host their own children. An example of such a parent is the property page also called tab control. This control must be hosted by a form or dialog box. Here is an example of a property sheet (dialog box) that hosts three property pages (tab controls) and each property page hosts its own child controls:

Add Reference

Another type of intermediary container is the toolbar that is usually used to host various buttons.

This means that, in your application programming adventure, you will get acquainted with various types of containers and they are meant to play different roles. In some cases, two or more containers can be used to implement the same functionality. In some other cases, your choice will be narrowed based on your goal.

Introduction to Dialog Boxes

 

Description

A dialog box is a form defined with particular properties. Like a form, a dialog box is referred to as a container. Like a form, a dialog box is mostly used to host child controls, insuring the role of dialog between the user and the machine. Here is an example of a dialog box:

The Create New Folder dialog box

A dialog box has the following characteristics:

  • The only system button it is equipped with is Close System Close. As the only system button, this button allows the user to dismiss the dialog and ignore whatever the user would have done on the dialog box
  • It cannot be minimized, maximized, or restored. A dialog box does not have any other system button but Close
  • It is usually modal, in which case the user is not allowed to continue any other operation on the same application until the dialog box is dismissed
  • It provides a way for the user to close or dismiss it

Practical LearningPractical Learning: Introducing Dialog Boxes

  1. Start Microsoft Visual C++
  2. Create a Windows Forms Application named spr1 (spr stands for Solas Property Rental)
  3. From the Common Controls section of the Toolbox, click ListView and click the form
  4. While the list view is still selected, in the Properties window, change the following characteristics
    (Name): lvwProperties
    View: Details
  5. Still in the Properties window, click Columns and click its ellipsis button
  6. In the ColumnHeader Collection Editor, click Add
  7. In the right list, click Text and type Property #
  8. Click Add.
    In the right list, click Text and type Property Type
  9. Click Add.
    In the right list, click Text and type Bedrooms
  10. Click Add.
    In the right list, click Text and type Bathrooms
  11. Click Add.
    In the right list, click Text and type Monthly Rent
  12. Click OK
  13. Complete the design of the form as follows:
     
    Control Text Name
    ListView    
    Button New Property... btnNewProperty
    Button Close btnClose
  14. To add another form to the project, on the main menu, click Project -> Add New Item...
  15. In the middle list, click Windows Form
  16. Set the Name to PropertyEditor and press Enter

Dialog Box Creation

To create a dialog box, you start with a form, which you can get by creating a Windows Forms Application or deriving a class from Form. Here is an example:

#include <windows.h>

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

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

public ref class CExercise : public Form
{
public:
    CExercise()
    {
	InitializeComponent();
    }

    void InitializeComponent()
    {
        Text     = L"Domain Configuration";
        Width    = 320;
        Height   = 210;
        Location = System::Drawing::Point(140, 100);
        StartPosition = FormStartPosition::CenterScreen;
    }
};

int APIENTRY WinMain(HINSTANCE hInstance,
		     HINSTANCE hPrevInstance,
		     LPSTR lpCmdLine,
		     int nCmdShow)
{
    Application::Run(gcnew CExercise());

    return 0;
}

This would produce:

Starting a dialog box

Characteristics of Dialog Boxes

 

The Border Style of a Dialog Box

There are a few actions you can perform on a form to transform it into a dialog box; but normally, these are only suggestions, not rules. Based on the Microsoft Windows design and standards, to create a dialog box, you should set a form's FormBorderStyle property to FixedDialog. Setting this property changes the borders of the form to the standard borders of a dialog box (the border of a dialog box is thinner than that of a regular form). You can set this characteristic in the Properties window or programmatically. Here is an example:

public ref class CExercise : public Form
{
public:
    CExercise()
    {
	InitializeComponent();
    }

    void InitializeComponent()
    {
        Text     = L"Domain Configuration";
        Width    = 320;
        Height   = 210;
        Location = System::Drawing::Point(140, 100);
        StartPosition = FormStartPosition::CenterScreen;

	FormBorderStyle = System::Windows::Forms::FormBorderStyle::FixedDialog;
    }
};

The Minimize and Maximize Boxes

Besides taking care of the border, you should also set both the MinimizeBox and the MaximizeBox properties to False. This causes the window to display only the system Close button. You can set these characteristics in the Properties window or programmatically. Here is an example:

public ref class CExercise : public Form
{
public:
    CExercise()
    {
	InitializeComponent();
    }

    void InitializeComponent()
    {
        Text     = L"Domain Configuration";
        Width    = 320;
        Height   = 210;
        Location = System::Drawing::Point(140, 100);
        StartPosition = FormStartPosition::CenterScreen;

        FormBorderStyle = System::Windows::Forms::FormBorderStyle::FixedDialog;
        MinimizeBox = false;
        MaximizeBox = false;
    }
};

This would produce:

Practical LearningPractical Learning: Configuring a Dialog Box

  1. To transform the PropertyEditor form into a dialog box, in the Properties window, change its characteristics as follows:
    FormBorderStyle: FixedDialog
    StartPosition:        CenterParent
    MinimizeBox:         False
    MaximizeBox:        False
    ShowInTaskbar:    False
  2. Design the dialog box as follows:
     
    Solas Property Rental
    Control Text Name
    Label Property Type:  
    TextBox   txtPropertyType
    Button Cancel btnCancel
    Label Bedrooms:  
    TextBox   txtBedrooms
    Button OK btnOK
    Label Bathrooms:  
    TextBox   txtBatrooms
    Label Monthly Rent:  
    TextBox   txtMonthlyRent

Closing a Dialog Box

You should provide a way for the user to close the dialog box. A dialog box should have at least one button labeled OK. This button allows the user to acknowledge the message of the dialog box and close it by clicking the button. If the user press Enter, the dialog box should also be closed as if the OK button was clicked.

 
 
 

Accepting an Action

Often the user will be presented with various options on a dialog box and may be asked to make a decision on the available controls. Most of the time, if you are creating such a dialog box, besides the OK button, it should also have a Cancel button. The OK button should be the default so that if the user presses Enter, the dialog box would be closed as if the user had clicked OK. Clicking OK or pressing Enter would indicate that, if the user had made changes on the controls of the dialog box, those changes would be acknowledged and kept when the dialog box is closed and usually the changed values of the control would be transferred to another dialog box or form. Keep in mind that you are responsible for implementing this functionality.

To fulfill this functionality of the OK button, after adding it to a dialog box (or form), open the AcceptButton combo box in the Properties window for the form and select the name of the button.

Practical LearningPractical Learning: Accepting an Action

  1. Click an unoccupied area of the form
  2. In the Properties window, click the arrow of the AcceptButton field and select btnOK

Cancelling an Action

The Cancel button is used to allow the user to dismiss whatever changes would have been made on the controls of the dialog box. The dialog box should also be configured so that if the user presses Esc, the dialog box would be closed as if the user had clicked Cancel.

To fulfill this functionality of the Cancel button, after adding it to a dialog box (or form), open the CancelButton combo box in the Properties window for the form and select the name of the button.

Besides the OK and the Cancel buttons, a dialog box can be created with additional buttons such as Finish or Help, etc. It depends on its role and the decision is made by the application developer.

Practical LearningPractical Learning: Cancelling an Action

  1. In the Properties window, click the arrow of the CancelButton field and select btnCancel
  2. Display the first form

The Help Button

Besides the system Close button, if you are planning to provide help on a dialog box, you can equip it with a Help button. To support this, the Form class is equipped with a Boolean property named HelpButton. The default value of this property is false. In the Properties window, you can set it to True. If you are programmatically creating the dialog box, you can access this property and set its value to true. Here is an example:

public ref class CExercise : public Form
{
public:
    CExercise()
    {
	InitializeComponent();
    }

    void InitializeComponent()
    {
        Text     = L"Domain Configuration";
        Width    = 320;
        Height   = 210;
        Location = System::Drawing::Point(140, 100);
        StartPosition = FormStartPosition::CenterScreen;

        FormBorderStyle = System::Windows::Forms::FormBorderStyle::FixedDialog;
        MinimizeBox = false;
        MaximizeBox = false;

        HelpButton = true;
    }
};

This would produce:

When the user clicks the help button, the mouse cursor becomes equipped with a question mark. Here is an example:

You can then write code so that, when the user clicks a control on the dialog box, some guiding help is provided as a tool tip.

Modal and Modeless Dialog Boxes

 

Modal Dialog Boxes

There are two types of dialog boxes: modal and modeless.

A Modal dialog box is one that the user must first close in order to have access to any other framed window or dialog box of the same application. One of the scenarios in which you use a dialog box is to create an application that is centered around one. In this case, if either there is no other form or dialog box in your application or all the other forms or dialog boxes depend on this central dialog box, it must be created as modal. Such an application is referred to as dialog-based.

Some applications require various dialog boxes to complete their functionality. When in case, you may need to call one dialog box from another and display it as modal. Here is an example:

The Date and Time dialog box of WordPad is modal: when it is displaying, the user cannot use any other part of WordPad unless he or she closes this object first Modal

After creating a dialog used as an addition to an existing form or an existing dialog box, to call it as modal, use the ShowDialog() method.

Modeless Dialog Boxes

A dialog box is referred to as modeless if the user does not have to close it in order to continue using the application that owns the dialog box. A modeless dialog box has the following characteristics

  • It has a thin border
  • It can be neither minimized nor maximized. This means that it is not equipped with the Minimize or the Maximize buttons
  • It is not represented on the taskbar with a button
  • It must provide a way for the user to close it

Here is an example:
The Find (and the Replace) dialog box of WordPad (also the Find and the Replace dialog boxes of most applications) is an example of a modeless dialog box. If it is opened, the user does not have to close it in order to use the application or the document in the background. Modeless

Since the modeless dialog box does not display its button on the task bar, the user should know that the dialog box is opened. To make the presence of a modeless dialog box obvious to the user, it typically displays on top of its host application until the user closes it.

A modeless dialog box is created from a form but it should look like a regular dialog box or a tool window. Therefore, to create a modeless dialog box, set the FormBorderStyle property to an appropriate value such as FixedSingle, FixedToolWindow, Sizable or SizableToolWindow. Also, set its ShowInTaskbar property to False.

After creating the dialog box, to display it as modeless, call the Show() method. The fundamental difference between the ShowDialog() and the Show() methods is that the former displays a modal dialog box, which makes sure that the called dialog box cannot go in the background of the main application. By contrast, the Show() method only calls the dialog box every time it is requested. For this reason, it is up to you to make sure that the modeless dialog box always remains on top of the application. This is easily taken care of by setting the Boolean TopMost property of the form to True.

There are two main ways a normal modeless dialog box can be dismissed:

  • If the user has finished using it, he or she can close it and recall it at will
  • When the form or application that owns the modeless dialog box is closed, the form or application closes the modeless dialog if it is opened; this means that you don't need to find out whether a modeless dialog box is still opened when the application is being destroyed: either the user or the application itself will take care of closing it

An Application With Various Forms or Dialog boxes

When you create a Windows Forms Application, the starting form is made available to you. If one form is not enough for your application, you can add as many as necessary. To add (or to create) a (new) form, you have various options:

  • On the main menu, you can click Project -> Add New Item...

  • On the main menu, you can click File -> Add New Item...

  • In Solution Explorer, you can right-click the name of the project, position the mouse on Add, and click Add New Item...

In the Add New Item dialog box and in the Templates section, click Window Form (.NET), provide a name in the Name edit box then click Open.

If your application is using various forms and you want to display a particular one at design time:

  • In the Forms Designer, you can click the tab that corresponds to the desired form and that has [Design]
  • On the main menu, you can click Window and click the name of the form in the list under Close All Documents
  • In Solution Explorer, expand the Header Files node if necessary and double-click the name of the desired form that has the .h extension

If you visually add two (or more) forms to your application, you may need to link them, allow one to call the other. To do this, in the top section of the file, type #include followed by the name of the header file in which the form was defined. In the section where you want to access the form, declare a handle to the class of the form and use the gcnew operator to allocate memory for it. To display the other form, you can call its Show() method.

Practical LearningPractical Learning: Using Various Forms

  1. Right-click the body of the (first) form and click View Code
  2. In the top section of the file, under #pragma once, type #include "PropertyEditor.h"
    #pragma once
    
    #include "PropertyEditor.h"
    
    namespace spr1
    {
  3. Display the form again and double-click the New Property... button
  4. Implement the event as follows:
    System::Void btnNewProperty_Click(System::Object^  sender,
    				 System::EventArgs^  e)
    {
        Random ^ rnd = gcnew Random;
        PropertyEditor ^ dlgEditor = gcnew PropertyEditor;
    
        if( dlgEditor->ShowDialog() == ::DialogResult::OK )
        {
    	 ListViewItem ^ lvi =
    		lvwProperties->Items->Add(
    			rnd->Next(100000, 999999).ToString());
    	 lvi->SubItems->Add(dlgEditor->txtPropertyType->Text);
    	 lvi->SubItems->Add(dlgEditor->txtBedrooms->Text);
    	 lvi->SubItems->Add(dlgEditor->txtBathrooms->Text);
    	 lvi->SubItems->Add(dlgEditor->txtMonthlyRent->Text);
        }
    }
  5. Execute the application and click the New Property... button
  6. Create a property
     
  7. Press Enter
  8. Create a few more properties and press Enter each time
     
  9. Close it and return to your programming environment
 
 
   
 

Home Copyright © 2010-2012 FunctionX Next