1. Graphical User Interface14
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.15 Wrap-Up 14.1 Introduction 14.2 Menus 14.3 MonthCalendar Control
14.4   DateTimePicker Control
14.5   LinkLabel Control
ListBox Control
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
Seperator bar
Checked menu item
Disabled command
Shortcut key
Submenu
Menu items
Menu
Fig | Menus, submenus and menu items

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

6. 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 | 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 Button’s 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 item’s shortcut keys.
Setting modifier keys
Select key (modifier and key combination specifies the shortcut key for the menu item)
Fig | Setting a menu item’s shortcut keys.

9. Menu item options
Fig | Menu item options.

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

11. Fig. 14. 6 | MenuStrip and ToolStripMenuItem properties and an event
Fig | 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)
(a)
(b)

20. Outline
(c)
(d)
(e)
(f)
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.
Current day is outlined
Selected day is highlighted
Fig | 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)
(a)
(b)

28. Outline
(c)
(d)
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.
Hand image displays when mouse moves over LinkLabel
LinkLabel on a Form
Fig | 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. 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

36. 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)

37. Fig. 14.15 | ListBox and CheckedListBox on a Form.
Scrollbars appear if necessary
Selected items
Checked item
Fig | 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
(a)
(b)
(c)
(d)
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
Fig | CheckedListBox properties, methods and events. (Part 1 of 2.)

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

47. Outline
CheckedListBoxTest Form.cs
(1 of 3)

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

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

50. 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 | 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
(a)
(b)
(c)
(d)
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.
Click + to expand node and display child nodes
Root node
Click - to collapse node and hide child nodes
Child nodes (of Manager2)
Fig | 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. Delete current node
Fig | TreeNode Editor.

63. Outline
TreeViewDirectoryS tructureForm.cs
(1 of 4)

64. Outline
TreeViewDirectoryS tructureForm.cs
(2 of 4)

65. Outline
TreeViewDirectoryS tructureForm.cs
(3 of 4)

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

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)
(a)

76. Outline
(b)
(c)
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.
Tab windows
Fig | Tabbed windows in Visual Studio.

79. Fig. 14.33 | TabControl with TabPages example.
Controls in TabPage
TabControl
Fig | 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
(a)
(b)
(c)
(d)
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. Single Document Interface (SDI)
Multiple Document Interface (MDI)
Fig | 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.
(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 | Minimized and maximized child windows.

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

93. Fig. 14.42 | MdiLayout enumeration values.
(c) TileHorizontal
(a) ArrangeIcons
(b) Cascade
(d) Tilevertical
Fig | 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
(a)
(b)
(c)
(d)
UsingMDIForm.cs
(4 of 4)

98. Outline
ChildForm.cs

99. Outline
VisualInheritanceF orm.cs

100. Fig. 14.46 | Form demonstrating visual inheritance.

101. Outline
VisualInheritanceT estForm.cs
(1 of 2)

102. 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)

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.
New ToolBox icon
Newly inserted control
Fig | Custom control added to a Form.