13

1
13

• 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
• 13.3.1 A Simple Event-Driven GUI
• 13.3.2 Another Look at the Visual Studio
  Generated Code
  
• 13.3.3 Delegates and the Event-Handling
  Mechanism
  
• 13.3.4 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.
7
Fig. 13.2 Some basic GUI controls.
8
Fig. 13.3 Components and controls for Windows
Forms.
9
Fig. 13.4 Common Form properties, methods and
events.
10
Outline
SimpleEventExampleForm.cs
11
Software Engineering Observation 13.1

• You should not expect return values from event
  handlersevent 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
Fig. 13.8 Viewing events for a Button control
in the Properties window.
17
Fig. 13.9 List of Button events.
18
Fig. 13.10 Click event details.
Event name
Event type
Event argument class
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.
22
Fig. 13.13 Anchoring demonstration.
23
Fig. 13.14 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 to help align controls on their left
sides
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
LabelTextBoxButtonTestForm.cs (1 of 2)
32
Outline
LabelTextBoxButtonTestForm.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. 13.22 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 GUIs size.

38
Fig. 13.23 Creating a Panel with scrollbars.
39
Outline
GroupboxPanelExampleForm.cs (1 of 2)
40
Outline
GroupboxPanelExampleForm.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
RadioButtonsTestForm.cs (1 of 7)
49
Outline
RadioButtonsTestForm.cs (2 of 7)
50
Outline
RadioButtonsTestForm.cs (3 of 7)
51
Outline
RadioButtonsTestForm.cs (4 of 7)
52
Outline
RadioButtonsTestForm.cs (5 of 7)
53
Outline
(a)
(b)
RadioButtonsTestForm.cs (6 of 7)
(d) OK button type
(c) OKCancel button type
(f) YesNoCancel button type
(e) AbortRetryIgnore button type
54
Outline
(g) YesNo button type
(h) RetryCancel button type
RadioButtonsTestForm.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.
61
Fig. 13.34 Setting a controls tool tip text.
62
Fig. 13.35 NumericUpDown properties and event.
63
Outline
interestCalculatorForm.cs (1 of 2)
64
Outline
interestCalculatorForm.cs (2 of 2)
Click to increase number of years
NumericalUpDown control
Click to decrease number of years
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
(a) H pressed
KeyDemoForm.cs (3 of 3)
(b) F12 pressed
(c) pressed
(d) Enter pressed