Topics in Graphical User Interfaces

Building
Graphical
User
Interfaces

Click on a cloud label to access a

certain topic
 Menus

• Used to provide groups of related commands for Windows

applications.
• Commands such as Open, Close, and Save are usually
grouped together.
• Alt + F retrieves the File Menu Terms
1. Menu
• Shortcut keys:
2. Disabled
{ Ctrl, Shift, Alt, F1, Fn, letter keys } command
• Checkmarks on menu 3. Separator bar
4. Submenu
items indicated that multiple
5. Checked menu
menu items can be selected. item
6. Parent menu
7. Alt key, access
shortcuts, hot
keys
Creating Menus

Code Example
Note the use of the “xor” (^)
operator in line 174 – used to merge
or exclude.

1. Open Toolbox and drag a MainMenu control onto the

form.
2. Click on the MainMenu icon to get into the Menu Designer.
3. Menus contain:
a) Properties
b) Events (accessed thru Class Name and Method Name)
4. To add entries, click the Type Here textbox and type the text
that should appear. Press the Enter key to add the item.
5. Add shortcuts using & or thru the properties.
6. Remove items by selecting the menu item and pressing the
Delete key.
7. Menu items generate a Click event when selected.
 LinkLabels

• A Linklabel control displays links to other objects such as file or Web pages.

1. Linklabels appear as underlined text.

2. When the mouse moves under a link, the pointer
changes to a hand.
3. Links change colors to indicate whether the link is new,
visited, or active.
4. Linklabel generates a LinkClicked event.
5. Linklabel class is derived from the Label class.
6. Event handlers for Linklabel instances call static method
Start of class Process (System.Diagnostics).
7. Code Example
 List & CheckedListBoxes

1. The ListBox control allows users to view and to select from multiple
items in a list.
2. ListBoxes are static GUI entities. Users cannot enter new items to the
list.
3. CheckedListBoxes extend ListBoxes by including check boxes next to
each item in the list. This allows for multiple selection.
4. ListBoxes can return multiple items, but not by default.
5. Scrollbars appear if there are more items than can be displayed.
6. The SelectionMode property determines the number of items that can
be selected.
7. The Items property returns all objects in the list as a collection.
8. To add items, used the following:
myListBox.Items.Add(“myListItem”)
 ListBoxes

1. This code sample demonstrates the adding, removing, and clearing

items from a Listbox.
2. The add button click event calls method Add of the Items collection in
the ListBox.
3. The remove button click event calls the method Remove of the items
collection. The method used the SelectedIndex to check which index is
selected. (If -1, no item is removed.)
4. The clear button click event calls method Clear of the Listbox to remove
all items from the collection.
5. The exit button click event terminates the program.
6. Question: What use can be made of a listbox that is hidden?
 CheckedListBoxes

1. The CheckedBoxList control derives from class

ListBox and includes a checkbox next to each item in
the list.
2. Items are added via Add or AddRange or through a
String Collection Editor.
3. The only selection choices or either none or all.
4. Event ItemCheck is generated whenever a user
checks or unchecks an item.
5. Event argument properties CurrentValue and
NewValue return CheckState values for the current
and new state of the item, respectively. This allows
the programmer to determine whether an item is
checked or not.
6. Properties CheckedItems and CheckedIndices return Code Sample
information about the checked items and indices.
 ComboBoxes

1. The ComboBox control combines TextBox features with a dropdown

list.
2. By default, the user can enter text in the textbox or click the down
arrow to display a list of predefined items.
3. Scrollbars will appear if the combo box contains more items than can
be displayed.
4. MaxDropDownItems is the maximum number of items that a drop-
down can display.
5. Items may be added of deleted using the Item collection and its
methods.
6. Code Sample
 TreeViews

1. The TreeView control display nodes heirarchically in a tree.

2. Nodes are objects that contain values and that can refer to other
nodes. A parent node contains child nodes, and child nodes can be
parents to other nodes. A tree is a collection of nodes. The first node is
the root node.
3. The file system C:\ is an example of a tree heirarchy.
4. The nodes displayed in a TreeView are instances of class TreeNode.
5. Each treenode has a nodes collection. The parent property returns a
reference to the parent node or null if it is the root node.
6. To add nodes through C# code, first create a root node. Make a new
TreeNode object and pass it a string to display.
7. Next, use method Add to the TreeNode to the TreeView’s node
collection. myTreeView.Nodes.Add( new TreeNode(RootLabel ));
8. To add children to a root node, add new treenodes to its Nodes
collection:
a) Select the root node: myTreeView.Nodes[ myIndex ];
b) Add a child node:
myTreeView.Nodes[myIndex].Nodes.Add( new
TreeNode( ChildLabel ));
9. Code Sample
 ListViews

1.A ListView control is similar to a ListBox in that both display lists in which
the user can select one or more items.
2. ListViews can display icons along the items in a list using the ImageList
property.
3. The MultiSelect property is a boolean determines whether multiple items
can be selected.
4. Checkboxes can be included.
5. Code Sample
 Tab Control

1. The TabControl creates tabbed windows. This allows the programmer

to design user interfaces that fit a large number of controls or a large
amount of data without using up valuable screen “real estate.”
2. TabControl contains TabPage objects and they can contain controls.
3. The programmer adds a TabControl and then adds tab pages to the
TabControl instance.
4. TabControls are constructed visually by dragging a TabControl onto
the form.
5. Code Sample
 MDI Windows

1. Up to this point our programs have been based only on single-

document-interface (SDI) applications. These programs (such as
Notepad or Paint) support only one open window or document at a
time.
2. Multiple Document Interface (MDI) programs such as Word or Adobe
Photoshop enable users to edit multiple documents at once. Such
programs have greater number of features.
3. The application window of an MDI program is called the parent
window, and each window inside the application is referred to as a
child window.
4. A maximum of one child can be active at once.
5. Child windows cannot be parents themselves and cannot be moved
outside their parent.
6. A child window’s functionality can be different from the functionality of
other child windows of the parent. Example: One child window might
edit images, another might edit text, and a third might display network
stats in a graphical manner.
7. To create an MDI form, create a new Form and set its IsMDIContainer
property to True. The form’s background color will change.
8. Next, create a child form class to be added to the form. To do this,
right click the project in the Solution Explorer, select Add Windows
Form… and name the file.
9. To add the child form to the parent, we must create a new child form
object.
 MDI Windows

10. Set the child’s mdiParent property to the parent form, and call the method
Show().
11. The code to create a child usually lies inside an event handler, which
creates a new window in response to a user action. Menu selections
(File->New->Window) are a common way of creating child MDI Parent
windows.
12. Form property MdiChildren is an array of child Form references.
13. Property ActiveMdiChild returns a reference to the active child
window; it returns null if there are no active child windows.
MDI Child
14. Child windows can be minimized, maximized, and closed
independently of each other and of the parent window.
15. Parent and child forms can have different menus, which are merged
wheneve a child window is selected.
a) Property MergeOrder determines the order in which MenuItems
appear when two menus are merged. Lower values appear first. MDI Child
b) For example, if Menu1 has items File,Edit, and Window (and
their orders are 0, 10, and 20) and Menu2 has items Format and
View (and their orders are 7 and 15), then the merged menu
contains items File, Format, Edit, View, and Window.
c) If a parent’s menu has a mergetype that is different from the
child’s mergetype, the child’s menu setting determines the
outcome of the merge. When the child is closed, the parent’s
original menu is restored.
 MDI Windows

16. C# provides a mechanism for tracking which child windows are opened in
an MDI container. Property MdiList of class MenuItem determines
whether a MenuItem displays a list of open child windows.
17. MDI containers allow developers to organize the placement of child
windows. The child windows in an MDI application can be arranged by
calling method LayoutMdi of the parent form.
18. LayoutMdi takes a MdiLayout enumeration, which can have values
ArrangeIcons, Cascade, TileHorizontal, and TileVertical.
19. Code Sample
 Visual Inheritance

1. Recall the lecture on Inheritance from

COSC1430.
2. Inheritance can be applied to create Forms
that display a GUI.
3. Visual inheritance allows us to create a new
Form by inheriting from another Form. The
derived Form class contains the functionality
of its Form base class, including any base-
class properties, methods, variables, and
controls.
4. The derived class also inherits all visual
aspects such as sizing, layout, spacing,
colors, and fonts.
5. Allows for consistency and reuse.
6. Use the following Code Sample to create a dll.
a) Right click on the VisualInheritance project
in the Solution Explorer, and select Properties.
b) In Common Properties > General, change
the Output Type to Class Library.
c) Build the project to produce a .dll that
contains the VisualInheritance class.
 Visual Inheritance

7. To create the derived form through visual

inheritance, create an empty project.
8. From the Project Menu, select Add Inherited
Form... This brings up the Add New Item
window.
9. Select Inherited Form from the templates window.
10. Clicking Open displays the Inheritance Picker. Derived
class
The Inheritance Picker tool enable cannot
programmers to quickly create a form that modify
inherits from a specified form. these Derived class can
controls modify this control
11. Browse to the .dll built previously.
12. Code Sample
 User-Defined Controls

1. .NET allows users to create custom controls that

inherit from a variety of classes.
2. These custom controls appear in the user’s
Toolbox and can be added to Forms, Panels,
or GroupBoxes in the same way we add
Buttons, Labels, and other predefined
controls.

1. Create a new Windows Control Library project.

2. Inside the project, add controls and functionality to
the UserControl.
3. Build the project. The file will be a .dll.
4. Create a new windows app
5. Import the user control. Right click the Toolbox
and select Customize Toolbox. Select the .NET
Framework Components tab and browse for the
.dll file. When identified, click OK.
6. The UserControl appears in the Toolbox and can
be added to the form as if it were any other
control.
7. Sample code for User Control
 Assignment

Create an MDI text editor. Each child window should contain

a multiline TextBox. The MDI parent should have a Format
menu, with submenus to control the size, font, and color of
the text in the child window. Each submenu should have at
least three options. In addition, the parent should have a File
menu with menu items New (create a new child), Close
(close the active child) and Exit (exit the application). The
parent should have a Window menu to display a list of the
open child windows and their layout options. Refer to Deitel
§13.9, page 565 for details.