 2009 Pearson Education, Inc. All rights reserved. 1 14 Graphical User Interfaces with Windows Forms.

 2009 Pearson Education, Inc. All rights reserved. 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

 2009 Pearson Education, Inc. All rights reserved. 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.

 2009 Pearson Education, Inc. All rights reserved. 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.

 2009 Pearson Education, Inc. All rights reserved. 5 14.1 Introduction 14.2 Windows Forms 14.3 Event Handling 14.4 Control Properties and Layout 14.5 Label s, TextBox es and Button s 14.6 GroupBox es and Panel s 14.7 CheckBox es and RadioButton s 14.8 PictureBox es 14.9 ToolTip s

 2009 Pearson Education, Inc. All rights reserved. 6 14.10 NumericUpDown Control 14.11 Mouse-Event Handling 14.12 Keyboard-Event Handling 14.13 Menus 14.14 MonthCalendar Control 14.15 DateTimePicker Control 14.16 LinkLabel Control 14.17 ListBox Control 14.18 CheckedListBox Control

 2009 Pearson Education, Inc. All rights reserved. 7 14.19 ComboBox Control 14.20 TreeView Control 14.21 ListView Control 14.22 TabControl Control 14.23 Multiple Document Interface (MDI) Windows 14.24 Visual Inheritance 14.25 User-Defined Controls

 2009 Pearson Education, Inc. All rights reserved. 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. Fig. 14.1 | GUI controls in an Internet Explorer window. MenuMenu bar Button Tool barScrollbarsTitle bar Tab s

 2009 Pearson Education, Inc. All rights reserved. 9 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. 14.1 Introduction (Cont.)

 2009 Pearson Education, Inc. All rights reserved. 10 14.1 Introduction (Cont.) Fig. 14.2 | Some basic GUI controls. GUI controls are objects that can display information on the screen or enable users to interact with an application (Fig. 14.2).

 2009 Pearson Education, Inc. All rights reserved. 11 14.2 Windows Form s 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.

 2009 Pearson Education, Inc. All rights reserved. 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 Form s.

 2009 Pearson Education, Inc. All rights reserved. 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.

 2009 Pearson Education, Inc. All rights reserved. 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 to an event is called an event handler.

 2009 Pearson Education, Inc. All rights reserved. 17 The Form in the application of Fig. 14.5 contains a Button which displays a MessageBox. Outline SimpleEventExample Form.vb Fig. 14.5 | Simple event-handling example using visual programming. clickMeButton ’s Click event handler.

 2009 Pearson Education, Inc. All rights reserved. 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 Click Me. Create an event handler by double clicking the Button. Private Sub clickMeButton_Click(ByVal sender As System.Object, _ByVal e As System.EventArgs) Handles clickMeButton.Click End Sub

 2009 Pearson Education, Inc. All rights reserved. 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 names will be meaningful. Such names tell users what event a method handles for what control.

 2009 Pearson Education, Inc. All rights reserved. 21 14.3 Event Handling (Cont.) 14.3.2 Another 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.

 2009 Pearson Education, Inc. All rights reserved. 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.

 2009 Pearson Education, Inc. All rights reserved. 24 14.3 Event Handling (Cont.) 14.3.3 Delegates 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. Handles controlName.eventName

 2009 Pearson Education, Inc. All rights reserved. 25 14.3 Event Handling (Cont.) 14.3.4 Other Ways to Create Event Handlers Use the Class Name and Method Name ComboBox es to select events for that control (Fig. 14.8). Fig. 14.8 | Creating an event handler in the Code editor.

 2009 Pearson Education, Inc. All rights reserved. 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). Fig. 14.7 | Viewing events for a Button control in the Properties window. Events icon Selected event Properties icon

 2009 Pearson Education, Inc. All rights reserved. 27 14.3 Event Handling (Cont.) 14.3.5 Locating 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.

 2009 Pearson Education, Inc. All rights reserved. 29 14.3 Event Handling (Cont.) Click the name of an event to view its description and examples of its use (Fig. 14.11). Event usage Event name Event Fig. 14.11 | Click event details.

 2009 Pearson Education, Inc. All rights reserved. 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.

 2009 Pearson Education, Inc. All rights reserved. 33 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. 14.4 Control Properties and Layout (cont.) Fig. 14.13 | Manipulating the Anchor property of a control. 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

 2009 Pearson Education, Inc. All rights reserved. 34 14.4 Control Properties and Layout (cont.) Execute the application and enlarge the Form (Fig. 14.14). Fig. 14.14 | Anchoring demonstration. Constant distance to right and bottom sides Before resizingAfter resizing

 2009 Pearson Education, Inc. All rights reserved. 35 14.4 Control Properties and Layout (Cont.) Docking allows a control to span an entire side or fill its parent container. Form s have a Padding property that specifies the docked item’s distance from the edge. Fig. 14.15 | Docking a Button to the top of a Form. Before resizingAfter resizing Control extends along entire top of form

 2009 Pearson Education, Inc. All rights reserved. 36 14.4 Control Properties and Layout (Cont.) Fig. 14.16 | Control layout properties. Look-and-Feel Observation 14.2 For resizable Form s, ensure that the GUI layout appears consistent across various Form sizes.

 2009 Pearson Education, Inc. All rights reserved. 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.

 2009 Pearson Education, Inc. All rights reserved. 40 14.5 Label s, TextBox es and Button s (Cont.) Fig. 14.20 | Button properties and an event. Look-and-Feel Observation 14.3 Although Label s, TextBox es and other controls can respond to mouse clicks, Button s are more natural for this purpose.

 2009 Pearson Education, Inc. All rights reserved. 41 In this application (Fig. 14.21), when the user clicks the Show Me Button, the text typed in the password TextBox is displayed in a Label. Make inputPasswordTextBox a password TextBox by setting UseSystemPasswordChar to True. Outline LabelTextBoxButton TestForm.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.)

 2009 Pearson Education, Inc. All rights reserved. 43 14.6 GroupBox es and Panel s GroupBoxes and Panels arrange controls on a GUI. GroupBox es can display a caption and do not include scrollbars, whereas Panel s can include scrollbars and do not include a caption. Fig. 14.22 | GroupBox properties.

 2009 Pearson Education, Inc. All rights reserved. 44 14.6 GroupBox es and Panel s (Cont.) Fig. 14.23 | Panel properties. Look-and-Feel Observation 14.4 Panel s and GroupBox es can contain other Panel s and GroupBox es for more complex layouts.

 2009 Pearson Education, Inc. All rights reserved. 45 14.6 GroupBox es and Panel s (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.

 2009 Pearson Education, Inc. All rights reserved. 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). Panel Control inside Panel Panel scrollbars Panel resized Fig. 14.24 | Creating a Panel with scrollbars.

 2009 Pearson Education, Inc. All rights reserved. 47 Outline GroupboxPanelExamp leForm.vb ( 1 of 2 ) Handling a mouse click on hiButton. Fig. 14.25 | Using GroupBox es and Panel s to arrange Button s. (Part 1 of 2.)

 2009 Pearson Education, Inc. All rights reserved. 49 14.7 CheckBox es and RadioButton s Visual Basic has two types of state buttons that can be in the on/off or true/false states — CheckBox es and RadioButton s. Any number of CheckBox es can be selected at a time. Fig. 14.26 | CheckBox properties and events.

 2009 Pearson Education, Inc. All rights reserved. 50 Outline CheckBoxTestForm.vb ( 1 of 2 ) Handling the boldCheckBox ’s state change. Handling the italicCheckBox ’s state change. Fig. 14.27 | Using CheckBox es to change font styles. (Part 1 of 2.)

 2009 Pearson Education, Inc. All rights reserved. 51 a) Plain font styleb) Bold font style c) Bold and italic font styled) Italic font style Outline CheckBoxTestForm.vb ( 2 of 2 ) Fig. 14.27 | Using CheckBox es to change font styles. (Part 2 of 2.)

 2009 Pearson Education, Inc. All rights reserved. 52 14.7 CheckBox es and RadioButto ns (Cont.) RadioButton s are used to represent a set of mutually exclusive options. To separate RadioButton s into groups, use separate GroupBox es or Panel s. Fig. 14.28 | RadioButton properties and an event.

 2009 Pearson Education, Inc. All rights reserved. 53 Look-and-Feel Observation 14.6 Use RadioButton s when the user should choose only one option in a group. Look-and-Feel Observation 14.7 Use CheckBox es when the user should be able to choose multiple options (or no options at all) in a group. Software Engineering Observation 14.2 Form s, GroupBox es and Panel s act as logical groups for RadioButton s. The RadioButton s within each group are mutually exclusive to each other, but not to those in different logical groups. 14.7 CheckBox es and RadioButton s (Cont.)

 2009 Pearson Education, Inc. All rights reserved. 54 The program in Fig. 14.29 uses RadioButton s to enable users to select options for a MessageBox. Outline RadioButtonsTest Form.vb ( 1 of 11 ) To store the user’s choices, we create and initialize variables iconType and buttonType. When a RadioButton is checked, its event handler sets buttonType to the appropriate value. Fig. 14.29 | Using RadioButton s to set message-window options. (Part 1 of 11.)

 2009 Pearson Education, Inc. All rights reserved. 61 Outline RadioButtonsTest Form.vb ( 8 of 11 ) Creating a MessageBox with the specified icon and buttons. Fig. 14.29 | Using RadioButton s to set message-window options. (Part 8 of 11.)

 2009 Pearson Education, Inc. All rights reserved. 63 a) Selection window b) AbortRetryIgnore button type Outline RadioButtonsTest Form.vb ( 10 of 11 ) Fig. 14.29 | Using RadioButton s to set message-window options. (Part 10 of 11.)

 2009 Pearson Education, Inc. All rights reserved. 64 g) YesNo button type h) RetryCancel button type Outline RadioButtonsTest Form.vb ( 11 of 11 ) Fig. 14.29 | Using RadioButton s to set message-window options. (Part 11 of 11.)

 2009 Pearson Education, Inc. All rights reserved. 66 Retrieving the correct image from resources. Setting the Image property of the PictureBox to the resource. Outline PictureBoxTest Form.vb ( 1 of 2 ) Fig. 14.31 | Using a PictureBox to display images. (Part 1 of 2.)

 2009 Pearson Education, Inc. All rights reserved. 67 a) First Imageb) Second Image c) Third Image Outline PictureBoxTest Form.vb ( 2 of 2 ) Fig. 14.31 | Using a PictureBox to display images. (Part 2 of 2.)

 2009 Pearson Education, Inc. All rights reserved. 69 A ToolTip component from the Toolbox appears in the component tray—the gray region below the Form in Design mode. a)b) Outline ToolTipDemons trationForm.vb Fig. 14.33 | Demonstrating the ToolTip component.

 2009 Pearson Education, Inc. All rights reserved. 72 14.9 NumericUpDown Control The NumericUpDown control restricts a user ’ s input choices to a specific range of numeric values. Fig. 14.36 | NumericUpDown properties and an event.

 2009 Pearson Education, Inc. All rights reserved. 73 Figure 14.37 demonstrates a NumericUpDown control for a GUI that calculates interest rate. Retrieving the value from the NumericUpDown control. Outline NumericUpDown TestForm.vb ( 1 of 3 ) Fig. 14.37 | Demonstrating the NumericUpDown control. (Part 1 of 3.)

 2009 Pearson Education, Inc. All rights reserved. 75 Click to increase number of years Click to decrease number of years NumericUpDown control Outline NumericUpDown TestForm.vb ( 3 of 3 ) Fig. 14.37 | Demonstrating the NumericUpDown control. (Part 3 of 3.)

 2009 Pearson Education, Inc. All rights reserved. 76 14.10 NumericUpDown Control (Cont.) We set the NumericUpDown ’ s ReadOnly property to True to indicate that the user cannot type a number into the control to make a selection. The output for this application is displayed in a multiline read-only TextBox with a vertical scrollbar so that the user can scroll through the entire output.

 2009 Pearson Education, Inc. All rights reserved. 77 14.11 Mouse-Event Handling Mouse events are caused by actions such as clicks, presses and moves. Information is passed to the event-handling method through an object of class MouseEventArgs.

 2009 Pearson Education, Inc. All rights reserved. 80 When the user clicks drags the mouse in this program (Fig. 14.39), small circles appear at its position. Handles a mouse button click. Handles a mouse button release. Outline PaintForm.vb ( 1 of 2 ) Fig. 14.39 | Using the mouse to draw on a Form. (Part 1 of 2.)

 2009 Pearson Education, Inc. All rights reserved. 81 The program draws on a MouseMove only if shouldPaint is True. Outline PaintForm.vb ( 2 of 2 ) Fig. 14.39 | Using the mouse to draw on a Form. (Part 2 of 2.)

 2009 Pearson Education, Inc. All rights reserved. 84 Responding to character keys. Responding to control keys. Outline KeyDemoForm.vb ( 1 of 3 ) Fig. 14.41 | Demonstrating keyboard events. (Part 1 of 3.)

 2009 Pearson Education, Inc. All rights reserved. 85 Handling released keys (both control keys and character keys). Responding to control keys. Outline KeyDemoForm.vb ( 2 of 3 ) Fig. 14.41 | Demonstrating keyboard events. (Part 2 of 3.)

 2009 Pearson Education, Inc. All rights reserved. 86 a) H pressedb) F12 pressedc) $ pressedd) Insert pressed Outline KeyDemoForm.vb ( 3 of 3 ) Fig. 14.41 | Demonstrating keyboard events. (Part 3 of 3.)

 2009 Pearson Education, Inc. All rights reserved. 87 Software Engineering Observation 14.3 To make a control react when a particular key is pressed (such as Enter), handle a key event for that control and test for the pressed key. To allow a Button to be clicked when the user presses the Enter key on a Form, set the Form ’s AcceptButton property.

 2009 Pearson Education, Inc. All rights reserved. 88 14.13 Menus Menus provide groups of related commands without “cluttering” the application’s user interface. In Fig. 14.42, an expanded menu lists menu items and submenus.

 2009 Pearson Education, Inc. All rights reserved. 89 14.13 Menus (Cont.) Fig. 14.42 | Menus, submenus, menu items and menu icons. MenuMenu itemsSubmenuShortcut keyDisabled commands Menu iconsSeparator barChecked menu item

 2009 Pearson Education, Inc. All rights reserved. 90 14.13 Menus To create a menu, drag a MenuStrip control onto the Form. Click the Type Here TextBox (Fig. 14.43) and type the menu item ’ s name. Fig. 14.43 | Editing menus in Visual Studio. Type menu name in TextBox MenuStrip icon Main menu bar

 2009 Pearson Education, Inc. All rights reserved. 91 14.13 Menus (Cont.) After you press the Enter key, the menu item name is added to the menu (Fig. 14.44). Fig. 14.44 | Adding ToolStripMenuItems to a MenuStrip. Place & character before a letter to underline it in the menu, so that the character can be used as an access shortcut TextBox for adding another top-level menu TextBox for adding a menu item to the existing top-level menu

 2009 Pearson Education, Inc. All rights reserved. 92 14.13 Menus (Cont.) To create an access shortcut (or keyboard shortcut), type an ampersand ( & ) before the character to be underlined. – To display an ampersand, type &&.

 2009 Pearson Education, Inc. All rights reserved. 93 14.13 Menus (Cont.) To add other shortcut keys, set the ShortcutKeys property of the appropriate ToolStripMenuItem s. In the window that appears (Fig. 14.45), use the CheckBoxes and drop-down list to select the shortcut keys. Fig. 14.45 | Menu item options. Setting modifier keys Select key (modifier and key combination specifies the shortcut key for the menu item)

 2009 Pearson Education, Inc. All rights reserved. 94 14.13 Menus (Cont.) Look-and-Feel Observation 14.8 Buttons can have access shortcuts. Place the & symbol immediately before the desired character in the Button’s text. To press the button by using its access key in the running application, press Alt and the underlined character.

 2009 Pearson Education, Inc. All rights reserved. 95 14.13 Menus (Cont.) Remove a menu item with the Delete key. Separator bars are inserted by right clicking and selecting Insert > Separator or by typing “-” for the text of a menu item. Clicking the down arrow on a new menu item (Fig. 14.46) allows you to select the type of item to add. Fig. 14.46 | Menu item options. Menu item options

 2009 Pearson Education, Inc. All rights reserved. 98 14.13 Menus (Cont.) Look-and-Feel Observation 14.9 9 It is a convention to place an ellipsis (… ) after the name of a menu item that, when selected, displays a dialog (e.g. Save As… ).

 2009 Pearson Education, Inc. All rights reserved. 99 MenuTestForm (Fig. 14.48) creates a simple menu on a Form. Outline MenuTestForm.vb ( 1 of 9 ) Handling a clicks on a MenuItem. Fig. 14.48 | Menus for changing text font and color. (Part 1 of 9.)

 2009 Pearson Education, Inc. All rights reserved. 100 Outline MenuTestForm.vb ( 2 of 9 ) Handling a clicks on a MenuItem. Changing font color when the Black MenuItem is checked. Fig. 14.48 | Menus for changing text font and color. (Part 2 of 9.)

 2009 Pearson Education, Inc. All rights reserved. 102 Outline MenuTestForm.vb ( 4 of 9 ) Changing font family by changing the Font property. Fig. 14.48 | Menus for changing text font and color. (Part 4 of 9.)

 2009 Pearson Education, Inc. All rights reserved. 103 Outline MenuTestForm.vb ( 5 of 9 ) Changing font style by changing the Font property. Fig. 14.48 | Menus for changing text font and color. (Part 5 of 9.)

 2009 Pearson Education, Inc. All rights reserved. 106 a) Program at start b) Changing font to bold Outline MenuTestForm.vb ( 8 of 9 ) Fig. 14.48 | Menus for changing text font and color. (Part 8 of 9.)

 2009 Pearson Education, Inc. All rights reserved. 107 c) Program with bold font d) Changing color to red e) Program with bold red font f) MessageBox displayed by File > About Software Engineering Observation 14.4 The mutual exclusion of menu items is not enforced by the MenuStrip. You must program this behavior. Outline MenuTestForm.vb ( 9 of 9 ) Fig. 14.48 | Menus for changing text font and color. (Part 9 of 9.)

 2009 Pearson Education, Inc. All rights reserved. 108 14.14 MonthCalendar Control Fig. 14.49 | MonthCalendar control. The MonthCalendar control (Fig. 14.49) displays a monthly calendar on the Form. Current day is outlined Selected day is highlighted

 2009 Pearson Education, Inc. All rights reserved. 110 14.15 DateTimePicker Control The DateTimePicker control is similar to the MonthCalendar control. Fig. 14.51 | DateTimePicker properties and an event. (Part 1 of 2.)

 2009 Pearson Education, Inc. All rights reserved. 112 Figure 14.52 demonstrates using the DateTimePicker control to select an item’s drop-off date. The date is always two days after drop off, or three days if a Sunday is reached. Accepting dates only after the present day. Accepting dates only one year from the present day. Outline DateTimePicker Test.vb ( 1 of 3 ) Fig. 14.52 | Demonstrating DateTimePicker. (Part 1 of 3.)

 2009 Pearson Education, Inc. All rights reserved. 113 Retrieving the selected date from the DateTimePicker ’s Value property. DateTime ’s AddDays method increases the date by three days. A String representing the delivery date is obtained by calling method ToLongDateString. Outline DateTimePicker Test.vb ( 2 of 3 ) Fig. 14.52 | Demonstrating DateTimePicker. (Part 2 of 3.)

 2009 Pearson Education, Inc. All rights reserved. 115 14.16 LinkLabel Control Fig. 14.53 | LinkLabel control in running program. The LinkLabel control displays links to other resources, such as files or Web pages (Fig. 14.53). When clicked, the LinkLabel generates a LinkClicked event. Hand image displays when mouse moves over LinkLabel LinkLabel on a Form

 2009 Pearson Education, Inc. All rights reserved. 117 14.16 LinkLabel Control (Cont.) Look-and-Feel Observation 14.10 A LinkLabel is the preferred control for indicating that the user can click a link to jump to a resource such as a Web page, though other controls can perform similar tasks.

 2009 Pearson Education, Inc. All rights reserved. 118 Class LinkLabelTestForm (Fig. 14.55) uses three LinkLabel s. Changing LinkColor to show a visited item. Opening a drive with a LinkLabel. Outline LinkLabelTest Form.vb ( 1 of 5 ) Fig. 14.55 | LinkLabel s used to link to a drive, a web page and an application. (Part 1 of 5.)

 2009 Pearson Education, Inc. All rights reserved. 119 Opening a web page with a LinkLabel. Opening an application with a LinkLabel. Outline LinkLabelTest Form.vb ( 2 of 5 ) Fig. 14.55 | LinkLabel s used to link to a drive, a web page and an application. (Part 2 of 5.)

 2009 Pearson Education, Inc. All rights reserved. 120 Click first LinkLabel to look at contents of C: drive Outline LinkLabelTest Form.vb ( 3 of 5 ) Fig. 14.55 | LinkLabel s used to link to a drive, a web page and an application. (Part 3 of 5.)

 2009 Pearson Education, Inc. All rights reserved. 121 Click second LinkLabel to go Deitel Web site Outline LinkLabelTest Form.vb ( 4 of 5 ) Fig. 14.55 | LinkLabel s used to link to a drive, a web page and an application. (Part 4 of 5.)

 2009 Pearson Education, Inc. All rights reserved. 122 Click on third LinkLabel open to look Notepad Outline LinkLabelTest Form.vb ( 5 of 5 ) Fig. 14.55 | LinkLabel s used to link to a drive, a web page and an application. (Part 5 of 5.)

 2009 Pearson Education, Inc. All rights reserved. 123 14.17 ListBox Control Fig. 14.56 | ListBox and CheckedListBox on a Form. A ListBox allows the user to view and select multiple items in a list. A CheckedListBox has CheckBox es next to each item in the list. Selected items Scrollbars appear if necessary ListBox CheckedListBox Checked item

 2009 Pearson Education, Inc. All rights reserved. 126 14.17 ListBox Control (Cont.) To add items to a ListBox or to a CheckedListBox, call method Add : myListBox.Items.Add( myListItem ) Add items to ListBox es and CheckedListBox es by examining the Items property in the Properties window (Fig. 14.58). Fig. 14.58 | String Collection Editor.

 2009 Pearson Education, Inc. All rights reserved. 127 Adding the text input as a ListBox item. Removing the selected item from a ListBox if any item is selected. Outline ListBoxTestForm.vb ( 1 of 3 ) Fig. 14.59 | Program that adds, removes and clears ListBox items. (Part 1 of 3.)

 2009 Pearson Education, Inc. All rights reserved. 129 a) Entering a new value b) Adding values to the list d) Empty listc) Clearing the list Outline ListBoxTestForm.vb ( 3 of 3 ) Fig. 14.59 | Program that adds, removes and clears ListBox items. (Part 3 of 3.)

 2009 Pearson Education, Inc. All rights reserved. 130 14.18 CheckedListBox Control The CheckedListBox control derives from class ListBox and includes a CheckBox next to each item. Fig. 14.60 | CheckedListBox properties, a method and an event. (Part 1 of 2.)

 2009 Pearson Education, Inc. All rights reserved. 132 14.18 CheckedListBox Control (Cont.) Common Programming Error 14.1 The IDE displays an error message if you attempt to set the SelectionMode property to MultiSimple or MultiExtended in the Properties window of a CheckedListBox. If this value is set programmatically, a runtime error occurs.

 2009 Pearson Education, Inc. All rights reserved. 133 Event ItemCheck occurs when a user checks or unchecks a CheckedListBox item. Putting the item in the ListBox if the item is checked, and removing the item if it is unchecked. Retrieving the text of a selected CheckedListBox item. Outline CheckedListBoxTest Form.vb ( 1 of 2 ) Fig. 14.61 | CheckedListBox and ListBox used in a program to display a user selection. (Part 1 of 2.)

 2009 Pearson Education, Inc. All rights reserved. 134 a) All items unchecked b) Selecting and checking items d) Checking an item c) Unchecking a selected item Outline CheckedListBoxTest Form.vb ( 2 of 2 ) Fig. 14.61 | CheckedListBox and ListBox used in a program to display a user selection. (Part 2 of 2.)

 2009 Pearson Education, Inc. All rights reserved. 135 14.19 ComboBox Control The ComboBox control combines TextBox features with a drop-down list. By default, the user can enter text into the TextBox or click the down arrow to display a list of predefined items. Figure 14.62 shows a sample ComboBox in three different states. Fig. 14.62 | ComboBox demonstration. Selecting an item from drop- down list changes text in TextBox portion Click the down arrow to display items in drop-down list

 2009 Pearson Education, Inc. All rights reserved. 137 14.19 ComboBox Control (Cont.) Property DropDownStyle determines the type of ComboBox. – Option Simple displays a scrollbar next to the control. – Style DropDown (default) displays a drop-down list. The user can type a new item in the ComboBox. – The last style is DropDownList, which displays a drop- down list but does not allow the user to type in the ComboBox.

 2009 Pearson Education, Inc. All rights reserved. 139 Retrieving the index of an item selected from the ComboBox. Drawing a shape at specific coordinates. Outline ComboBoxTest.vb ( 2 of 3 ) Fig. 14.64 | ComboBox used to draw a selected shape. (Part 2 of 3.)

 2009 Pearson Education, Inc. All rights reserved. 140 a) Choosing a shape b) Selecting a circle d) Selecting a filled pie shape c) Selecting a filled square Outline ComboBoxTest.vb ( 3 of 3 ) Fig. 14.64 | ComboBox used to draw a selected shape. (Part 3 of 3.)

 2009 Pearson Education, Inc. All rights reserved. 141 Look-and-Feel Observation 14.12 Make lists (such as ComboBox es) editable only if the program is designed to accept user-submitted elements. Otherwise, the user might try to enter a custom item that is improper for the purposes of your application.

 2009 Pearson Education, Inc. All rights reserved. 142 14.20 TreeView Control The TreeView control displays nodes hierarchically in a tree. A parent node can be expanded or collapsed by clicking the plus box or minus box to its left. Fig. 14.65 | TreeView displaying a sample tree. Root node Click + to expand node and display child nodes Click – to collapse node and hide child nodes Child nodes (of Manager1)

 2009 Pearson Education, Inc. All rights reserved. 146 14.20 TreeView Control (Cont.) To use the TreeNode Editor (Fig. 14.68), click the ellipsis next to the Nodes property in the Properties window. Fig. 14.68 | TreeNode Editor. Delete current node

 2009 Pearson Education, Inc. All rights reserved. 147 To add nodes programmatically, first create a new TreeNode object and pass it a String to display. Call Add to add a new TreeNode to the TreeView ’s Nodes collection: myTreeView.Nodes.Add(rootLabel) Select the appropriate root node from the TreeView by writing myTreeView.Nodes(myIndex) To add a child to the root node at index myIndex, write myTreeView.Nodes(myIndex). Nodes.Add(childNodeText) 14.20 TreeView Control (Cont.)

 2009 Pearson Education, Inc. All rights reserved. 148 Opening the specified directory if it exists. Removing all items from the TreeView. Outline TreeViewDirectory Structure.vb ( 1 of 4 ) Fig. 14.69 | TreeView used to display directories. (Part 1 of 4.)

 2009 Pearson Education, Inc. All rights reserved. 149 Obtaining a list of subdirectories. Outline TreeViewDirectory Structure.vb ( 2 of 4 ) Fig. 14.69 | TreeView used to display directories. (Part 2 of 4.)

 2009 Pearson Education, Inc. All rights reserved. 150 Setting the node label to the shortened file name. Adding the processed TreeNode. Adding a TreeNode representing an inaccessible directory. Outline TreeViewDirectory Structure.vb ( 3 of 4 ) Fig. 14.69 | TreeView used to display directories. (Part 3 of 4.)

 2009 Pearson Education, Inc. All rights reserved. 152 14.21 ListView Control Fig. 14.70 | ListView properties and an event. (Part 1 of 2) The ListView control is similar to a ListBox, but ListView can display icons and details next to list items.

 2009 Pearson Education, Inc. All rights reserved. 154 14.21 ListView Control (Cont.) Create an ImageList by dragging it to a Form from the ToolBox. Select the Images property to display the Image Collection Editor (Fig. 14.71). Fig. 14.71 | Image Collection Editor window for an ImageList component.

 2009 Pearson Education, Inc. All rights reserved. 155 Adding Image s to the ListView to represent directories and files. Outline ListViewTest Form.vb ( 1 of 6 ) Fig. 14.72 | ListView displaying files and folders. (Part 1 of 6.)

 2009 Pearson Education, Inc. All rights reserved. 156 Determining if any items are selected. String chosen is assigned the text of the first selected item Determining whether the user chose the first item. Outline ListViewTest Form.vb ( 2 of 6 ) Fig. 14.72 | ListView displaying files and folders. (Part 2 of 6.)

 2009 Pearson Education, Inc. All rights reserved. 157 Setting a basic folder view before adding items. Outline ListViewTest Form.vb ( 3 of 6 ) Fig. 14.72 | ListView displaying files and folders. (Part 3 of 6.)

 2009 Pearson Education, Inc. All rights reserved. 158 Adding any subdirectories to the ListView. Adding a folder icon to any subdirectories. Adding any files in the directory to the ListView. Outline ListViewTest Form.vb ( 4 of 6 ) Fig. 14.72 | ListView displaying files and folders. (Part 4 of 6.)

 2009 Pearson Education, Inc. All rights reserved. 160 a) Program starts in the local folder b) Navigating the file c) Error message displayed if access is denied Outline ListViewTest Form.vb ( 6 of 6 ) Fig. 14.72 | ListView displaying files and folders. (Part 6 of 6.)

 2009 Pearson Education, Inc. All rights reserved. 161 14.21 ListView Control (Cont.) To add the icons for folders and files, add images from the bin\Debug folder of this example to the project’s Resources. Set the object browserListView property SmallImageList to an ImageList by using the Properties window. Software Engineering Observation 14.5 When designing applications that run for long periods of time, you might choose a large initial delay to improve performance throughout the rest of the program. However, in applications that run for only short periods, developers often prefer fast initial loading times and small delays after each action.

 2009 Pearson Education, Inc. All rights reserved. 162 14.22 TabControl Control Tabbed windows are used in several applications, including Visual Studio (Fig. 14.73). Fig. 14.73 | Tabbed windows in Visual Studio. Tabs

 2009 Pearson Education, Inc. All rights reserved. 163 14.22 TabControl Control (Cont.) The TabControl control (Fig. 14.74) creates tabbed windows. TabControl s contain TabPage s, similar to Panel s and GroupBox es. Fig. 14.74 | TabControl with TabPages example. TabPage Controls in TabPage TabControl

 2009 Pearson Education, Inc. All rights reserved. 164 14.22 TabControl Control (Cont.) Add TabControl s by dragging and dropping them onto a Form in Design mode. To add TabPage s in Design mode, right click the TabControl and select Add Tab (Fig. 14.75). Fig. 14.75 | TabPages added to a TabControl.

 2009 Pearson Education, Inc. All rights reserved. 166 Programatically add controls with statements like myTabPage.Controls.Add(myControl) myTabControl.TabPages.Add(myTabPage) Outline UsingTabsForm.vb ( 1 of 7 ) Fig. 14.77 | TabControl used to display various font settings. (Part 1 of 6.)

 2009 Pearson Education, Inc. All rights reserved. 171 c) The Message tabd) The About tab Outline UsingTabsForm.vb ( 6 of 7 ) Fig. 14.77 | TabControl used to display various font settings. (Part 6 of 6.)

 2009 Pearson Education, Inc. All rights reserved. 172 Outline UsingTabsForm.vb ( 7 of 7 ) Software Engineering Observation 14.6 A TabPage can act as a container for a single logical group of RadioButton s, enforcing their mutual exclusivity. To place multiple RadioButton groups inside a single TabPage, group the RadioButton s within Panel s or GroupBox es and attach these containers to the TabPage.

 2009 Pearson Education, Inc. All rights reserved. 173 14.23 Multiple Document Interface (MDI) Windows Multiple document interfaces (MDIs) allow users to edit multiple documents at once. The main window is the parent window, and each window inside the application is a child window (Fig. 14.78).

 2009 Pearson Education, Inc. All rights reserved. 175 14.23 Multiple Document Interface (MDI) Windows (Cont.) Fig. 14.79 | SDI and MDI forms. Single Document Interface (SDI) To create an MDI Form, create a new Form and set its IsMdiContainer property to True (Fig. 14.79). Multiple Document Interface (MDI)

 2009 Pearson Education, Inc. All rights reserved. 176 14.23 Multiple Document Interface (MDI) Windows (Cont.) To make a Form into a child, set its MdiParent property to the parent Form : Dim childForm As New ChildFormClass () childForm.MdiParent = parentForm childForm.Show() An event handler often creates a new child window in response to a user action in the parent.

 2009 Pearson Education, Inc. All rights reserved. 178 14.23 Multiple Document Interface (MDI) Windows (Cont.) Fig. 14.81 | Minimized and maximized child windows. Parent title bar indicates maximize child Child windows can be minimized, maximized and closed independently. Maximized child window icons: minimize, restore and close Parent window icon: Minimize, maximize and close Minimized child window icons: restore, maximize and close a)b)

 2009 Pearson Education, Inc. All rights reserved. 179 14.23 Multiple Document Interface (MDI) Windows (Cont.) Fig. 14.82 | MenuStrip property MdiWindowListItem example. (Part 1 of 2.) Property MdiWindowListItem specifies a menu for displaying a list of open child windows (Fig. 14.82). child windows list a)

 2009 Pearson Education, Inc. All rights reserved. 180 14.23 Multiple Document Interface (MDI) Windows (Cont.) Nine or more child windows enables the More Windows… option b) c) Fig. 14.82 | MenuStrip property MdiWindowListItem example. (Part 2 of 2.)

 2009 Pearson Education, Inc. All rights reserved. 181 14.23 Multiple Document Interface (MDI) Windows (Cont.) Good Programming Practice 14.2 When creating MDI applications, include a menu that displays a list of the open child windows. This helps the user select a child window quickly, rather than having to search for it in the parent window.

 2009 Pearson Education, Inc. All rights reserved. 182 14.23 Multiple Document Interface (MDI) Windows (Cont.) MDI containers allow you to organize child windows by calling method LayoutMdi with one of the MdiLayout constants. Figure 14.83 illustrates the values of the MdiLayout enumeration.

 2009 Pearson Education, Inc. All rights reserved. 184 14.23 Multiple Document Interface (MDI) Windows (Cont.) c) TileHorizontal d) TileVertical Fig. 14.83 | MdiLayout enumeration values. (Part 2 of 2.)

 2009 Pearson Education, Inc. All rights reserved. 185 Figure 14.84 presents UsingMDIForm —the application’s MDI parent Form. Generating a child MDIWindow. UsingMDI.vb ( 1 of 6 ) Outline Fig. 14.84 | MDI parent-window class. (Part 1 of 6.)

 2009 Pearson Education, Inc. All rights reserved. 192 Visual inheritance enables you to achieve visual consistency across your applications by giving them a common look-and-feel.. VisualInheritance Form.vb ( 1 of 2 ) Outline Fig. 14.86 | Class FrmVisualInheritance, which inherits from class Form, contains a Button ( Learn More ). (Part 1 of 2.)

 2009 Pearson Education, Inc. All rights reserved. 193 a)b) VisualInheritance Form.vb ( 2 of 2 ) Outline Fig. 14.86 | Class FrmVisualInheritance, which inherits from class Form, contains a Button ( Learn More ). (Part 2 of 2.)

 2009 Pearson Education, Inc. All rights reserved. 194 14.24 Visual Inheritance (Cont.) Right click the project name in the Solution Explorer and select Properties, then choose the Application tab. In the Application type drop-down list, change Windows Application to Class Library. Building the project produces a.dll.

 2009 Pearson Education, Inc. All rights reserved. 195 14.24 Visual Inheritance (Cont.) To visually inherit from VisualInheritanceForm, add a reference to the.dll you just created, and add the line: Inherits VisualInheritance.VisualInheritanceForm.

 2009 Pearson Education, Inc. All rights reserved. 196 14.24 Visual Inheritance (Cont.) Fig. 14.87 | Form demonstrating visual inheritance. In Design view, the new application’s Form now displays the inherited controls of the base class Fig. 14.87).

 2009 Pearson Education, Inc. All rights reserved. 197 VisualInheritance TestForm.vb ( 1 of 2 ) Outline Fig. 14.88 | Class VisualInheritanceTestForm, which inherits from class VisualInheritanceForm, contains an additional Button. (Part 1 of 2.)

 2009 Pearson Education, Inc. All rights reserved. 198 Derived class cannot modify these controls Derived class can modify this control VisualInheritance TestForm.vb ( 2 of 2 ) Outline Fig. 14.88 | Class VisualInheritanceTestForm, which inherits from class VisualInheritanceForm, contains an additional Button. (Part 2 of 2.)

 2009 Pearson Education, Inc. All rights reserved. 199 14.25 User-Defined Controls The simplest way to create a custom control is to derive a class from an existing control, such as a Label. All controls contain method OnPaint, which the system calls when a component must be redrawn. - Method OnPaint is passed a PaintEventArgs object, which contains graphics information. - The base class’s OnPaint method must be called explicitly before performing customized painting.

 2009 Pearson Education, Inc. All rights reserved. 201 This UserControl (Fig. 14.90) is composed of a Label and a Timer. ClockUser Control.vb ( 1 of 2 ) Outline Fig. 14.90 | UserControl -defined clock. (Part 1 of 2.)

 2009 Pearson Education, Inc. All rights reserved. 203 14.25 User-Defined Controls (Cont.) Create the ClockUserControl class by selecting Project > Add User Control …. Add a Label ( displayLabel ) and a Timer ( clockTimer ) to the UserControl. Set the Timer’s Interval to 1000. clockTimer must be Enabled.

 2009 Pearson Education, Inc. All rights reserved. 204 14.25 User-Defined Controls (Cont.) Visual Studio allows you to share custom controls with other developers: Create a new Class Library project and delete Class1.vb. Add a user control file and create your custom control (Fig. 14.91). Fig. 14.91 | Custom-control creation.

 2009 Pearson Education, Inc. All rights reserved. 205 14.25 User-Defined Controls (Cont.) Build the project and create a new Windows Forms application. Right click the Toolbox and select Choose Items…. Click Browse... and select the.dll file for the class library (Fig. 14.92). Fig. 14.92 | Custom control added to the ToolBox.

 2009 Pearson Education, Inc. All rights reserved. 206 14.25 User-Defined Controls (Cont.) Fig. 14.93 | Custom control added to the Form. New ToolBox icon Custom control dragged onto a Form Check this item. Click OK to add the item to the Toolbox (Fig. 14.93).

 2009 Pearson Education, Inc. All rights reserved. 1 14 Graphical User Interfaces with Windows Forms.

Similar presentations

Presentation on theme: " 2009 Pearson Education, Inc. All rights reserved. 1 14 Graphical User Interfaces with Windows Forms."— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

 2009 Pearson Education, Inc. All rights reserved. 1 14 Graphical User Interfaces with Windows Forms.

Similar presentations

Presentation on theme: " 2009 Pearson Education, Inc. All rights reserved. 1 14 Graphical User Interfaces with Windows Forms."— Presentation transcript:

Similar presentations

About project

Feedback