< C++ .NET WinForm, Dialog Box & Controls 2 | Main | C++ .NET WinForm, Dialog Box & Controls 4 >


 

 

Windows Form, Dialog Boxes and More Controls 3

 

 

 

 
  1. Setting Tab Ordering

  2. Using Common Dialog Boxes

  3. More About Controls

  4. Using the TreeView Control

  5. Using SplitContainer (previous version uses Splitter)

 

 

Setting Tab Ordering

 

You can use the Tab key to move from control to control on a form. By default, the order in which you move between controls follows the order in which they’re created, but you can impose your own order by assigning a zero-based value to the TabIndex property of any control. It isn’t an error for two controls to have the same TabIndex value, but the order in which they are selected will depend on the order in which they are displayed on the screen.

 

Setting controls tab ordering

 

Using Common Dialog Boxes

 

There are a number of dialog boxes that many programs need to use. Examples include the File Open and File Save dialog boxes, font pickers, and color choosers. Windows has always provided a set of these common dialog boxes, and they are available for you to use with Windows Forms. Using the common dialog boxes has several advantages:

 

 

The following table lists the classes derived from System.Windows.Forms.CommonDialog.

 

Class

Description

ColorDialog

Represents a common dialog box that displays available colors along with controls that enable the user to define custom colors.

FileDialog

Displays a dialog box from which the user can select a file.

FolderBrowserDialog

Prompts the user to select a folder. This class cannot be inherited.

FontDialog

Prompts the user to choose a font from among those installed on the local computer.

PageSetupDialog

Enables users to change page-related print settings, including margins and paper orientation. This class cannot be inherited.

PrintDialog

Allows users to select a printer and choose which portions of the document to print.

 

Table 2

 

All these dialog boxes inherit from CommonDialog, which provides protected members that are used internally by inherited classes; you don’t use such members in your code. These classes are used just like any other dialog box: You create a dialog box object, set its properties, and then display it by calling ShowDialog. The following exercise shows you how to use a Font dialog box to choose a font and then use it to set the font of the label control on the form.

 

28.     Open the CppForm project if it isn’t already open.

 

29.     Add a Font member to the Form1 class (Form1.h).

private: System::Drawing::Font^ labelFont;

 

 Adding Font member data manually to the source code

 

You have to give the fully qualified name of the Font class, or else it will conflict with the form’s Font property.

 

30.     Add a new item to the File menu with the Text Choose Font..., its Name fontDlgMenuItem, and move it above the Exit menu item.

 

Adding a new item to the File menu with the Text Choose Font...

 

31. The Font object is going to be used to set the font of the label on the main form. To do this, you need to create a Font object and associate it with the Font property of the label. Place the following code in the Form1 class constructor, making sure that it comes after the call to InitializeComponent as shown below. Notice how the pointer to the Font is stored away in the labelFont member.

 

// Set the font

labelFont = gcnew System::Drawing::Font(L"Verdana", 16, FontStyle::Italic);

label1->Font = labelFont;

label1->ForeColor = Color::Black;

 

Creating a Font object and associate it with the Font property of the label source code

 

32. As you’ve done with other menu items, add a handler for the new menu item by double clicking it. Edit the handler function so that it creates and displays a FontDialog:

private: System::Void fontDlgMenuItem_Click(System::Object^  sender, System::EventArgs^  e)

{

   FontDialog^ fd = gcnew FontDialog();

   fd->Font = labelFont;

 

   if (fd->ShowDialog() == System::Windows::Forms::DialogResult::OK)

   {

         MessageBox::Show(fd->Font->Name, L"Name was...");

         labelFont = fd->Font;

         label1->Font = labelFont;

    }

}

 

Adding a handler for the new menu item

 

The code creates a FontDialog object and then initializes it with the current font represented by labelFont. ShowDialog displays the dialog box, and if it returns a DialogResult::OK status, it sets the font of the label to reflect the user’s choice. The Label control will immediately update itself to use the new font.

 

33.     Build and run the code, and you should be able to display a Font selection common dialog box, as shown in the following figure.

 

Invoking Font Common Dialog box through menu item

 

Font Common Dialog Box in action

 

 

Message box for the selected font

 

More About Controls (.NET 2.0)

 

The System::Windows::Forms namespace provides you with a large number of controls that you can use to build program GUIs. The following table lists the major controls in the namespace. Keep in mind there are more controls for .NET framework newer version and also obsolete one. This based on the .NET 2.0. Currently the version is .NET 3.0, so get the latest version in order to have more controls. There are also third parties WinForm controls.

 

Control

Description

Button

A Windows button control.

CheckBox

A Windows check box control.

CheckedListBox

A ListBox control with a CheckBox on each item.

Clipboard

Not strictly a control, but a class that lets you interact with the Windows clipboard.

ComboBox

A Windows combo box.

Cursor

Represents the image used for the mouse cursor.

DataGrid

A grid control that works with ADO.NET datasets

DateTimePicker

A control that lets the user select a date and time.

DomainUpDown

An up-down control that displays strings.

ErrorProvider

Works with other controls to show that a control has errors associated with it.

Help

Encapsulates the HTML Help engine.

ImageList

A control that manages a list of images; frequently used with toolbars and other controls that need multiple images.

Label

A Windows label control.

LinkLabel

A label that can display hyperlinks.

ListBox

A Windows list box control.

ListView

Displays a list of items in one of four views: small icon, large icon, list, and details. Think of the right panel of Windows Explorer.

Menu

The base class for all menu types.

MessageBox

Represents a Windows message box.

MonthCalendar

Lets the user select a date using a visual display.

NumericUpDown

An up-down control that displays numbers.

Panel

A control that can contain other controls.

PictureBox

A control that can display images from image files.

ProgressBar

A control that displays the progress of an operation.

PropertyGrid

A control that lets you browse the properties of an object.

RadioButton

A Windows radio button.

RichTextBox

A TextBox control that supports formatting and other word processing features.

ScrollBar

A control that encapsulates a standard Windows scrollbar. If you want a control to act as a slider, use a TrackBar instead of a ScrollBar.

SplitContainer

A control for resizing docked controls at run time.

StatusStrip

A control that represents the status bar at the bottom of a window.

TabControl and TabPage

Controls that let you create and manage tabbed dialog boxes.

TextBox

A Windows textbox control.

Timer

A control that implements a timer.

ToolBar

A control that implements a standard toolbar.

TrackBar

A control that implements a slider.

TreeView

A control for displaying a hierarchical collection of items as a tree. Think of the left panel of Windows Explorer.

 

Table 3

 

Using the TreeView Control

 

Tree view controls, which display a hierarchy of items as a tree, will be familiar to anyone who has used Windows Explorer. The System::Windows::Forms:TreeView class wraps the Windows tree view control and makes it simple to create and manipulate trees of items. Let’s look at the methods and properties provided by the class, and then the exercise will show you how to create and use a TreeView. A tree view is formed of nodes, represented by TreeNode objects, which exist in a parent/child relationship. Root nodes have no parent, and it’s possible for a TreeView to contain more than one root node. The following figure shows a typical TreeView.

 

Windows explorer TreeView control

 

In this example, Desktop is the root node. Each node can have a label and an icon associated with it, and each node might have lines joining it to sibling and parent nodes. If a node has child nodes, it might display a button next to it that shows a plus sign (+). Clicking the plus sign or double-clicking the node label or icon will expand the tree to show the child nodes, in which case the plus sign changes to a minus sign. Nodes can have a pair of images associated with them, which are used to show expanded and collapsed nodes. Creating a TreeView is a matter of setting the control’s properties and then creating the TreeNode objects and linking them to form the tree. Both the TreeView and TreeNode classes have a Nodes property that holds a collection of child nodes. TreeView controls are complex, so the class has a lot of properties, methods, and events; the most commonly used are summarized in the following tables.

 

Property

Description

BorderStyle

Represents the border style of the control. The default is Fixed3D.

CheckBoxes

Determines whether check boxes are displayed next to nodes. The default is false.

FullRowSelect

Determines whether selecting a node highlights the entire width of the control or only the label. The default is false.

HideSelection

Determines whether the selected node will remain highlighted when the control loses the focus. The default is true.

HotTracking

Determines whether labels take on the appearance of a hyperlink when the mouse pointer is over them. The default is false.

ImageIndex

Represents the zero-based index of the image in the associated ImageList that is used as the default image for nodes.

ImageList

Represents the ImageList control that holds the list of images used by the TreeView.

Indent

Represents the distance each level of child nodes is indented, in pixels.

LabelEdit

Determines whether the user can edit the labels on nodes. The default is false.

Nodes

Represents the collection of nodes in the control.

Scrollable

Determines whether the control displays scroll bars when they’re needed. The default is true.

SelectedImageIndex

Represents the zero-based index of the image in the associated ImageList that is used as the image for selected nodes.

SelectedNode

Gets or sets the currently selected node.

ShowLines

Determines whether lines are drawn between nodes in the tree.

ShowPlusMinus

Determines whether plus and minus signs are displayed next to nodes that have child nodes.

ShowRootLines

Determines whether lines are drawn between nodes at the root of the tree.

Sorted

Determines whether the nodes in the tree are sorted
alphabetically.

TopNode

Returns a reference to the first fully visible node.

VisibleCount

Gets the number of nodes that are fully visible in the tree.

Method

Description

BeginUpdate

Disables redrawing of the TreeView. Use this method if you’re going to add several items because it prevents the control from redrawing itself after each item is added.

CollapseAll

Collapses all nodes in the tree.

EndUpdate

Enables redrawing of the TreeView.

ExpandAll

Expands all nodes in the tree.

GetNodeAt

Gets the node at a particular set of coordinates.

GetNodeCount

Gets the number of nodes attached to the control.

 

Table 4

 

Event

Description

AfterCheck

Occurs after a TreeNode check box is checked.

AfterCollapse

Occurs after a TreeNode is collapsed.

AfterExpand

Occurs after a TreeNode is expanded.

AfterLabelEdit

Occurs after a TreeNode label is edited.

AfterSelect

Occurs after a TreeNode has been selected.

BeforeCheck

Occurs before a TreeNode check box is checked.

BeforeCollapse

Occurs before a TreeNode is collapsed.

BeforeExpand

Occurs before a TreeNode is expanded.

BeforeLabelEdit

Occurs before a TreeNode label is edited.

BeforeSelect

Occurs before a TreeNode has been selected.

ItemDrag

Occurs when an item is dragged onto the TreeView control.

 

Table 5

 

The following exercise will show you how to create and populate a TreeView control. We have several controls to discuss in the rest of this module, so you’ll use the controls to put together a Windows Explorer like file browser. It’s not a very sophisticated one, to be sure, but it will serve to show you the basics of working with these controls in a real application.

 

1.        Start a new Visual C++ .NET Windows Forms Application project, and name it CppControls.

 

Creating a new Visual C++ .NET Windows Forms Application project, and name it CppControls

 

2.        Set the form’s Text property to Browsing.

 

  Setting the form’s Text property to Browsing

 

Using SplitContainer (previous version uses Splitter)

 

First of all let add SplitContainer to the form. The SplitContainer control gives users the ability to resize docked controls at run time, and you’ll see shortly how to add one to the main form so that users can resize the two view controls. SplitContainer doesn’t have many properties or methods that you use in code. Once you’ve added a SplitContainer to a form, the user interacts with it by dragging it from side to side. When the mouse moves over the splitter, the cursor changes to a double-headed arrow to show that the splitter can be dragged. It’s possible to handle the events that are fired when the splitter is moved, but this isn’t often needed. SplitContainer also eases control placement at design time. For example, to create a window similar to Windows Explorer, add a SplitContainer control to a Form and set its Dock property to Fill. Add a TreeView control to the Form and set its Dock property to Fill. To complete the layout, add a ListView control and set its Dock property to Fill to have the ListView occupy the remaining space on the Form. At run time, the user can then resize the width of both controls using the splitter. Use the FixedPanel property to specify that a control should not be resized along with the Form or other container. You will use SplitterDistance to specify where the splitter starts on your form. Use SplitterIncrement to specify how many pixels the splitter moves at a time. The default for SplitterIncrement is one pixel. Use Panel1MinSize and Panel2MinSize to specify how close the splitter bar can be moved to the outside edge of a SplitContainer panel. The default minimum size of a panel is 25 pixels. Use the Orientation property to specify horizontal orientation. The default orientation of the SplitContainer is vertical. Use the BorderStyle property to specify the border style of the SplitContainer and coordinate its border style with the border style of controls that you add to the SplitContainer.

 

3.   Continue using the CppControls project you created earlier. Drag a SplitContainer from the Toolbox onto the form. Make sure the Orientation property is set to Vertical. Keep in mind there are two panels given, Panel1 and Panel2. Each panel has its own property page. We will use panel1 as TreeView container and panel2 as ListView container.

 

Adding a SplitContainer control to the dialog box

 

 

 

 

 

Two panels of the SplitContainer filling a Windows Form

 

By default the Dock property is set to Fill. To select both panel of the SplitContainer, right click on either panel and select the splitContainerX, where X is the splitContainer’s number. In this case it is 1 because we only have one splitContainer.

 

Selecting a SplitContainer control and setting its property value

 

4.        Build and run the application. You’ll find that you can now move the splitter bar to resize each panel.

 

SplitContainer control in action

 

5.   Next, drag a TreeView from the Toolbox onto the form. Set its Dock property to Fill by selecting the property in the editor and picking the center bar from the graphical chooser that pops up. The TreeView will dock to the left side of the form and resize to use the full height of the form. Adjust the TreeView so that it fit in the panel1 container as needed.

 

Setting TreeView control Dock property to Fill value

 

TreeView control in Windows Form

 

6.   A TreeView displays a collection of TreeNode objects, which you can set up using the Properties editor. Select the TreeView, bring up the Properties editor, and click the ellipses (...) button to the right of the Nodes property, which will display the TreeNode Editor.

 

Adding a root node to the TreeView

 

7.   Add a root node to the TreeView by clicking the Add Root button, and edit the Text to read Root. When you dismiss the editor, you should see the root node displayed in the TreeView.

 

Adding and setting TreeView root node

 

8.        Build and run the program. You should see something like the following figure. You can try using the splitter to resize the TreeView.

 

TreeView control with root node in action

 

The TreeView is docked to fill the panel1 container and has one member, which is highlighted.

 

 

 

Part 1 | Part 2 | Part 3 | Part 4 | Part 5 | Part 6 | Part 7

 


 

< C++ .NET WinForm, Dialog Box & Controls 2 | Main | C++ .NET WinForm, Dialog Box & Controls 4 >