Presentation is loading. Please wait.

Presentation is loading. Please wait.

 2009 Pearson Education, Inc. All rights reserved. 1 15 Graphical User Interfaces with Windows Forms: Part 2.

Similar presentations


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

1  2009 Pearson Education, Inc. All rights reserved. 1 15 Graphical User Interfaces with Windows Forms: Part 2

2  2009 Pearson Education, Inc. All rights reserved. 2 I claim not to have controlled events, but confess plainly that events have controlled me. – Abraham Lincoln Capture its reality in paint! – Paul Cézanne An actor entering through the door, you’ve got nothing. But if he enters through the window, you’ve got a situation. – Billy Wilder But, soft! what light through yonder window breaks? It is the east, and Juliet is the sun! – William Shakespeare

3  2009 Pearson Education, Inc. All rights reserved. 3 OBJECTIVES In this chapter you will learn:  To create menus, tabbed windows and multiple document interface (MDI) programs.  To use the ListView and TreeView controls for displaying information.  To create hyperlinks using the LinkLabel control.  To display lists of information in ListBox and ComboBox controls.  To input date and time data with the DateTimePicker.  To create custom controls.

4  2009 Pearson Education, Inc. All rights reserved. 4 15.1 Introduction 15.2 Menus 15.3 MonthCalendar Control 15.4 DateTimePicker Control 15.5 LinkLabel Control 15.6 ListBox Control 15.7 CheckedListBox Control 15.8 ComboBox Control 15.9 TreeView Control 15.10 ListView Control 15.11 TabControl Control 15.12 Multiple Document Interface (MDI) Windows 15.13 Visual Inheritance 15.14 User-Defined Controls

5  2009 Pearson Education, Inc. All rights reserved. 5 15.1 Introduction Visual Studio provides a large set of GUI components. Visual Studio also enables you to design custom controls and add them to the ToolBox

6  2009 Pearson Education, Inc. All rights reserved. 6 15.2 Menus Menus provide groups of related commands (Fig. 15.1). Menus organize commands without “cluttering” the GUI. Fig. 15.1 | Menus, submenus and menu items. Checked menu item Submenu Separator bar Shortcut key Disabled commands Menu Menu items Menu icons

7  2009 Pearson Education, Inc. All rights reserved. 7 15.2 Menus (Cont.) To create a menu, open the Toolbox and drag a MenuStrip control onto the Form. To add menu items to the menu, click the Type Here TextBox (Fig. 15.2) and type the menu item’s name. Fig. 15.2 | Editing menus in Visual Studio. MenuStrip icon Type menu name in TextBox Main menu bar

8  2009 Pearson Education, Inc. All rights reserved. 8 15.2 Menus (Cont.) After you press the Enter key, the menu item is added. More Type Here TextBox es allow you to add more items (Fig. 15.3). Fig. 15.3 | Adding ToolStripMenuItems to a MenuStrip. Place & character before a letter to underline it in the menu, so the character can be used as an access shortcut TextBoxes for adding items to the menu

9  2009 Pearson Education, Inc. All rights reserved. 9 15.2 Menus (Cont.) Menus can have Alt key shortcuts which are accessed by pressing Alt and the underlined letter. To make the File menu item have a key shortcut, type &File. The letter F is underlined to indicate that it is a shortcut.

10  2009 Pearson Education, Inc. All rights reserved. 10 15.2 Menus (Cont.) Menu items can have shortcut keys as well (Ctrl, Shift, Alt, F1, F2, letter keys, and so on). To add other shortcut keys, set the ShortcutKeys property (Fig. 15.4). Fig. 15.4 | Setting a menu item’s shortcut keys. Select key (modifier and key combination specifies the shortcut key for the menu item) Setting modifier keys

11  2009 Pearson Education, Inc. All rights reserved. 11 15.2 Menus (Cont.) You can remove a menu item by selecting it with the mouse and pressing the Delete key. Menu items can be grouped by separator bars, which are inserted by right clicking and selecting Insert Separator or by typing “ - ” for the text of a menu item. Look-and-Feel Observation 15.1 Button s can have access shortcuts. Place the & symbol immediately before the desired character in the Button ’s text. To press the button, the user presses Alt and the underlined character.

12  2009 Pearson Education, Inc. All rights reserved. 12 15.2 Menus (Cont.) Visual Studio allows you to add TextBox es and ComboBox es as menu items. Before you enter text for a menu item, you are provided with a drop-down list. – Clicking the down arrow allows you to select the type of item to add (Fig. 15.5).

13  2009 Pearson Education, Inc. All rights reserved. 13 15.2 Menus (Cont.) Fig. 15.5 | Menu-item options. Menu item options

14  2009 Pearson Education, Inc. All rights reserved. 14 15.2 Menus (Cont.) Fig. 15.6 | MenuStrip and ToolStripMenuItem properties and an event. (Part 1 of 2.)

15  2009 Pearson Education, Inc. All rights reserved. 15 Fig. 15.6 | MenuStrip and ToolStripMenuItem properties and an event. (Part 2 of 2.) 15.2 Menus (Cont.)

16  2009 Pearson Education, Inc. All rights reserved. 16 Outline MenuTestForm.cs ( 1 of 10 ) Look-and-Feel Observation 15.2 It is a convention to place an ellipsis after the name of a menu item (e.g., Save As... ) that requires the user to provide more information— typically through a dialog. Class MenuTestForm (Fig. 15.7) creates a simple menu on a Form.

17  2009 Pearson Education, Inc. All rights reserved. 17 Outline MenuTestForm.cs ( 2 of 10 ) Fig. 15.7 | Menus for changing text font and color. (Part 1 of 9.)

18  2009 Pearson Education, Inc. All rights reserved. 18 Outline MenuTestForm.cs ( 3 of 10 ) Fig. 15.7 | Menus for changing text font and color. (Part 2 of 9.) The About menu item displays a MessageBox when clicked. The Exit menu item closes the application through method Exit of class Application.

19  2009 Pearson Education, Inc. All rights reserved. 19 Outline MenuTestForm.cs ( 4 of 10 ) Fig. 15.7 | Menus for changing text font and color. (Part 3 of 9.) Each Color menu item calls ClearColor before setting its Checked property (making the checks mutually exclusive).

20  2009 Pearson Education, Inc. All rights reserved. 20 Outline MenuTestForm.cs ( 5 of 10 ) Fig. 15.7 | Menus for changing text font and color. (Part 4 of 9.) Each Color menu item calls ClearColor before setting its Checked property (making the checks mutually exclusive).

21  2009 Pearson Education, Inc. All rights reserved. 21 Outline MenuTestForm.cs ( 6 of 10 ) Fig. 15.7 | Menus for changing text font and color. (Part 5 of 9.) Each Color menu item calls ClearColor before setting its Checked property (making the checks mutually exclusive). Each Font menu item calls ClearFont before setting its Checked property (making the checks mutually exclusive).

22  2009 Pearson Education, Inc. All rights reserved. 22 Outline MenuTestForm.cs ( 7 of 10 ) Fig. 15.7 | Menus for changing text font and color. (Part 6 of 9.) Each Font menu item calls ClearFont before setting its Checked property (making the checks mutually exclusive).

23  2009 Pearson Education, Inc. All rights reserved. 23 Outline MenuTestForm.cs ( 8 of 10 ) Fig. 15.7 | Menus for changing text font and color. (Part 7 of 9.) Each Font menu item calls ClearFont before setting its Checked property (making the checks mutually exclusive). The Bold and Italic menu items use the bitwise logical exclusive OR operator to combine font styles.

24  2009 Pearson Education, Inc. All rights reserved. 24 Outline MenuTestForm.cs ( 9 of 10 ) Fig. 15.7 | Menus for changing text font and color. (Part 8 of 9.) The Bold and Italic menu items use the bitwise logical exclusive OR operator to combine font styles.

25  2009 Pearson Education, Inc. All rights reserved. 25 Outline MenuTestForm.cs ( 10 of 10 ) Fig. 15.7 | Menus for changing text font and color. (Part 9 of 9.) a) Application at start b) Changing font to Bold c) Application with bold fontd) Changing font to Red e) Application with Red font f) Message from About menu item

26  2009 Pearson Education, Inc. All rights reserved. 26 15.2 Menus (Cont.) Software Engineering Observation 15.1 The mutual exclusion of menu items is not enforced by the MenuStrip, even when the Checked property is true. You must program this behavior.

27  2009 Pearson Education, Inc. All rights reserved. 27 15.3 MonthCalendar Control The MonthCalendar control (Fig. 15.8) displays a monthly calendar on the Form. Multiple dates can be selected by clicking dates on the calendar while holding down the Shift key. Fig. 15.8 | MonthCalendar control. Current day is outlined Selected day is highlighted

28  2009 Pearson Education, Inc. All rights reserved. 28 15.3 MonthCalendar Control Fig. 15.9 | MonthCalendar properties and an event.

29  2009 Pearson Education, Inc. All rights reserved. 29 15.4 DateTimePicker Control The DateTimePicker control displays a calendar when a down arrow is selected. The DateTimePicker can be used to retrieve date and time information from the user.

30  2009 Pearson Education, Inc. All rights reserved. 30 15.4 DateTimePicker Control Fig. 15.10 | DateTimePicker properties and an event. (Part 1 of 2.)

31  2009 Pearson Education, Inc. All rights reserved. 31 15.4 DateTimePicker Control Fig. 15.10 | DateTimePicker properties and an event. (Part 2 of 2.)

32  2009 Pearson Education, Inc. All rights reserved. 32 Outline Figure 15.11 demonstrates using the DateTimePicker control to select an item’s drop-off time. The DateTimePicker has its Format property set to Long. In this application, the arrival date is always two days after drop-off, or three days if a Sunday is reached. DateTimePicker Form.cs (1 of 5 )

33  2009 Pearson Education, Inc. All rights reserved. 33 Outline Fig. 15.11 | Demonstrating DateTimePicker. (Part 1 of 4.) DateTimePicker Form.cs (2 of 5 )

34  2009 Pearson Education, Inc. All rights reserved. 34 Outline DateTimePicker Form.cs (3 of 5 ) Fig. 15.11 | Demonstrating DateTimePicker. (Part 2 of 4.) Retrieving the selected date from the Value property. The DateTime structure’s DayOfWeek property determines the day of the week on which the selected date falls. Using DateTime ’s AddDays method to increase the date by two days or three days.

35  2009 Pearson Education, Inc. All rights reserved. 35 Outline DateTimePicker Form.cs (4 of 5 ) Fig. 15.11 | Demonstrating DateTimePicker. (Part 3 of 4.) Setting the MinDate and MaxDate properties to keep drop-off sometime in the next year.

36  2009 Pearson Education, Inc. All rights reserved. 36 Outline DateTimePicker Form.cs (5 of 5 ) Fig. 15.11 | Demonstrating DateTimePicker. (Part 4 of 4.) a) Clicking the down arrowb) Selecting a day from the calendar c) The Label updatesd) Selecting another day

37  2009 Pearson Education, Inc. All rights reserved. 37 15.5 LinkLabel Control The LinkLabel control displays links to other resources, such as files or web pages (Fig. 15.12). Fig. 15.12 | LinkLabel control in running program. Look-and-Feel Observation 15.3 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. LinkLabel on a Form Hand image displays when mouse moves over LinkLabel

38  2009 Pearson Education, Inc. All rights reserved. 38 15.5 LinkLabel Control (Cont.) Fig. 15.13 | LinkLabel properties and an event. (Part 1 of 2.) When clicked, the LinkLabel generates a LinkClicked event (Fig. 15.13). Class LinkLabel is derived from class Label and therefore inherits all of class Label ’s functionality.

39  2009 Pearson Education, Inc. All rights reserved. 39 15.5 LinkLabel Control (Cont.) Fig. 15.13 | LinkLabel properties and an event. (Part 2 of 2.)

40  2009 Pearson Education, Inc. All rights reserved. 40 Outline LinkLabelTest Form.cs (1 of 6 ) Class LinkLabelTestForm (Fig. 15.14) uses three LinkLabels. Method Start of class Process allows you to execute other programs, or load documents or web sites from an application. Fig. 15.14 | LinkLabel s used to link to a drive, a web page and an application. (Part 1 of 6.)

41  2009 Pearson Education, Inc. All rights reserved. 41 Outline Fig. 15.14 | LinkLabel s used to link to a drive, a web page and an application. (Part 2 of 6.) Setting the LinkVisited property to true, changing the link’s color to purple. Opening a web page in the user’s default web browser. LinkLabelTest Form.cs (2 of 6 ) Opening a Windows Explorer window. (the @ symbol indicates that characters in the string should be interpreted literally).

42  2009 Pearson Education, Inc. All rights reserved. 42 Outline Fig. 15.14 | LinkLabel s used to link to a drive, a web page and an application. (Part 3 of 6.) Opening an application. Windows recognizes the argument without a directory or file extension. LinkLabelTest Form.cs (3of 6 )

43  2009 Pearson Education, Inc. All rights reserved. 43 Outline Fig. 15.14 | LinkLabel s used to link to a drive, a web page and an application. (Part 4 of 6.) Click first LinkLabel to look at contents of C: drive LinkLabelTest Form.cs (4 of 6 )

44  2009 Pearson Education, Inc. All rights reserved. 44 Outline Fig. 15.14 | LinkLabel s used to link to a drive, a web page and an application. (Part 5 of 6.) Click second LinkLabel to go to Deitel website LinkLabelTest Form.cs (5 of 6 )

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

46  2009 Pearson Education, Inc. All rights reserved. 46 15.6 ListBox Control The ListBox control allows the user to view and select from multiple items in a list. The CheckedListBox control extends a ListBox by including CheckBox es next to each item in the list. Figure 15.15 displays a ListBox and a CheckedListBox.

47  2009 Pearson Education, Inc. All rights reserved. 47 15.6 ListBox Control (Cont.) Fig. 15.15 | ListBox and CheckedListBox on a Form. ListBox Selected items Checked item Scrollbars appear if necessary CheckedListBox

48  2009 Pearson Education, Inc. All rights reserved. 48 15.6 ListBox Control (Cont.) Fig. 15.16 | ListBox properties, methods and an event. (Part 1 of 2.)

49  2009 Pearson Education, Inc. All rights reserved. 49 15.6 ListBox Control (Cont.) Fig. 15.16 | ListBox properties, methods and an event.(Part 2 of 2.)

50  2009 Pearson Education, Inc. All rights reserved. 50 15.6 ListBox Control (Cont.) To add items to a ListBox or to a CheckedListBox, we must add objects to its Items collection. myListBox.Items.Add( myListItem ); You can add items to ListBox es and CheckedListBox es visually by examining the Items property in the Properties window (Fig. 15.17). Fig. 15.17 | String Collection Editor.

51  2009 Pearson Education, Inc. All rights reserved. 51 Outline ListBoxTest Form.cs (1 of 5 ) Figure 15.18 uses class ListBoxTestForm to add, remove and clear items from ListBox displayListBox.\ Fig. 15.18 | Program that adds, removes and clears ListBox items. (Part 1 of 5.)

52  2009 Pearson Education, Inc. All rights reserved. 52 Outline Fig. 15.18 | Program that adds, removes and clears ListBox items. (Part 2 of 5.) Adding string s using method Add of the Items collection. Using method RemoveAt to remove the item at the selected index. ListBoxTest Form.cs (2 of 5 )

53  2009 Pearson Education, Inc. All rights reserved. 53 Outline Fig. 15.18 | Program that adds, removes and clears ListBox items. (Part 3 of 5.) Using method Clear of the Items collection to remove all the entries. ListBoxTest Form.cs (3 of 5 )

54  2009 Pearson Education, Inc. All rights reserved. 54 Outline Fig. 15.18 | Program that adds, removes and clears ListBox items. (Part 4 of 5.) a) Adding an itemb) Adding more items ListBoxTest Form.cs (4 of 5 )

55  2009 Pearson Education, Inc. All rights reserved. 55 Outline Fig. 15.18 | Program that adds, removes and clears ListBox items. (Part 5 of 5.) c) An item has been removedd) Clearing the list ListBoxTest Form.cs (5 of 5 )

56  2009 Pearson Education, Inc. All rights reserved. 56 15.7 CheckedListBox Control Fig. 15.19 | CheckedListBox properties, methods and events. (Part 1 of 2.) The CheckedListBox control derives from ListBox and displays a CheckBox with each item (Fig. 15.19).

57  2009 Pearson Education, Inc. All rights reserved. 57 Fig. 15.19 | CheckedListBox properties, methods and events. (Part 2 of 2.) 15.7 CheckedListBox Control (Cont.)

58  2009 Pearson Education, Inc. All rights reserved. 58 15.7 CheckedListBox Control Common Programming Error 15.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.

59  2009 Pearson Education, Inc. All rights reserved. 59 Outline CheckedListBox TestForm.cs (1 of 4 ) Class CheckedListBoxTestForm uses a CheckedListBox and a ListBox to display a user’s selection of books (Fig. 15.20). Fig. 15.20 | CheckedListBox and ListBox used in a program to display a user selection. (Part 1 of 4.)

60  2009 Pearson Education, Inc. All rights reserved. 60 Outline CheckedListBox TestForm.cs (2 of 4 ) Fig. 15.20 | CheckedListBox and ListBox used in a program to display a user selection. (Part 2 of 4.) This event handler maintains a list of checked items in the ListBox. Determining whether the user checked or unchecked the item.

61  2009 Pearson Education, Inc. All rights reserved. 61 Outline CheckedListBox TestForm.cs (3 of 4 ) a) Application at startb) Selecting and checking items Fig. 15.20 | CheckedListBox and ListBox used in a program to display a user selection. (Part 3 of 4.)

62  2009 Pearson Education, Inc. All rights reserved. 62 Outline CheckedListBox TestForm.cs (4 of 4 ) c) Unchecking selected itemsd) Checking items Fig. 15.20 | CheckedListBox and ListBox used in a program to display a user selection. (Part 4 of 4.)

63  2009 Pearson Education, Inc. All rights reserved. 63 15.8 ComboBox Control The ComboBox control combines TextBox features with a drop-down list. Figure 15.21 shows a sample ComboBox in three different states. Fig. 15.21 | ComboBox demonstration. Click the down arrow to display items in drop-down list Selecting an item from drop-down list changes text in TextBox portion

64  2009 Pearson Education, Inc. All rights reserved. 64 15.8 ComboBox Control (Cont.) Fig. 15.22 | ComboBox properties and an event.

65  2009 Pearson Education, Inc. All rights reserved. 65 15.8 ComboBox Control (Cont.) Look-and-Feel Observation 15.4 Use a ComboBox to save space on a GUI. A disadvantage is that, unlike with a ListBox, the user cannot see available items without expanding the drop-down list. Look-and-Feel Observation 15.5 Make lists (such as ComboBox es) editable only if the program is designed to accept user-submitted elements.

66  2009 Pearson Education, Inc. All rights reserved. 66 Outline ComboBoxTest Form.cs ( 1 of 5 ) Class ComboBoxTestForm (Fig. 15.23) allows users to select a shape to draw by using a ComboBox. Set the ComboBox ’s DropDownStyle to DropDownList to restrict users to preset options. Fig. 15.23 | ComboBox used to draw a selected shape. (Part 1 of 5.)

67  2009 Pearson Education, Inc. All rights reserved. 67 Outline ComboBoxTest Form.cs ( 2 of 5 ) The Graphics object allows a pen or brush to draw on a component The Pen object is used to draw the outlines of shapes. The SolidBrush object is used to fill solid shapes. Fig. 15.23 | ComboBox used to draw a selected shape. (Part 2 of 5.)

68  2009 Pearson Education, Inc. All rights reserved. 68 Outline ComboBoxTest Form.cs ( 3 of 5 ) SelectedIndex determines which item the user selected. DrawEllipse takes a Pen, the coordinates of the center and the dimensions of the ellipse. Fig. 15.23 | ComboBox used to draw a selected shape. (Part 3 of 5.) DrawRectangle takes a Pen, the coordinates of the upper-left corner and the dimensions of the rectangle. DrawPie takes a Pen, the coordinates of the upper-left corner, its width and height, the start angle and the sweep angle of the pie.

69  2009 Pearson Education, Inc. All rights reserved. 69 Outline ComboBoxTest Form.cs ( 4 of 5 ) Fig. 15.23 | ComboBox used to draw a selected shape. (Part 4 of 5.)

70  2009 Pearson Education, Inc. All rights reserved. 70 Outline ComboBoxTest Form.cs ( 5 of 5 ) Fig. 15.23 | ComboBox used to draw a selected shape. (Part 5 of 5.) a)b) c)d)

71  2009 Pearson Education, Inc. All rights reserved. 71 15.9 TreeView Control The TreeView control displays nodes hierarchically in a tree. A parent node contains child nodes, and the child nodes can be parents to other nodes. Two child nodes that have the same parent node are considered sibling nodes. The first parent node of a tree is the root node (a TreeView can have multiple roots).

72  2009 Pearson Education, Inc. All rights reserved. 72 15.9 TreeView Control (Cont.) The nodes in a TreeView (Fig. 15.24) are instances of class TreeNode. Each TreeNode has a Nodes collection (type TreeNodeCollection ), which contains a list of its children. Fig. 15.24 | 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)

73  2009 Pearson Education, Inc. All rights reserved. 73 15.9 TreeView Control (Cont.) Fig. 15.25 | TreeView properties and an event.

74  2009 Pearson Education, Inc. All rights reserved. 74 15.9 TreeView Control (Cont.) Fig. 15.26 | TreeNode properties and methods. (Part 1 of 2.)

75  2009 Pearson Education, Inc. All rights reserved. 75 15.9 TreeView Control (Cont.) Fig. 15.26 | TreeNode properties and methods. (Part 2 of 2)

76  2009 Pearson Education, Inc. All rights reserved. 76 15.9 TreeView Control (Cont.) To add nodes to the TreeView visually, click the ellipsis next to the Nodes property in the Properties window. This opens the TreeNode Editor (Fig. 15.27). Fig. 15.27 | TreeNode Editor. Delete current node

77  2009 Pearson Education, Inc. All rights reserved. 77 15.9 TreeView Control (Cont.) To add nodes programmatically, first create a root node. myTreeView.Nodes.Add( new TreeNode( rootLabel ) ); To add children to a root node first select the appropriate root node: myTreeView.Nodes[ myIndex ] To add a child to the root node at index myIndex, write: myTreeView.Nodes[ myIndex ].Nodes.Add( new TreeNode( ChildLabel ) );

78  2009 Pearson Education, Inc. All rights reserved. 78 Outline TreeViewDirector yStructureForm.Cs ( 1 of 6 ) Class TreeViewDirectoryStructureForm (Fig. 15.28) uses a TreeView to display the contents of a directory. Fig. 15.28 | TreeView used to display directories. (Part 1 of 6.)

79  2009 Pearson Education, Inc. All rights reserved. 79 Outline TreeViewDirector yStructureForm.Cs ( 2 of 6 ) Fig. 15.28 | TreeView used to display directories. (Part 2 of 6.) Method GetDirectories takes the given directory and returns an array of string s (the subdirectories).

80  2009 Pearson Education, Inc. All rights reserved. 80 Outline TreeViewDirector yStructureForm.Cs ( 3 of 6 ) Fig. 15.28 | TreeView used to display directories. (Part 3 of 6.) The full path name is reduced to just the directory name. Each subdirectory’s name is created as a node. Using method Add to add the subdirectories as child nodes. Calling PopulateTreeView recursively on every subdirectory populates the TreeView with the entire directory structure.

81  2009 Pearson Education, Inc. All rights reserved. 81 Outline TreeViewDirector yStructureForm.Cs ( 4 of 6 ) Fig. 15.28 | TreeView used to display directories. (Part 4 of 6.) When access is denied, a node is added containing “ Access Denied ”. Clearing all the nodes in directoryTreeView. Adding the specified directory as the root node.

82  2009 Pearson Education, Inc. All rights reserved. 82 Outline TreeViewDirector yStructureForm.Cs ( 5 of 6 ) Fig. 15.28 | TreeView used to display directories. (Part 5 of 6.)

83  2009 Pearson Education, Inc. All rights reserved. 83 Outline TreeViewDirector yStructureForm.Cs ( 6 of 6 ) Fig. 15.28 | TreeView used to display directories. (Part 6 of 6.) a)b)

84  2009 Pearson Education, Inc. All rights reserved. 84 The ListView control is more versatile than a ListBox and can display items in different formats. For example, a ListView can display icons next to the list items and show the details of items in columns. 15.10 ListView Control (Cont.)

85  2009 Pearson Education, Inc. All rights reserved. 85 15.10 ListView Control (Cont.) Fig. 15.29 | ListView properties and an event.

86  2009 Pearson Education, Inc. All rights reserved. 86 15.10 ListView Control (Cont.) ListView allows you to define the images used as icons for items. Create a ListView, then select the Images property in the Properties window to display the Image Collection Editor (Fig. 15.30). Adding images this way embeds them into the application.

87  2009 Pearson Education, Inc. All rights reserved. 87 15.10 ListView Control (Cont.) Fig. 15.30 | Image Collection Editor window for an ImageList component.

88  2009 Pearson Education, Inc. All rights reserved. 88 15.10 ListView Control (Cont.) Set property SmallImageList of the ListView to the new ImageList object. Property SmallImageList specifies the image list for the small icons. Property LargeImageList sets the ImageList for large icons.

89  2009 Pearson Education, Inc. All rights reserved. 89 Outline ListViewTest Form.cs ( 1 of 8 ) Class ListViewTestForm (Fig. 15.31) displays files and folders in a ListView. If a file or folder is inaccessible because of permission settings, a MessageBox appears. Fig. 15.31 | ListView displaying files and folders. (Part 1 of 8.)

90  2009 Pearson Education, Inc. All rights reserved. 90 Outline ListViewTest Form.cs ( 2 of 8 ) Fig. 15.31 | ListView displaying files and folders. (Part 2 of 8.) Checking whether anything is selected in browserListView. Determining whether the user chose the first item ( Go up one level ).

91  2009 Pearson Education, Inc. All rights reserved. 91 Outline ListViewTest Form.cs ( 3 of 8 ) Fig. 15.31 | ListView displaying files and folders. (Part 3 of 8.) Using property Parent to return the parent directory.

92  2009 Pearson Education, Inc. All rights reserved. 92 Outline ListViewTest Form.cs ( 4 of 8 ) Fig. 15.31 | ListView displaying files and folders. (Part 4 of 8.)

93  2009 Pearson Education, Inc. All rights reserved. 93 Outline ListViewTest Form.cs ( 5 of 8 ) Fig. 15.31 | ListView displaying files and folders. (Part 5 of 8.) Method GetFiles returns an array of class FileInfo objects. Iterating through subdirectories and adding them to browserListView. Method GetDirectories returns an array of DirectoryInfo objects representing the subdirectories.

94  2009 Pearson Education, Inc. All rights reserved. 94 Outline ListViewTest Form.cs ( 6 of 8 ) Fig. 15.31 | ListView displaying files and folders. (Part 6 of 8.) Iterating through subdirectories and adding them to browserListView.

95  2009 Pearson Education, Inc. All rights reserved. 95 Outline ListViewTest Form.cs ( 7 of 8 ) Fig. 15.31 | ListView displaying files and folders. (Part 7 of 8.) Folder and file icon images are added to the Images collection of fileFolderImageList. The application loads its home directory into the ListView when it first loads.

96  2009 Pearson Education, Inc. All rights reserved. 96 Outline ListViewTest Form.cs ( 8 of 8 ) Fig. 15.31 | ListView displaying files and folders. (Part 8 of 8.) a) c) b)

97  2009 Pearson Education, Inc. All rights reserved. 97 15.10 ListView Control (Cont.) This program loads quickly, because it indexes only the files in the current directory. As a result, a small delay may occur when a new directory is loaded. Software Engineering Observation 15.2 When designing applications that run for long periods of time, you might choose a large initial delay. However, in applications that run for only short periods, developers often prefer fast initial loading times and small delays after each action.

98  2009 Pearson Education, Inc. All rights reserved. 98 15.11 TabControl Control The TabControl creates tabbed windows, such as those we have seen in Visual Studio (Fig. 15.32) Fig. 15.32 | Tabbed windows in Visual Studio. Tabs

99  2009 Pearson Education, Inc. All rights reserved. 99 15.11 TabControl Control (Cont.) TabControl s contain TabPage objects, which are similar to Panel s. First add controls to the TabPage objects, then add the TabPage s to the TabControl. myTabPage.Controls.Add( myControl ); myTabControl.TabPages.Add( myTabPage ); We can use method AddRange to add an array of TabPage s or controls to a TabControl or TabPage.

100  2009 Pearson Education, Inc. All rights reserved. 100 15.11 TabControl Control (Cont.) Fig. 15.33 | TabControl with TabPages example. TabPage Controls in TabPage TabControl

101  2009 Pearson Education, Inc. All rights reserved. 101 15.11 TabControl Control (Cont.) Add TabControls visually 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. 15.34). To select a TabPage, click the control area underneath the tabs.

102  2009 Pearson Education, Inc. All rights reserved. 102 15.11 TabControl Control (Cont.) Fig. 15.34 | TabPage s added to a TabControl.

103  2009 Pearson Education, Inc. All rights reserved. 103 15.11 TabControl Control (Cont.) Fig. 15.35 | TabControl properties and an event.

104  2009 Pearson Education, Inc. All rights reserved. 104 Outline UsingTabsForm.cs ( 1 of 6 ) Class UsingTabsForm (Fig. 15.36) uses a TabControl to display various options relating to the text on a label ( Color, Size and Message ). Fig. 15.36 | TabControl used to display various font settings. (Part 1 of 6.)

105  2009 Pearson Education, Inc. All rights reserved. 105 Outline UsingTabsForm.cs ( 2 of 6 ) Fig. 15.36 | TabControl used to display various font settings. (Part 2 of 6.)

106  2009 Pearson Education, Inc. All rights reserved. 106 Outline UsingTabsForm.cs ( 3 of 6 ) Fig. 15.36 | TabControl used to display various font settings. (Part 3 of 6.)

107  2009 Pearson Education, Inc. All rights reserved. 107 Outline UsingTabsForm.cs ( 4 of 6 ) Fig. 15.36 | TabControl used to display various font settings. (Part 4 of 6.)

108  2009 Pearson Education, Inc. All rights reserved. 108 Outline UsingTabsForm.cs ( 5 of 6 ) Fig. 15.36 | TabControl used to display various font settings. (Part 5 of 6.) a) Color tabb) Size tab

109  2009 Pearson Education, Inc. All rights reserved. 109 Outline UsingTabsForm.cs ( 6 of 6 ) c) Message tabd) About tab Fig. 15.36 | TabControl used to display various font settings. (Part 6 of 6.)

110  2009 Pearson Education, Inc. All rights reserved. 110 15.11 TabControl Control (Cont.) Software Engineering Observation 15.3 A TabPage can act as a container for a single logical group of RadioButton s, enforcing their mutual exclusivity.

111  2009 Pearson Education, Inc. All rights reserved. 111 15.12 Multiple Document Interface (MDI) Windows Many complex applications are multiple document interface (MDI) programs, which allow users to edit multiple documents at once. An MDI program’s main window is called the parent window, and each window inside the application is referred to as a child window. Figure 15.37 depicts a sample MDI application with two child windows.

112  2009 Pearson Education, Inc. All rights reserved. 112 15.12 Multiple Document Interface (MDI) Windows (Cont.) MDI parent MDI child Fig. 15.37 | MDI parent window and MDI child windows.

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

114  2009 Pearson Education, Inc. All rights reserved. 114 15.12 Multiple Document Interface (MDI) Windows (Cont.) Right click the project in the Solution Explorer, select Project > Add Windows Form… and name the file. Set the Form ’s MdiParent property to the parent Form and call the child Form ’s Show method. ChildFormClass childForm = New ChildFormClass (); childForm.MdiParent = parentForm; childForm.Show(); In most cases, the parent Form creates the child, so the parentForm reference is this.

115  2009 Pearson Education, Inc. All rights reserved. 115 15.12 Multiple Document Interface (MDI) Windows (Cont.) Fig. 15.39 | MDI parent and MDI child properties, method and event.

116  2009 Pearson Education, Inc. All rights reserved. 116 15.12 Multiple Document Interface (MDI) Windows (Cont.) Figure 15.40 shows two images: one containing two minimized child windows and a second containing a maximized child window. Parent-window icons: minimize, maximize and close Maximized child window icons: minimize, restore and close Minimized child window icons: restore, maximize and close Parent title bar indicates maximized child Fig. 15.40 | Minimized and maximized child windows.

117  2009 Pearson Education, Inc. All rights reserved. 117 15.12 Multiple Document Interface (MDI) Windows (Cont.) Property MdiWindowListItem of class MenuStrip specifies which menu, if any, displays a list of open child windows. When a new child window is opened, an entry is added to the list (Fig. 15.41).

118  2009 Pearson Education, Inc. All rights reserved. 118 15.12 Multiple Document Interface (MDI) Windows (Cont.) Nine or more child windows enables the More Windows… option Fig. 15.41 | MenuItem property MdiList example. Child windows list

119  2009 Pearson Education, Inc. All rights reserved. 119 15.12 Multiple Document Interface (MDI) Windows (Cont.) Good Programming Practice 15.1 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.

120  2009 Pearson Education, Inc. All rights reserved. 120 15.12 Multiple Document Interface (MDI) Windows (Cont.) MDI containers allow you to organize the placement of its child windows. Method LayoutMdi takes a value of the MdiLayout enumeration (Fig. 15.42).

121  2009 Pearson Education, Inc. All rights reserved. 121 15.12 Multiple Document Interface (MDI) Windows (Cont.) a) ArrangeIcons Fig. 15.42 | MdiLayout enumeration values. b) Cascade c) TileHorizontal d) TileVertical

122  2009 Pearson Education, Inc. All rights reserved. 122 Outline UsingMDIForm.cs ( 1 of 6 ) Class UsingMDIForm (Fig. 15.43) demonstrates MDI windows. Fig. 15.43 | MDI parent-window class. (Part 1 of 6.)

123  2009 Pearson Education, Inc. All rights reserved. 123 Outline UsingMDIForm.cs ( 2 of 6 ) Fig. 15.43 | MDI parent-window class. (Part 2 of 6.) Adding a new child Form with certain properties.

124  2009 Pearson Education, Inc. All rights reserved. 124 Outline UsingMDIForm.cs ( 3 of 6 ) Fig. 15.43 | MDI parent-window class. (Part 3 of 6.) Adding a new child Form with certain properties.

125  2009 Pearson Education, Inc. All rights reserved. 125 Outline UsingMDIForm.cs ( 4 of 6 ) Fig. 15.43 | MDI parent-window class. (Part 4 of 6.) Setting the layout of child Form s.

126  2009 Pearson Education, Inc. All rights reserved. 126 Outline UsingMDIForm.cs ( 5 of 6 ) Fig. 15.43 | MDI parent-window class. (Part 5 of 6.) a) Creating a child windowb) Viewing the child window

127  2009 Pearson Education, Inc. All rights reserved. 127 Outline UsingMDIForm.cs ( 6 of 6 ) Fig. 15.43 | MDI parent-window class. (Part 6 of 6.) c) Changing child window organizationd) Child windows in Cascade view

128  2009 Pearson Education, Inc. All rights reserved. 128 Outline ChildForm.cs ( 1 of 2 ) Define the MDI child class by right clicking the project in the Solution Explorer and selecting Add > Windows Form…. Name the new class ChildForm (Fig. 15.44). Fig. 15.44 | MDI child ChildForm. (Part 1 of 2.)

129  2009 Pearson Education, Inc. All rights reserved. 129 Outline ChildForm.cs ( 2 of 2 ) Fig. 15.44 | MDI child ChildForm. (Part 2 of 2.) Setting the title-bar text. Retrieving the specified image resource and displaying it.

130  2009 Pearson Education, Inc. All rights reserved. 130 15.13 Visual Inheritance Visual inheritance enables you to achieve visual consistency. For example, you could define a base Form that contains a product’s logo and a specific background color. You then could use the base Form throughout an application for uniformity and branding.

131  2009 Pearson Education, Inc. All rights reserved. 131 Outline VisualInheritance BaseForm.cs ( 1 of 2 ) Class VisualInheritanceBaseForm (Fig. 15.45) derives from Form. Right click the project name in the Solution ­ Explorer and select Properties, then choose the Application tab. In the Output type drop-down list, change Windows Application to Class Library. Building the project produces the.dll. Fig. 15.45 | Class VisualInheritanceBaseForm, which inherits from class Form, contains a Button ( Learn More ). (Part 1 of 2.)

132  2009 Pearson Education, Inc. All rights reserved. 132 Outline VisualInheritance BaseForm.cs ( 2 of 2 ) Fig. 15.45 | Class VisualInheritanceBaseForm, which inherits from class Form, contains a Button ( Learn More ). (Part 2 of 2.)

133  2009 Pearson Education, Inc. All rights reserved. 133 15.13 Visual Inheritance (Cont.) To visually inherit from VisualInheritanceBaseForm, create a new Windows Form s application. In this application, add a reference to the.dll you just created. Modify the line that defines the class: public partial class VisualInheritanceTestForm : VisualInheritanceBase.VisualInheritanceBaseForm

134  2009 Pearson Education, Inc. All rights reserved. 134 15.13 Visual Inheritance (Cont.) In Design view, the new application’s Form should now display the controls inherited from the base Form (Fig. 15.46). Fig. 15.46 | Form demonstrating visual inheritance.

135  2009 Pearson Education, Inc. All rights reserved. 135 Outline Class VisualInheritanceTestForm (Fig. 15.47) is a derived class of VisualInheritanceBaseForm. VisualInheritance TestForm.cs ( 1 of 2 ) Fig. 15.47 | Class VisualInheritanceTestForm, which inherits from class VisualInheritanceBaseForm, contains an additional Button. (Part 1 of 2.) Inheriting the Form ’s properties and appearance.

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

137  2009 Pearson Education, Inc. All rights reserved. 137 15.14 User-Defined Controls The.NET Framework allows you to create custom controls. Custom controls appear in the user’s Toolbox. There are multiple ways to create a custom control, depending on the level of customization that you want.

138  2009 Pearson Education, Inc. All rights reserved. 138 15.14 User-Defined Controls (Cont.) Fig. 15.48 | Custom-control creation.

139  2009 Pearson Education, Inc. All rights reserved. 139 15.14 User-Defined Controls (Cont.) Timer s are invisible components that generate Tick events at a set interval. – The Timer ’s Interval property defines the number of milliseconds between events.

140  2009 Pearson Education, Inc. All rights reserved. 140 Outline ClockUserControl.cs ( 1 of 2 ) Create a UserControl class for the project by selecting Project > Add User Control …. We name the file (and the class) ClockUserControl. – Add a Label and a Timer to the UserControl. – Set the Timer interval to 1000 milliseconds. – clockTimer must be enabled by setting Enabled to true (Fig. 15.49). Fig. 15.49 | UserControl -defined clock. (Part 1 of 2.)

141  2009 Pearson Education, Inc. All rights reserved. 141 Outline ClockUserControl.cs ( 2 of 2 ) Fig. 15.49 | UserControl -defined clock. (Part 2 of 2.) DateTime.Now is the current time. Method ToLongTimeString converts Now to a string.

142  2009 Pearson Education, Inc. All rights reserved. 142 15.14 User-Defined Controls (Cont.) To create a UserControl that can be re-used by others: – Create a new Class Library project. – Delete Class1.cs, initially provided with the application. – Right click the project in the Solution Explorer and select Add > User Control… – Add controls and functionality to the UserControl (Fig. 15.50). – Build the project. Visual Studio creates a.dll file for the UserControl in the output directory ( bin/Release ).

143  2009 Pearson Education, Inc. All rights reserved. 143 15.14 User-Defined Controls (Cont.) Fig. 15.50 | Custom-control creation.

144  2009 Pearson Education, Inc. All rights reserved. 144 15.14 User-Defined Controls (Cont.) Create a new Windows Forms application. Right click the ToolBox and select Choose Items…. In the Choose Toolbox Items dialog, click Browse… Select the. dll file that you created.

145  2009 Pearson Education, Inc. All rights reserved. 145 15.14 User-Defined Controls (Cont.) The item will then appear in the Choose Toolbox Items dialog (Fig. 15.51). Check this item and click OK to add the item to the Toolbox. Fig. 15.51 | Custom control added to the ToolBox.

146  2009 Pearson Education, Inc. All rights reserved. 146 15.14 User-Defined Controls (Cont.) This control can now be added to the Form as if it were any other control (Fig. 15.52). Fig. 15.52 | Custom control added to a Form. Newly inserted control New ToolBox icon


Download ppt " 2009 Pearson Education, Inc. All rights reserved. 1 15 Graphical User Interfaces with Windows Forms: Part 2."

Similar presentations


Ads by Google