Graphical User Interface 14 Graphical User Interface Concepts: Part 2

OBJECTIVES In this chapter you will learn: To create menus, tabbed windows and multiple document interface (MDI) programs. To use the ListView and TreeView controls for displaying information. To create hyperlinks using the LinkLabel control. To display lists of information in ListBox and ComboBox controls. To input date and time data with the DateTimePicker. To create custom controls.

14.15 Wrap-Up 14.1 Introduction 14.2 Menus 14.3 MonthCalendar Control 14.4   DateTimePicker Control 14.5   LinkLabel Control 14.6 ListBox Control 14.7 CheckedListBox Control 14.8   ComboBox Control 14.9   TreeView Control 14.10   ListView Control 14.11   TabControl Control 14.12   Multiple Document Interface (MDI) Windows 14.13   Visual Inheritance 14.14   User-Defined Controls 14.15   Wrap-Up

Fig. 14.1 | Menus, submenus and menu items Seperator bar Checked menu item Disabled command Shortcut key Submenu Menu items Menu Fig. 14.1 | Menus, submenus and menu items

Fig. 14.2 | Editing menus in Visual Studio. Main menu bar MenuStrip icon Type menu name in TextBox Fig. 14.2 | Editing menus in Visual Studio.

Fig. 14.3 | Adding ToolStripMenuItems to a MenuStrip. TextBoxes for adding items to the menu Place & character before a letter to underline it in the menu, so the character can be used as an access shortcut Fig. 14.3 | Adding ToolStripMenuItems to a MenuStrip.

Look-and-Feel Observation 14.1 Buttons can have access shortcuts. Place the & symbol immediately before the desired character in the Button’s label. To press the button by using its access key in the running application, the user presses Alt and the underlined character.

Fig. 14.4 | Setting a menu item’s shortcut keys. Setting modifier keys Select key (modifier and key combination specifies the shortcut key for the menu item) Fig. 14.4 | Setting a menu item’s shortcut keys.

Menu item options Fig. 14.5 | Menu item options.

Fig. 14. 6 | MenuStrip and ToolStripMenuItem properties and an event Fig. 14.6 | MenuStrip and ToolStripMenuItem properties and an event. (Part 1 of 2.)

Fig. 14. 6 | MenuStrip and ToolStripMenuItem properties and an event Fig. 14.6 | MenuStrip and ToolStripMenuItem properties and an event. (Part 2 of 2.)

Look-and-Feel Observation 14.2 It is a convention to place an ellipsis ( ) after the name of a menu item that when selected, displays a dialog (e.g. Save As...). Menu items that produce an immediate action without prompting the user for more information (e.g. Save) should not have an ellipsis following their name.

Outline MenuTestForm.cs (1 of 8)

Outline MenuTestForm.cs (2 of 8)

Outline MenuTestForm.cs (3 of 8)

Outline MenuTestForm.cs (4 of 8)

Outline MenuTestForm.cs (5 of 8)

Outline MenuTestForm.cs (6 of 8)

Outline MenuTestForm.cs (7 of 8) (a) (b)

Outline (c) (d) (e) (f) MenuTestForm.cs (8 of 8)

Software Engineering Observation 14.1 The mutual exclusion of menu items is not enforced by the MenuStrip, even when the Checked property is true. You must program this behavior.

Fig. 14.8 | MonthCalendar control. Current day is outlined Selected day is highlighted Fig. 14.8 | MonthCalendar control.

Fig. 14.9 | MonthCalendar properties and an event.

Fig. 14.10 | DateTimePicker properties and an event. (Part 1 of 2.)

Fig. 14.10 | DateTimePicker properties and an event. (Part 2 of 2.)

Outline DateTimePickerForm .cs (1 of 3)

Outline DateTimePickerForm .cs (2 of 3) (a) (b)

Outline (c) (d) DateTimePickerForm .cs (3 of 3)

Look-and-Feel Observation 14.3 A LinkLabel is the preferred control for indicating that the user can click a link to jump to a resource such as a Web page, though other controls can perform similar tasks.

Fig. 14.12 | LinkLabel control in running program. Hand image displays when mouse moves over LinkLabel LinkLabel on a Form Fig. 14.12 | LinkLabel control in running program.

Fig. 14.13 | LinkLabel properties and an event. (Part 1 of 2.)

Fig. 14.13 | LinkLabel properties and an event. (Part 2 of 2.)

Outline LinkLabelTestForm. cs (1 of 4)

Outline LinkLabelTestForm. cs (2 of 4)

Click first LinkLabel to look at contents of C: drive Outline LinkLabelTestForm. cs (3 of 4) Click first LinkLabel to look at contents of C: drive

Outline (4 of 4) LinkLabelTestForm. cs Click second Linklabel to go to Deitel Web site Click on third Linklabel to open Notepad LinkLabelTestForm. cs (4 of 4)

Fig. 14.15 | ListBox and CheckedListBox on a Form. Scrollbars appear if necessary Selected items Checked item Fig. 14.15 | ListBox and CheckedListBox on a Form.

Fig. 14.16 | ListBox properties, methods and an event. (Part 1 of 2.)

Fig. 14.16 | ListBox properties, methods and an event. (Part 2 of 2.)

Fig. 14.17 | String Collection Editor.

Outline ListBoxTestForm.cs (1 of 3)

Outline ListBoxTestForm.cs (2 of 3)

Outline (a) (b) (c) (d) ListBoxTestForm.cs (3 of 3)

Common Programming Error 14.1 The IDE displays an error message if you attempt to set the SelectionMode property to MultiSimple or MultiExtended in the Properties window of a CheckedListBox. If this value is set programmatically, a runtime error occurs.

Fig. 14. 19 | CheckedListBox properties, methods and events Fig. 14.19 | CheckedListBox properties, methods and events. (Part 1 of 2.)

Fig. 14. 19 | CheckedListBox properties, methods and events Fig. 14.19 | CheckedListBox properties, methods and events. (Part 2 of 2.)

Outline CheckedListBoxTest Form.cs (1 of 3)

Outline (a) (b) CheckedListBoxTest Form.cs (2 of 3)

Outline (c) (d) CheckedListBoxTest Form.cs (3 of 3)

Fig. 14.21 | ComboBox demonstration. Click the down arrow to display items in drop-down list Selecting an item from drop-down list changes text in TextBox portion Fig. 14.21 | ComboBox demonstration.

Look-and-Feel Observation 14.4 Use a ComboBox to save space on a GUI. A disadvantage is that, unlike with a ListBox, the user cannot see available items without expanding the drop-down list.

Fig. 14.22 | ComboBox properties and an event. (Part 1 of 2.)

Fig. 14.22 | ComboBox properties and an event. (Part 2 of 2.)

Outline comboBoxTextForm .Cs (1 of 3)

Outline comboBoxTextForm .Cs (2 of 3)

Outline (a) (b) (c) (d) comboBoxTextForm .Cs (3 of 3)

Look-and-Feel Observation 14.5 Make lists (such as ComboBoxes) editable only if the program is designed to accept user-submitted elements. Otherwise, the user might try to enter a custom item that is improper for the purposes of your application.

Fig. 14.24 | TreeView displaying a sample tree. Click + to expand node and display child nodes Root node Click - to collapse node and hide child nodes Child nodes (of Manager2) Fig. 14.24 | TreeView displaying a sample tree.

Fig. 14.25 | TreeView properties and an event.

Fig. 14.26 | TreeNode properties and methods. (Part 1 of 2.)

Fig. 14.26 | TreeNode properties and methods. (Part 2 of 2.)

Delete current node Fig. 14.27 | TreeNode Editor.

Outline TreeViewDirectoryS tructureForm.cs (1 of 4)

Outline TreeViewDirectoryS tructureForm.cs (2 of 4)

Outline TreeViewDirectoryS tructureForm.cs (3 of 4)

Outline TreeViewDirectoryS tructureForm.cs (4 of 4) (a) (b)

Fig. 14.29 | ListView properties and an event. (Part 1 of 2.)

Fig. 14.29 | ListView properties and an event. (Part 2 of 2.)

Fig. 14.30 | Image Collection Editor window for an ImageList component.

Outline ListViewTestForm.cs (1 of 7)

Outline ListViewTestForm.cs (2 of 7)

Outline ListViewTestForm.cs (3 of 7)

Outline ListViewTestForm.cs (4 of 7)

Outline ListViewTestForm.cs (5 of 7)

Outline ListViewTestForm.cs (6 of 7) (a)

Outline (b) (c) ListViewTestForm.cs (7 of 7)

Software Engineering Observation 14.2 When designing applications that run for long periods of time, you might choose a large initial delay to improve performance throughout the rest of the program. However, in applications that run for only short periods of time, developers often prefer fast initial loading times and small delays after each action.

Fig. 14.32 | Tabbed windows in Visual Studio. Tab windows Fig. 14.32 | Tabbed windows in Visual Studio.

Fig. 14.33 | TabControl with TabPages example. Controls in TabPage TabControl Fig. 14.33 | TabControl with TabPages example.

Fig. 14.34 | TabPages added to a TabControl.

Fig. 14.35 | TabControl properties and an event.

Outline UsingTabsForm.cs (1 of 4)

Outline UsingTabsForm.cs (2 of 4)

Outline UsingTabsForm.cs (3 of 4)

Outline (a) (b) (c) (d) UsingTabsForm.cs (4 of 4)

Software Engineering Observation 14.3 A TabPage can act as a container for a single logical group of RadioButtons, enforcing their mutual exclusivity. To place multiple RadioButton groups inside a single TabPage, you should group RadioButtons within Panels or GroupBoxes contained within the TabPage.

Fig. 14.37 | MDI parent window and MDI child windows.

Fig. 14.38 | SDI and MDI forms. Single Document Interface (SDI) Multiple Document Interface (MDI) Fig. 14.38 | SDI and MDI forms.

Fig. 14.39 | MDI parent and MDI child properties, method and event.

Good Programming Practice 14.1 When creating MDI applications, include a menu that displays a list of the open child windows. This helps the user select a child window quickly, rather than having to search for it in the parent window.

Fig. 14.40 | Minimized and maximized child windows. (b) Parent window icons: minimize,maximize and close Maximized child window icons: minimize, restore and close Parent title bar indicates maximized child Minimized child window icons: restore, maximize and close Fig. 14.40 | Minimized and maximized child windows.

Fig. 14.41 | MenuItem property MdiList example. 9 or more child windows enables the More Windows… option Child windows list Fig. 14.41 | MenuItem property MdiList example.

Fig. 14.42 | MdiLayout enumeration values. (c) TileHorizontal (a) ArrangeIcons (b) Cascade (d) Tilevertical Fig. 14.42 | MdiLayout enumeration values.

Outline UsingMDIForm.cs (1 of 4)

Outline UsingMDIForm.cs (2 of 4)

Outline UsingMDIForm.cs (3 of 4)

Outline (a) (b) (c) (d) UsingMDIForm.cs (4 of 4)

Outline ChildForm.cs

Outline VisualInheritanceF orm.cs

Fig. 14.46 | Form demonstrating visual inheritance.

Outline VisualInheritanceT estForm.cs (1 of 2)

Outline (2 of 2) VisualInheritanceT estForm.cs Derived class cannot modify these controls. Derived class can modify this control. VisualInheritanceT estForm.cs (2 of 2)

Fig. 14.48 | Custom control creation.

Outline ClockUserControl .cs

Fig. 14.50 | Custom-control creation.

Fig. 14.51 | Custom control added to the ToolBox.

Fig. 14.52 | Custom control added to a Form. New ToolBox icon Newly inserted control Fig. 14.52 | Custom control added to a Form.