1. Graphical User Interface Concepts: Part I13
Graphical User Interface Concepts: Part I

2. OBJECTIVES In this chapter you will learn:
Design principles of graphical user interfaces (GUIs).
How to create graphical user interfaces.
How to process events that are generated by user interactions with GUI controls.
The namespaces that contain the classes for graphical user interface controls and event handling.
How to create and manipulate Button, Label, RadioButton, CheckBox, TextBox, Panel and NumericUpDown controls.
How to add descriptive ToolTips to GUI controls.
How to process mouse and keyboard events.

3. 13.1   Introduction
13.2   Windows Forms
13.3   Event Handling
A Simple Event-Driven GUI
Another Look at the Visual Studio Generated Code
Delegates and the Event-Handling Mechanism
Other Ways to Create Event Handlers
13.3.5  Locating Event Information
13.4   Control Properties and Layout
13.5   Labels, TextBoxes and Buttons
13.6   GroupBoxes and Panels
13.7   CheckBoxes and RadioButtons
13.8   PictureBoxes

4. 13.9   ToolTips
13.10   NumericUpDown Control
13.11   Mouse-Event Handling
13.12   Keyboard-Event Handling
13.13   Wrap-Up

5. Look-and-Feel Observation 13.1
Consistent user interfaces enable a user to learn new applications more quickly because the applications have the same “look” and “feel.”

6. Fig. 13.1 | GUI controls in an Internet Explorer window.
Label
Button
Menu bar
Title bar
Menu
Combobox
Scrollbar
Fig | GUI controls in an Internet Explorer window.

7. Fig. 13.2 | Some basic GUI controls.

8. Fig. 13.3 | Components and controls for Windows Forms.
Display all controls and components
Categories that organize controls and components by functionality
Fig | Components and controls for Windows Forms.

9. Fig. 13.4 | Common Form properties, methods and events.

10. Outline
SimpleEventExample Form.cs

11. Software Engineering Observation 13.1
You should not expect return values from event handlers—event handlers are designed to execute code based on an action and return control to the main program.

12. Good Programming Practice 13.1
Use the event-handler naming convention controlName_eventName, so method names are meaningful. Such names tell users what event a method handles for what control. This convention is not required, but it makes your code easier to read, understand, modify and maintain.

13. Fig. 13.6 | First half of the Visual Studio generated code file.

14. Fig. 13.7 | Second half of the Visual Studio generated code file.

15. Error-Prevention Tip 13.1
The code generated by building a GUI in Design mode is not meant to be modified directly, and doing so can result in an application that functions incorrectly. You should modify control properties through the Properties window.

16. Properties icon
Events icon
Selected events
Fig | Viewing events for a Button control in the Properties window.

17. Fig. 13.9 | List of Button events.
Class name
List of events
Fig | List of Button events.

18. Fig. 13.10 | Click event details.
Event name
Event type
Event argument
class
Fig | Click event details.

19. Fig. 13.11 | Class Control properties and methods. (Part 1 of 2)

20. Fig. 13.11 | Class Control properties and methods. (Part 2 of 2)

21. Fig. 13.12 | Manipulating the Anchor property of a control.
Click down-arrow in Anchor property to display anchoring window
Anchoring window
Darkened bars indicate the container’s side(s) to which the control is anchored; use mouse clicks to select or deselect a bar
Fig | Manipulating the Anchor property of a control.

22. Fig. 13.13 | Anchoring demonstration.
Constant distance to right and bottom sides
Before resizing
After resizing
Fig | Anchoring demonstration.

23. Fig. 13.14 | Docking a Button to the top of a Form.
Before resizing
After resizing
Control extends along entire top portion of form
Fig | Docking a Button to the top of a Form.

24. Fig. 13.15 | Control layout properties.

25. Look-and-Feel Observation 13.2
For resizable Forms, ensure that the GUI layout appears consistent across various Form sizes.

26. Fig. 13.16 | Snap lines in Visual Studio 2005.
Snap line that indicates when a control reaches the minimum recommended distance from the edge of a Form.
Snap line to help align controls on their left sides
Fig | Snap lines in Visual Studio 2005.

27. Fig. 13.17 | Common Label properties.

28. Fig. 13.18 | TextBox properties and events.

29. Fig. 13.19 | Button properties and event.

30. Look-and-Feel Observation 13.3
Although Labels, TextBoxes and other controls can respond to mouse clicks, Buttons are more natural for this purpose.

31. Outline
LabelTextBoxButton TestForm.cs
(1 of 2)

32. Outline
LabelTextBoxButton TestForm.cs
(2 of 2)

33. Look-and-Feel Observation 13.4
Panels and GroupBoxes can contain other Panels and GroupBoxes for more complex layouts.

34. Fig. 13.21 | GroupBox properties.

35. Fig | Panel properties.

36. Look-and-Feel Observation 13.5
You can organize a GUI by anchoring and docking controls inside a GroupBox or Panel. The GroupBox or Panel then can be anchored or docked inside a Form. This divides controls into functional “groups” that can be arranged easily.

37. Look-and-Feel Observation 13.6
Use Panels with scrollbars to avoid cluttering a GUI and to reduce the GUI’s size.

38. Fig. 13.23 | Creating a Panel with scrollbars.
Control inside Panel
Panel Scrollbars
Panel
Panel resized
Fig | Creating a Panel with scrollbars.

39. Outline
GroupboxPanelExamp leForm.cs
(1 of 2)

40. Outline
GroupboxPanelExamp leForm.cs
(2 of 2)

41. Fig. 13.25 | CheckBox properties and events.

42. Outline
CheckBoxTestForm .cs
(1 of 2)

43. Outline
CheckBoxTestForm .cs
(2 of 2)

44. Look-and-Feel Observation 13.7
Use RadioButtons when the user should choose only one option in a group.

45. Look-and-Feel Observation 13.8
Use CheckBoxes when the user should be able to choose multiple options in a group.

46. Fig. 13.27 | RadioButton properties and events.

47. Software Engineering Observation 13.2
Forms, GroupBoxes, and Panels can act as logical groups for RadioButtons. The RadioButtons within each group are mutually exclusive to each other, but not to RadioButtons in different logical groups.

48. Outline
RadioButtonsTest Form.cs
(1 of 7)

49. Outline
RadioButtonsTest Form.cs
(2 of 7)

50. Outline
RadioButtonsTest Form.cs
(3 of 7)

51. Outline
RadioButtonsTest Form.cs
(4 of 7)

52. Outline
RadioButtonsTest Form.cs
(5 of 7)

53. Outline (6 of 7) RadioButtonsTest Form.cs (a) (b) (d) OK button type
(c) OKCancel button type
(d) OK button type
(e) AbortRetryIgnore button type
(f) YesNoCancel button type

54. Outline (7 of 7) RadioButtonsTest Form.cs (g) YesNo button type
(h) RetryCancel button type
RadioButtonsTest Form.cs
(7 of 7)

55. Fig. 13.29 | PictureBox properties and event.

56. Outline
PictureBoxTestForm .cs
(1 of 2)

57. Outline
(a)
(b)
PictureBoxTestForm .cs
(2 of 2)
(c)

58. Fig. 13.31 | ToolTip properties and events.

59. Outline
ToolTipExampleForm .cs
(a)
(b)

60. Fig. 13.33 | Demonstrating the component tray.
ToolTip in component tray
Fig | Demonstrating the component tray.

61. Fig. 13.34 | Setting a control’s tool tip text.
Property to set tool tip text
Tool tip text
Fig | Setting a control’s tool tip text.

62. Fig. 13.35 | NumericUpDown properties and event.

63. Outline
interestCalculator Form.cs
(1 of 2)

64. Outline (2 of 2) interestCalculator Form.cs Click to increase
number of years
Click to increase
NumericalUpDown control
number of years
Click to decrease

65. Fig. 13.37 | Mouse events and event arguments. (Part 1 of 2.)

66. Fig. 13.37 | Mouse events and event arguments. (Part 2 of 2.)

67. Outline
PainterForm.cs
(1 of 2)

68. Outline
PainterForm.cs
(1 of 2)

69. Fig. 13.39 | Keyboard events and event arguments. (Part 1 of 2.)

70. Fig. 13.39 | Keyboard events and event arguments. (Part 2 of 2.)

71. Outline
KeyDemoForm.cs
(1 of 3)

72. Outline
KeyDemoForm.cs
(2 of 3)

73. Outline (3 of 3) KeyDemoForm.cs (a) H pressed (b) F12 pressed
(c) $ pressed
(d) Enter pressed