Graphical User Interface Concepts: Part I 13 Graphical User Interface Concepts: Part I

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.

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

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

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

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

Fig. 13.2 | Some basic GUI controls.

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

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

Outline SimpleEventExample Form.cs

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.

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.

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

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

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.

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

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

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

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

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

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. 13.12 | Manipulating the Anchor property of a control.

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

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. 13.14 | Docking a Button to the top of a Form.

Fig. 13.15 | Control layout properties.

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

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. 13.16 | Snap lines in Visual Studio 2005.

Fig. 13.17 | Common Label properties.

Fig. 13.18 | TextBox properties and events.

Fig. 13.19 | Button properties and event.

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

Outline LabelTextBoxButton TestForm.cs (1 of 2)

Outline LabelTextBoxButton TestForm.cs (2 of 2)

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

Fig. 13.21 | GroupBox properties.

Fig. 13.22 | Panel properties.

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.

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

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

Outline GroupboxPanelExamp leForm.cs (1 of 2)

Outline GroupboxPanelExamp leForm.cs (2 of 2)

Fig. 13.25 | CheckBox properties and events.

Outline CheckBoxTestForm .cs (1 of 2)

Outline CheckBoxTestForm .cs (2 of 2)

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

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

Fig. 13.27 | RadioButton properties and events.

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.

Outline RadioButtonsTest Form.cs (1 of 7)

Outline RadioButtonsTest Form.cs (2 of 7)

Outline RadioButtonsTest Form.cs (3 of 7)

Outline RadioButtonsTest Form.cs (4 of 7)

Outline RadioButtonsTest Form.cs (5 of 7)

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

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

Fig. 13.29 | PictureBox properties and event.

Outline PictureBoxTestForm .cs (1 of 2)

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

Fig. 13.31 | ToolTip properties and events.

Outline ToolTipExampleForm .cs (a) (b)

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

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

Fig. 13.35 | NumericUpDown properties and event.

Outline interestCalculator Form.cs (1 of 2)

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

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

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

Outline PainterForm.cs (1 of 2)

Outline PainterForm.cs (1 of 2)

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

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

Outline KeyDemoForm.cs (1 of 3)

Outline KeyDemoForm.cs (2 of 3)

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