Graphical User Interface

1
14

• Graphical User Interface
• Concepts Part 2

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.

3

• 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

4
Fig. 14.1 Menus, submenus and menu items
5
Fig. 14.2 Editing menus in Visual Studio.
6
Fig. 14.3 Adding ToolStripMenuItems to a
MenuStrip.
7
Look-and-Feel Observation 14.1

• Buttons can have access shortcuts. Place the
  symbol immediately before the desired character
  in the Buttons label. To press the button by
  using its access key in the running application,
  the user presses Alt and the underlined character.

8
Fig. 14.4 Setting a menu items shortcut keys.
9
Fig. 14.5 Menu item options.
10
Fig. 14.6 MenuStrip and ToolStripMenuItem
properties and an event. (Part 1 of 2.)
11
Fig. 14.6 MenuStrip and ToolStripMenuItem
properties and an event. (Part 2 of 2.)
12
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.

13
Outline
MenuTestForm.cs (1 of 8)
14
Outline
MenuTestForm.cs (2 of 8)
15
Outline
MenuTestForm.cs (3 of 8)
16
Outline
MenuTestForm.cs (4 of 8)
17
Outline
MenuTestForm.cs (5 of 8)
18
Outline
MenuTestForm.cs (6 of 8)
19
Outline
MenuTestForm.cs (7 of 8)
20
Outline
MenuTestForm.cs (8 of 8)
21
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.

22
Fig. 14.8 MonthCalendar control.
23
Fig. 14.9 MonthCalendar properties and an
event.
24
Fig. 14.10 DateTimePicker properties and an
event. (Part 1 of 2.)
25
Fig. 14.10 DateTimePicker properties and an
event. (Part 2 of 2.)
26
Outline
DateTimePickerForm.cs (1 of 3)
27
Outline
DateTimePickerForm.cs (2 of 3)
28
Outline
DateTimePickerForm.cs (3 of 3)
29
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.

30
Fig. 14.12 LinkLabel control in running
program.
31
Fig. 14.13 LinkLabel properties and an event.
(Part 1 of 2.)
32
Fig. 14.13 LinkLabel properties and an event.
(Part 2 of 2.)
33
Outline
LinkLabelTestForm.cs (1 of 4)
34
Outline
LinkLabelTestForm.cs (2 of 4)
35
Outline
LinkLabelTestForm.cs (3 of 4)
36
Outline
LinkLabelTestForm.cs (4 of 4)
37
Fig. 14.15 ListBox and CheckedListBox on a
Form.
38
Fig. 14.16 ListBox properties, methods and an
event. (Part 1 of 2.)
39
Fig. 14.16 ListBox properties, methods and an
event. (Part 2 of 2.)
40
Fig. 14.17 String Collection Editor.
41
Outline
ListBoxTestForm.cs (1 of 3)
42
Outline
ListBoxTestForm.cs (2 of 3)
43
Outline
ListBoxTestForm.cs (3 of 3)
44
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.

45
Fig. 14.19 CheckedListBox properties, methods
and events. (Part 1 of 2.)
46
Fig. 14.19 CheckedListBox properties, methods
and events. (Part 2 of 2.)
47
Outline
CheckedListBoxTestForm.cs (1 of 3)
48
Outline
CheckedListBoxTestForm.cs (2 of 3)
49
Outline
CheckedListBoxTestForm.cs (3 of 3)
50
Fig. 14.21 ComboBox demonstration.
51
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.

52
Fig. 14.22 ComboBox properties and an event.
(Part 1 of 2.)
53
Fig. 14.22 ComboBox properties and an event.
(Part 2 of 2.)
54
Outline

• comboBoxTextForm.Cs
• (1 of 3)

55
Outline

• comboBoxTextForm.Cs
• (2 of 3)

56
Outline

• comboBoxTextForm.Cs
• (3 of 3)

57
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.

58
Fig. 14.24 TreeView displaying a sample tree.
59
Fig. 14.25 TreeView properties and an event.
60
Fig. 14.26 TreeNode properties and methods.
(Part 1 of 2.)
61
Fig. 14.26 TreeNode properties and methods.
(Part 2 of 2.)
62
Fig. 14.27 TreeNode Editor.
63
Outline
TreeViewDirectoryStructureForm.cs (1 of 4)
64
Outline
TreeViewDirectoryStructureForm.cs (2 of 4)
65
Outline
TreeViewDirectoryStructureForm.cs (3 of 4)
66
Outline
TreeViewDirectoryStructureForm.cs (4 of 4)
67
Fig. 14.29 ListView properties and an event.
(Part 1 of 2.)
68
Fig. 14.29 ListView properties and an event.
(Part 2 of 2.)
69
Fig. 14.30 Image Collection Editor window for
an ImageList component.
70
Outline
ListViewTestForm.cs (1 of 7)
71
Outline
ListViewTestForm.cs (2 of 7)
72
Outline
ListViewTestForm.cs (3 of 7)
73
Outline
ListViewTestForm.cs (4 of 7)
74
Outline
ListViewTestForm.cs (5 of 7)
75
Outline
ListViewTestForm.cs (6 of 7)
76
Outline
ListViewTestForm.cs (7 of 7)
77
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.

78
Fig. 14.32 Tabbed windows in Visual Studio.
79
Fig. 14.33 TabControl with TabPages example.
80
Fig. 14.34 TabPages added to a TabControl.
81
Fig. 14.35 TabControl properties and an event.
82
Outline
UsingTabsForm.cs (1 of 4)
83
Outline
UsingTabsForm.cs (2 of 4)
84
Outline
UsingTabsForm.cs (3 of 4)
85
Outline
UsingTabsForm.cs (4 of 4)
86
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.

87
Fig. 14.37 MDI parent window and MDI child
windows.
88
Fig. 14.38 SDI and MDI forms.
89
Fig. 14.39 MDI parent and MDI child properties,
method and event.
90
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.

91
Fig. 14.40 Minimized and maximized child
windows.
92
Fig. 14.41 MenuItem property MdiList example.
93
Fig. 14.42 MdiLayout enumeration values.
94
Outline
UsingMDIForm.cs (1 of 4)
95
Outline
UsingMDIForm.cs (2 of 4)
96
Outline
UsingMDIForm.cs (3 of 4)
97
Outline
UsingMDIForm.cs (4 of 4)
98
Outline
ChildForm.cs
99
Outline
VisualInheritanceForm.cs
100
Fig. 14.46 Form demonstrating visual
inheritance.
101
Outline
VisualInheritanceTestForm.cs (1 of 2)
102
Outline
VisualInheritanceTestForm.cs (2 of 2)
103
Fig. 14.48 Custom control creation.
104
Outline
ClockUserControl.cs
105
Fig. 14.50 Custom-control creation.
106
Fig. 14.51 Custom control added to the ToolBox.
107
Fig. 14.52 Custom control added to a Form.