1 / 206

Graphical User Interfaces with Windows Forms

14. Graphical User Interfaces with Windows Forms. . . .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. Apple Computer, Inc.

Télécharger la présentation

Graphical User Interfaces with Windows Forms

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. 14 • Graphical User Interfaces with Windows Forms

  2. . . .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. Apple Computer, Inc. All the better to see you with, my dear. The Big Bad Wolf to Little Red Riding Hood . . .the wisest prophets make sure of the event first. Horace Walpole

  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, including general mouse and keyboard events.

  4. OBJECTIVES • How to create and manipulate Button, Label, RadioButton, CheckBox, TextBox, GroupBox, Panel, PictureBox, ToolTip, NumericUpDown, MonthCalendar, LinkLabel, ListBox, CheckedListBox, ComboBox, TreeView, and ListView controls. • To create menus, tabbed windows and multiple document interface (MDI) programs. • How to create custom controls.

  5. 14.1   Introduction • 14.2   Windows Forms • 14.3   Event Handling • 14.4   Control Properties and Layout • 14.5   Labels, TextBoxes and Buttons • 14.6   GroupBoxes and Panels • 14.7   CheckBoxes and RadioButtons • 14.8   PictureBoxes • 14.9   ToolTips

  6. 14.10   NumericUpDown Control • 14.11   Mouse-Event Handling • 14.12   Keyboard-Event Handling • 14.13   Menus • 14.14   MonthCalendar Control • 14.15DateTimePicker Control • 14.16LinkLabel Control • 14.17ListBox Control • 14.18 CheckedListBox Control

  7. 14.19   ComboBox Control • 14.20TreeView Control • 14.21ListView Control • 14.22   TabControl Control • 14.23   Multiple Document Interface (MDI) Windows • 14.24   Visual Inheritance • 14.25   User-Defined Controls

  8. 14.1  Introduction • A graphical user interface (GUI) allows a user to interact visually with a program. • Figure 14.1 shows a Visual Basic 2008 Express Edition window’s GUI controls. Menu Title bar Menu bar Tool bar Scrollbars Button Tabs Fig. 14.1 | GUI controls in an Internet Explorer window.

  9. 14.1  Introduction (Cont.) Look-and-Feel Observation 14.1 Consistent user interfaces enable a user to learn new applications faster because the applications have the same look-and-feel.

  10. 14.1  Introduction (Cont.) • GUI controls are objects that can display information on the screen or enable users to interact with an application (Fig.14.2). Fig. 14.2|Some basic GUI controls.

  11. 14.2 Windows Forms • Windows Forms are used to create the GUIs for programs. • A Form can be a dialog, a window or an MDI window. • A component is an instance of a class that implements IComponent.

  12. 14.2 Windows Forms (Cont.) • Figure 14.3 displays the Visual Basic Toolbox. • To add a control or component to a Form, select and drag it onto the Form. Categories that organize controls and Components by functionality Fig. 14.3 | Components and controls for Windows Forms.

  13. 14.2 Windows Forms (Cont.) • The active window is the frontmost and has a highlighted title bar. The active window is said to “have the focus.” • When you drag a control onto the Form, Visual Studio generates code that instantiates the object.

  14. 14.2  Windows Forms (Cont.) Fig. 14.4|Common Form properties, methods and an event. (Part 1 of 2.)

  15. 14.2  Windows Forms (Cont.) Fig. 14.4|Common Form properties, methods and an event. (Part 2 of 2.)

  16. 14.3 Event Handling • GUIs are event driven. • When the user interacts with a GUI component,an event drives the program to perform a task. • A method that performs a task in response toan event is called an event handler.

  17. Outline • The Form in the application of Fig. 14.5 containsa Button which displays a MessageBox. SimpleEventExampleForm.vb clickMeButton’s Click event handler. Fig. 14.5|Simple event-handling example using visual programming.

  18. 14.3 Event Handling (cont.) • Create a Windows Forms Application and add a Button. • In the Properties window, set the (Name) property to ClickMeButton and the Text property to ClickMe. • Create an event handler by double clicking the Button. PrivateSub clickMeButton_Click(ByVal sender As System.Object, _ByVal e As System.EventArgs) Handles clickMeButton.Click End Sub

  19. 14.3 Event Handling (cont.) Software Engineering Observation 14.1 Event handlers do not return values—they are designed to execute code based on an action and return control to the main program. Good Programming Practice 14.1 Use the event-handler naming convention controlName_eventName so that your method nameswill be meaningful. Such names tell users what event a method handles for what control.

  20. 14.3 Event Handling (cont.) • The following statement displays a MessageBox: MessageBox.Show("Button was clicked.")

  21. 14.3 Event Handling (Cont.) 14.3.2Another Look at the Visual Studio Generated Code • Visual Studio generates the code that creates and initializes the GUI you build in the GUI design window (Figs. 14.6 and 14.7). Fig. 14.6|First half of the Visual Studio generated code file.

  22. 14.3 Event Handling (Cont.) Fig. 14.7| Second half of the Visual Studio generated code file.

  23. 14.3 Event Handling (Cont.) • The auto-generated code that defines the GUI is actually part of the Form’s class. • The Partial modifier allows this class to be split among multiple files. Error-Prevention Tip 14.1 The code generated by building a GUI in Design mode is not meant to be modified directly, and doing so can make an application function incorrectly. You should modify control properties through the Properties window.

  24. 14.3 Event Handling (Cont.) 14.3.3Delegates and the Event-Handling Mechanism • Event handlers are connected to a control’s events via delegates. • The delegate for a Button’s Click event is of type EventHandler and is declared as follows: Public Delegate Sub EventHandler(sender As Object, e As EventArgs) • The Handles clause “registers” your event handler as the method to call in response to the event. HandlescontrolName.eventName

  25. 14.3 Event Handling (Cont.) 14.3.4Other Ways to Create Event Handlers • Use the Class Name and Method NameComboBoxes to select events for that control (Fig. 14.8). Fig. 14.8| Creating an event handler in the Code editor.

  26. 14.3 Event Handling (cont.) • You can create additional event handlers through the Properties window. • This can be used to have several events call the same method. • Click the Events icon, then double click an event’s name (Fig. 14.9). Propertiesicon Eventsicon Selected event Fig. 14.7| Viewing events for a Button control in the Properties window.

  27. 14.3 Event Handling (Cont.) 14.3.5Locating Event Information • Select Help > Index. In the window that appears, select .NET Framework in the Filtered by drop-down list and enter the name of the control’s class in the Index window. • To display a list of all the class’s members (Fig. 14.10), click the Members link.

  28. 14.3 Event Handling (Cont.) List of events Class name Fig. 14.10 | List of Button events.

  29. 14.3 Event Handling (Cont.) • Click the name of an event to view its descriptionand examples of its use (Fig. 14.11). Event name Event Event usage Fig. 14.11 | Click event details.

  30. 14.4  Control Properties and Layout Fig. 14.12|Class Control properties and methods. (Part 1 of 2.)

  31. 14.4  Control Properties and Layout (Cont.) Fig. 14.12|Class Control properties and methods. (Part 2 of 2.)

  32. 14.4 Control Properties and Layout (cont.) •The Focus method transfers the focus to a control. • When you press the Tab key, controls receive the focus in the order specified by their TabIndex property. • The Enabled property indicates whether the user can interact with a control to generate an event. • You can also hide a control by setting the Visible property to False.

  33. 14.4 Control Properties and Layout (cont.) • Anchoring causes controls to remain at a fixed distance from the sides of the container. • Set the Anchor property as shown in Fig. 14.13. Anchoring window Click the down-arrow in the Anchor property to Darkened bars indicate the container’s side(s) to which the control is anchored; use mouse clicks to select or deselect a bar Fig. 14.13|Manipulating the Anchor property of a control.

  34. 14.4 Control Properties and Layout (cont.) • Execute the application and enlarge the Form (Fig. 14.14). Before resizing After resizing Constant distance to right and bottom sides Fig. 14.14| Anchoring demonstration.

  35. 14.4 Control Properties and Layout (Cont.) • Docking allows a control to span an entire side or fill its parent container. • Forms have a Padding property that specifies the docked item’s distance from the edge. Before resizing After resizing Control extends along entire top of form Fig. 14.15| Docking a Button to the top of a Form.

  36. 14.4  Control Properties and Layout (Cont.) Fig. 14.16|Control layout properties. Look-and-Feel Observation 14.2 For resizable Forms, ensure that the GUI layout appears consistent across various Form sizes.

  37. 14.4  Control Properties and Layout (Cont.) • Snap lines appear to help you position a control with respect to other controls (Fig. 14.17). • When selecting a control, the Format menu contains several options for modifying your GUI’s layout. Snap line to help align controls on their left sides Snap line that indicates when a control reaches the minimum recommended distance from the edge of a Form. Fig. 14.17| Snap lines in Visual Studio 2008.

  38. 14.5  Labels, TextBoxes and Buttons Fig. 14.18|Common Label properties.

  39. 14.5  Labels, TextBoxes and Buttons (Cont.) Fig. 14.19|TextBox properties and an event.

  40. 14.5  Labels, TextBoxes and Buttons (Cont.) Fig. 14.20|Button properties and an event. Look-and-Feel Observation 14.3 Although Labels, TextBoxes and other controls can respond to mouse clicks, Buttons are more natural for this purpose.

  41. Outline • In this application (Fig. 14.21), when theuser clicks the Show MeButton, the text typed inthe password TextBox is displayed in a Label. • Make inputPasswordTextBox a passwordTextBox by setting UseSystemPasswordCharto True. LabelTextBoxButtonTestForm.vb ( 1 of 2 ) Obtaining the input text and displaying the text in displayPasswordLabel. Fig. 14.21|Program to display hidden text in a password box. (Part 1 of 2.)

  42. Outline LabelTextBoxButtonTestForm.vb ( 2 of 2 ) Fig. 14.21|Program to display hidden text in a password box. (Part 2 of 2.)

  43. 14.6  GroupBoxes and Panels • GroupBoxes and Panels arrange controls on a GUI. • GroupBoxes can display a caption and do not include scrollbars, whereas Panels can include scrollbars and do not include a caption. Fig. 14.22|GroupBoxproperties.

  44. 14.6  GroupBoxes and Panels (Cont.) Look-and-Feel Observation 14.4 Panels and GroupBoxes can contain other Panels andGroupBoxes for more complex layouts. Fig. 14.23|Panel properties.

  45. 14.6  GroupBoxes and Panels (Cont.) Look-and-Feel Observation 14.5 You can organize a GUI by anchoring and docking controls inside a GroupBox or Panel. The GroupBox or Panel can then be anchored or docked inside a Form. This divides controls into functional “groups” that can be arranged easily.

  46. 14.6 GroupBoxes and Panels (Cont.) • To create a GroupBox, drag its icon from the Toolbox onto the Form. Then drag new controls from the Toolbox into the GroupBox (Fig.14.24). Control inside Panel Panel Panel scrollbars Panel resized Fig. 14.24 | Creating a Panel with scrollbars.

  47. Outline GroupboxPanelExampleForm.vb ( 1 of 2 ) Handling a mouse click on hiButton. Fig. 14.25|Using GroupBoxes and Panels toarrange Buttons. (Part 1 of 2.)

  48. Outline GroupboxPanelExampleForm.vb ( 2 of 2 ) Fig. 14.25|Using GroupBoxes and Panels toarrange Buttons. (Part 2 of 2.)

  49. 14.7  CheckBoxes and RadioButtons • Visual Basic has two types of state buttons that can be in the on/off or true/false states—CheckBoxes and RadioButtons. • Any number of CheckBoxes can be selected at a time. Fig. 14.26|CheckBox properties and events.

  50. Outline CheckBoxTestForm.vb ( 1 of 2 ) Handling the boldCheckBox’s state change. Handling the italicCheckBox’s state change. Fig. 14.27|Using CheckBoxes to changefont styles. (Part 1 of 2.)

More Related