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

2. …the wisest prophets make sure of the event first.
Horace Walpole
...The user should feel in control of the computer; not the other way around. This is achieved in applications that embody three qualities: responsiveness, permissiveness, and consistency.
Inside Macintosh, Volume 1 Apple Computer, Inc. 1985
All the better to see you with my dear.
The Big Bad Wolf to Little Red Riding Hood

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

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

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

6. 13.1 Introduction Graphical User Interface (GUI)
Gives a program distinctive “look” and “feel”
Built from GUI controls (Fig. 13.2)
Objects that can display information on the screen or enable users to interact with an application
Implements IComponent interface

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

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

9. Fig. 13.2 | Some basic GUI controls.

10. 13.2 Windows Forms Windows Forms Used to create GUIs for programs
Graphical element that appears on your computer’s desktop
Active window is the front most window
A Form is a container for controls and components
In visual programming, Visual Studio generates much of the GUI-related code

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

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

13. 13.3 Event Handling Event Handling GUIs are event driven
When user interacts with a GUI component, the interaction is known as an event
A method that performs a task in response to an event is called an event handler

14. 13.3.1 A Simple Event-Driven GUI
Can create a Click event handler by double clicking the Button control on the Form (if applicable)
By convention
Each variable name we create for a control ends with the control’s type
C# names the event-handler method as controlName_eventName (e.g., clickButton_Click)
Each event handler receives two parameters when called
object named sender
A reference to the object that generated the event
EventArgs named e
Contains additional information about the event that occurred

15. Outline Inherits from Form Visual Studio generated InitializeComponent
SimpleEventExample Form.cs
Visual Studio generated InitializeComponent
The click event handler for clickButton
Let user know that clickButton was clicked by displaying MessageBox

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

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

18. 13.3.2 Another Look at the Visual Studio Generated Code
The auto-generated code is saved in the Designer.cs file of the Form
partial modifier allow the class created to be split among multiple files
By default, all variable declarations for controls created through C# have a private access modifier
The code also includes Dispose and InitializeComponent

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

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

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

22. 13.3.3 Delegates and the Event-Handling Mechanism
Event sender
Control that generates an event
Event receiver
Responds to a particular event
Delegates
Hold a reference to a method with a signature
delegate keyword
Multicast delegates
Represent a set of delegate objects that all have same signature

23. 13.3.4 Other Ways to Create Event Handlers
By double clicking a control, the Form creates a event handler for that control
Able to create additional event handlers through the Properties window (Fig. 13.8)

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

25. 13.3.5 Locating Event Information
Read the Visual Studio documentation to learn about the different events raised (Fig )

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

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

28. 13.4 Control Properties and Layout
Focus method
Transfers the focus to a control and makes it the active control
Enabled property
Indicates whether the user can interact with a control to generate an event
Anchoring property
Causes controls to remain at a fixed distance from the sides of the container (Fig – 13.13)
Docking property
Attaches a control to a container such that the control stretches across an entire side (Fig )
Padding property
Specifies the distance between the docked controls and the Form edges
Width and Height
Specifies size of Form
Using Visual Studio To Edit GUI’s Layout
Snap lines
Appear to help you position the control with respect to other controls

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

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

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

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

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

34. Fig. 13.15 | Control layout properties.

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

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

37. 13.5 Labels, TextBoxes and Buttons
Provide text information (as well as images)
Display text that user cannot directly modify
Can be changed programmatically
TextBoxes
Area in which either text can be displayed or typed in
Password TextBoxes hides information entered by user
Buttons
Control that user clicks to trigger specific action
There are several types of buttons, such as checkboxes and radio buttons
All buttons derive from class ButtonBase

38. Fig. 13.17 | Common Label properties.

39. Fig. 13.18 | TextBox properties and events.

40. Fig. 13.19 | Button properties and event.

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

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

43. Outline The click event handler for displayPasswordButton (2 of 2)
LabelTextBoxButton TestForm.cs
(2 of 2)
Display the password protected text in displayPasswordLabel

44. 13.6 GroupBoxes and Panels GroupBoxes and Panels
Arrange controls on a GUI
Used to group similar functionality that a related
Primary difference between these two controls:
GroupBoxes can display a caption (i.e., text) and do not include scrollbars
Panels can include scrollbars and do not include a caption

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

46. Fig. 13.21 | GroupBox properties.

47. Fig | Panel properties.

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

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

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

51. Outline (1 of 2) The click event handler for hiButton
GroupboxPanelExamp leForm.cs
(1 of 2)
The click event handler for hiButton
Change messageLabel’s text
The click event handler for byeButton
Change messageLabel’s text

52. Outline The click event handler for leftButton
Change messageLabel’s text
The click event handler for rightButton
GroupboxPanelExamp leForm.cs
(2 of 2)
Change messageLabel’s text

53. 13.7 CheckBoxes and RadioButtons
C# has two types of state buttons
CheckBoxes
Small squares that either is blank or contains a check mark
Any number of CheckBoxes can be selected at a time
Font styles can be combined via bitwise operators
RadioButtons
Only one can be selected at a time
Selecting one RadioButton in the group forces all the others to be deselected.
RadioButtons represents a set of mutually exclusive options

54. Fig. 13.25 | CheckBox properties and events.

55. Outline
CheckBoxTestForm .cs
(1 of 2)
The event handler for boldCheckBox when user checks or unchecks
Bold the font of outputLabel if not done so already and vice versa

56. The event handler for italicCheckBox when user checks or unchecks
Outline
CheckBoxTestForm .cs
(2 of 2)
Italicize the font of outputLabel if not done so already and vice versa

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

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

59. Fig. 13.27 | RadioButton properties and events.

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

61. Outline (1 of 7) Variables to determine how MessageBox will look like
RadioButtonsTest Form.cs
(1 of 7)
Variables to determine how MessageBox will look like
Determine which buttons the user selected and store information in buttonType

62. Outline
Determine which buttons the user selected and store information in buttonType
RadioButtonsTest Form.cs
(2 of 7)
Determine which icon the user selected and store information in iconType

63. Outline
RadioButtonsTest Form.cs
(3 of 7)
Determine which icon the user selected and store information in iconType

64. Outline The click event handler for displayButton (4 of 7)
RadioButtonsTest Form.cs
(4 of 7)
Display customized MessageBox

65. Outline
Test to see which button was pressed and change displayLabel’s text accordingly
RadioButtonsTest Form.cs
(5 of 7)

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

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

68. 13.8 PictureBoxes
PictureBoxes
Display an image

69. Fig. 13.29 | PictureBox properties and event.

70. Outline
PictureBoxTestForm .cs
(1 of 2)
Assign an image to the imagePictureBox given the specified directory

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

72. 13.9 ToolTips
ToolTips
Helpful text that appears when the mouse hovers over an item

73. Fig. 13.31 | ToolTip properties and events.

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

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

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

77. 13.10 NumericUpDown Control
Restrict a user’s input choices to a specific range of numeric values.
Appears as a TextBox, with two small Buttons on the right side
NumericUpDown’s ReadOnly property indicates if user can type a number into the control

78. Fig. 13.35 | NumericUpDown properties and event.

79. Outline
interestCalculator Form.cs
(1 of 2)
Retrieve, convert, and assign principalTextBox, InterestTextBox, and yearUpDown’s values

80. Outline (2 of 2) Calculate interest and format it as a String
interestCalculator Form.cs
(2 of 2)
Calculate interest and format it as a String
Output results in displayTextBox
number of years
Click to increase
NumericalUpDown control
number of years
Click to decrease

81. 13.11 Mouse-Event Handling Mouse-Event Handling
Mouse events can be handled for any control that derives from class System.Windows.Forms.Control
Class MouseEventArgs
Contains information related to the mouse event
Information about the event is passed to the event-handling method through an object of this class
The delegate used to create the mouse-event handlers is MouseEventHandler

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

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

84. Outline
PainterForm.cs
(1 of 2)
Default instance variable to false to identify that painting will not occur
Set shouldPaint to true to identify that painting will occur
Set shouldPaint to false to identify that painting will not occur

85. Outline (1 of 2) Paint on the Form when mouse is being pressed
PainterForm.cs
(1 of 2)
Paint on the Form when mouse is being pressed

86. 13.12 Keyboard-Event Handling
Key events occur when keyboard keys are pressed and released
There are three key events:
KeyPress
The event occurs when the user presses a key that represents an ASCII character
The specific key can be determined with property KeyChar of the event handler’s KeyPressEventArgs argument
Does not indicate whether modifier keys were pressed
KeyUp and KeyDown
If information about the modifier keys are important, use the KeyUp or KeyDown events
The KeyEventArgs argument for each of these events contains information about modifier keys.

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

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

89. Outline
KeyDemoForm.cs
(1 of 3)
Property that returns the ASCII character for the key pressed

90. Outline
Return the key code for the key as a value from the Keys enumerations
KeyDemoForm.cs
(2 of 3)
Returns the key code for a key combined with modifier information as a Key value
Returns key code as an int
Reset labels

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