Professional Documents
Culture Documents
Advanced GUIs
A reference of MSDN Library for Visual Studio 2017
TabControl
Menu and Toolbar
MDI Windows
TreeView
ListView
LinkLabel
Slide 2
ListBox and CheckedListBox
ListBoxes
Allow users to view and select from items on a list
Chapter 5. Advanced GUIs
ListBox
Checked item
CheckedListBox
Slide 3
ListBox and CheckedListBox
ListBox Common Properties
Items: Lists the collection of items within the
Chapter 5. Advanced GUIs
ListBox.
MultiColumn: Indicates whether the ListBox
can break a list into multiple columns.
MultiColum = true
Slide 4
ListBox and CheckedListBox
ListBox Common Properties
SelectedIndex: Returns the index of the
Chapter 5. Advanced GUIs
Slide 5
ListBox and CheckedListBox
ListBox Common Properties
SelectedItem: Returns the currently selected
Chapter 5. Advanced GUIs
item.
SelectedItems: Returns a collection of the
currently selected item(s).
SelectedValue: Returns the value of the
member property specified by the ValueMember
property.
Slide 6
ListBox and CheckedListBox
ListBox Common Properties
Sorted: Indicates whether items appear in
Chapter 5. Advanced GUIs
Slide 7
ListBox and CheckedListBox
ListBox Common Methods
GetSelected: Takes an index, and returns True
Chapter 5. Advanced GUIs
Slide 8
ListBox and CheckedListBox
ListBox Common Events
SelectedIndexChanged: Occurs when selected
Chapter 5. Advanced GUIs
Slide 9
ListBox and CheckedListBox
ListBox Example
Chapter 5. Advanced GUIs
Slide 10
ListBox and CheckedListBox
Code Pattern
private void btnAdd_Click(object sender, EventArgs e)
Chapter 5. Advanced GUIs
{
listBox1.Items.Add(txtInput.Text);
txtInput.Clear();
}
private void btnRemove_Click(object sender, EventArgs e)
{
int row=listBox1.SelectedIndex;
if (row != -1) listBox1.Items.RemoveAt(row);
}
private void btnClear_Click(object sender, EventArgs e)
{
listBox1.Items.Clear();
}
Slide 11
ListBox and CheckedListBox
ListBox Homework
Adds and Removes Items
Chapter 5. Advanced GUIs
Slide 12
ListBox and CheckedListBox
CheckedListBoxes
Extends ListBox by placing a check box at the
Chapter 5. Advanced GUIs
Slide 13
ListBox and CheckedListBox
CheckedListBox Common Properties
CheckedItems: The collection of items that are
Chapter 5. Advanced GUIs
Slide 14
ListBox and CheckedListBox
CheckedListBox Common Methods
GetItemChecked: Takes an index and returns
Chapter 5. Advanced GUIs
Slide 15
ListBox and CheckedListBox
ItemCheckEventArgs Properties
CurrentValue: Whether current item is checked
Chapter 5. Advanced GUIs
Slide 16
ListBox and CheckedListBox
CheckedListBox Example
Chapter 5. Advanced GUIs
Slide 17
ListBox and CheckedListBox
Code Pattern
private void myCheckedListBox_Load(object sender, EventArgs e)
Chapter 5. Advanced GUIs
{
checkedListBox1.Items.Add(“C++ HTP”);
}
Slide 18
ListBox and CheckedListBox
CheckedListBox Homework
Chapter 5. Advanced GUIs
Slide 19
ListBox and CheckedListBox
Code pattern
private void btnAdd_Click(object sender, EventArgs e)
Chapter 5. Advanced GUIs
{
for (int i = 0; i < checkedListBox1.Items.Count - 1; i++)
{
if (checkedListBox1.GetItemChecked(i) == true)
{
// Adds Item i to checkedListBox2
string item = checkedListBox1.Items[i].ToString();
checkedListBox2.Items.Add(item);
// Removes Item i at checkedListBox1
checkedListBox1.Items.RemoveAt(i);
}
}
}
Slide 20
ComboBoxes
Combine TextBox and drop-down list
Common Properties
Chapter 5. Advanced GUIs
DropDownStyle: Determines the type of combo
box. Value Simple means that the text portion is
editable and the list portion is always visible.
Value DropDown (the default) means that the text
portion is editable but an arrow button must be
clicked to see the list portion. Value
DropDownList means that the text portion is not
editable.
Slide 21
ComboBoxes
Common Properties
Items: Collection of items in the ComboBox
Chapter 5. Advanced GUIs
control.
MaxDropDownItems: Maximum number of items
to display in the drop-down list (between 1 and
100). If value is exceeded, a scroll bar appears.
SelectedIndex: Returns index of currently
selected item. If there is no currently selected
item, -1 is returned.
Slide 22
ComboBoxes
Common Properties
SelectedItem: Returns the currently selected
Chapter 5. Advanced GUIs
item.
Sorted: If true, items appear in alphabetical
order. Default false.
Common Events
SelectedIndexChanged: Occurs when selected
index changes. Default when control double
clicked in designer.
Slide 23
ComboBoxes
ComboBox Common Methods
Add: Adds an Item to the list of Items
Chapter 5. Advanced GUIs
comboBox1.Items.Add(“One”);
comboBox1.Items.Add(“Two”);
RemoveAt: Removes the Item at the specified
index within the collection
comboBox1.Items.RemoveAt(row);
Clear: Clear to all Items collection
comboBox1.Items.Clear();
Slide 24
ComboBoxes
Example
Design the form
Chapter 5. Advanced GUIs
Slide 25
ComboBoxes
Code Pattern
private void ComboBox_Load(object sender, EventArgs e)
Chapter 5. Advanced GUIs
{
//Get fonts of system
FontFamily[] ff = FontFamily.Families;
//Add to cboFont
for (int i = 0; i <ff.Length; i++)
cboFont.Items.Add(ff[i].Name);
//Add size to cboSize
for (int i = 8; i <= 72; i++)
cboSize.Items.Add(i);
}
Slide 26
ComboBoxes
Code Pattern
private void cboFont_SelectedIndexChanged(object sender,
Chapter 5. Advanced GUIs
EventArgs e)
{
if (cboFont.Text.Trim() == "") return;
lbDisplay.Font = new Font(cboFont.Text,
lbDisplay.Font.Size);
}
Slide 27
TabControl
Creates tabbed windows
Windows called TabPage objects
Chapter 5. Advanced GUIs
Controls in
TabPage
Slide 28
TabControl
Add and Remove Tab
Chapter 5. Advanced GUIs
Slide 29
TabControl
Common Properties
SelectedIndex: Indicates index of TabPage
Chapter 5. Advanced GUIs
Slide 31
TabControl
Code Pattern
private void btnBlack_CheckedChanged(object sender, EventArgs e)
Chapter 5. Advanced GUIs
{
lbDisplay.ForeColor = Color.Black;
}
Slide 32
TabControl
Code Pattern
private void btnPoint16_CheckedChanged(object sender, EventArgs e)
Chapter 5. Advanced GUIs
{
lbDisplay.Font = new Font(lbDisplay.Font.Name, 16);
}
Slide 33
Menus
Group related commands together
Contain
Chapter 5. Advanced GUIs
Commands
Submenus
Slide 34
Menus
Menu Shortcut
key
Chapter 5. Advanced GUIs
Disabled
command
submenu
Separator bar
Checked
menu item
Slide 35
MenuStrip
A standard menu of the form is provided with
the MenuStrip control.
Chapter 5. Advanced GUIs
Menu icon
Slide 36
MenuStrip
Common Properties
Name: Indicates the name used in code to identify
Chapter 5. Advanced GUIs
Slide 37
MenuStrip
Common Properties
ShowShortcut: If true, shortcut key shown
Chapter 5. Advanced GUIs
Slide 38
MenuStrip
Exercise
Chapter 5. Advanced GUIs
Slide 39
ContextMenuStrip
Represents shortcut menus that are displayed
when the user clicks the right mouse button
Chapter 5. Advanced GUIs
Slide 40
ToolBar
The ToolStrip creates toolbars
To add standard toolbars in the designer
Chapter 5. Advanced GUIs
interface applications
Application window called parent, others child
Parent and child menus can be merged
Based on MergeOrder property
Slide 42
MDI Windows
SDI and MDI Forms
Chapter 5. Advanced GUIs
Slide 43
MDI Windows
An example of MDI Parent and MDI Child
Chapter 5. Advanced GUIs
MDI parent
MDI child
MDI child
Slide 44
MDI Windows
Child windows can be arranged in parent
window:
Chapter 5. Advanced GUIs
Slide 45
MDI Windows
Common MDI Child Properties
IsMdiChild: Indicates whether the Form is an
Chapter 5. Advanced GUIs
Slide 46
MDI Windows
Common MDI Parent Properties
IsMdiContainer: Indicates whether a Form can
Chapter 5. Advanced GUIs
Slide 47
MDI Windows
Common Methods
LayoutMdi: Determines the display of child
Chapter 5. Advanced GUIs
Slide 48
MDI Windows
LayoutMdi enumeration values
Chapter 5. Advanced GUIs
ArrangeIcons Cascade
Slide 49
MDI Windows
LayoutMdi enumeration values
Chapter 5. Advanced GUIs
TileHorizontal TileVertical
Slide 50
TreeViews
Displays nodes hierarchically
Parent nodes have children
Chapter 5. Advanced GUIs
Root nodes
Slide 51
TreeViews
Common Properties
CheckBoxes: Indicates whether checkboxes
Chapter 5. Advanced GUIs
Slide 52
TreeViews
Common Properties
Nodes: Lists the collection of TreeNodes in the
Chapter 5. Advanced GUIs
Slide 53
TreeViews
Common Properties
FirstNode: Specifies the first node in the Nodes
Chapter 5. Advanced GUIs
Slide 54
TreeViews
Common Properties
NextNode: Next sibling node.
Chapter 5. Advanced GUIs
Slide 55
TreeViews
Common Methods
Collapse: Collapses a node.
Chapter 5. Advanced GUIs
Slide 56
TreeViews
TreeNode Editor Exercise
Chapter 5. Advanced GUIs
Slide 57
TreeViews
Exercise
Set name properties
Chapter 5. Advanced GUIs
treeView1
txtInput
comboBox1
btnAddRoot
btnAddChild
btnDelete
Declare in class
private TreeNode currentNode;
Slide 58
TreeViews
Set imageList1 property
ImageCollection: The images stored in this
Chapter 5. Advanced GUIs
ImageList.
Load Event
private void AddTreeView_Load(object sender, EventArgs e)
{
treeView1.ImageList = imageList1;
comboBox1.Items.Add("Image1");
comboBox1.Items.Add("Image2");
comboBox1.SelectedIndex = 0;
}
Slide 59
TreeViews
btnAddRoot Click Event
private void btnAddRoot_Click(object sender, EventArgs e)
Chapter 5. Advanced GUIs
{
if (txtInput.Text.Trim() == "") return;
TreeNode childNode = new TreeNode();
childNode.Text = txtInput.Text;
childNode.ImageIndex = comboBox1.SelectedIndex;
treeView1.Nodes.Add(childNode);
}
{
if (txtInput.Text.Trim() == "") return;
TreeNode childNode = new TreeNode();
childNode.Text = txtInput.Text;
childNode.ImageIndex = comboBox1.SelectedIndex;
currentNode.Nodes.Add(childNode);
currentNode.ExpandAll();
}
Slide 61
ListViews
Displays list of items
Can select one or more items from list
Chapter 5. Advanced GUIs
Slide 62
ListViews
Common Properties
CheckBoxes: Indicates whether items appear
Chapter 5. Advanced GUIs
Slide 63
ListViews
Common Properties
Items: Returns the collection of ListViewItems
Chapter 5. Advanced GUIs
in the control.
LargeImageList: Indicates the ImageList
used when displaying large icons.
MultiSelect: Determines whether multiple
selection is allowed. Default is True, which
enables multiple selection.
SelectedItems: Lists the collection of currently
selected items.
Slide 64
ListViews
Common Properties
SmallImageList: Specifies the ImageList
Chapter 5. Advanced GUIs
Slide 65
ListViews
Common Method
Add: Adds an item to the collection of items.
Chapter 5. Advanced GUIs
Slide 66
ListViews
ListView Editor Exercise
Design the form
Chapter 5. Advanced GUIs
Slide 67
ListViews
Exercise
Set name properties
Chapter 5. Advanced GUIs
Slide 68
ListViews
Declare
private bool modeNew;
Chapter 5. Advanced GUIs
Slide 70
ListViews
btnEdit Click Event
private void btnEdit_Click(object sender, EventArgs e)
Chapter 5. Advanced GUIs
{
modeNew = false;
SetControls(true);
txtFirstName.Focus();
}
Slide 71
ListViews
btnDelete and btnClose Click Event
private void btnDelete_Click(object sender, EventArgs e)
Chapter 5. Advanced GUIs
{
try
{
listView1.Items.RemoveAt(row);
}
catch (Exception)
{
}
}
Slide 72
ListViews
btnSave Click Event
private void btnSave_Click(object sender, EventArgs e)
Chapter 5. Advanced GUIs
{
if (modeNew)
{
listView1.Items.Add(txtId.Text);
listView1.Items[row].SubItems.Add(txtFirstName.Text);
listView1.Items[row].SubItems.Add(txtLastName.Text);
listView1.Items[row].SubItems.Add(txtAddress.Text);
}
else
{
listView1.Items[row].SubItems[1].Text = txtFirstName.Text;
listView1.Items[row].SubItems[2].Text = txtLastName.Text;
listView1.Items[row].SubItems[3].Text = txtAddress.Text;
}
SetControls(false);
}
Slide 73
ListViews
ItemSelectionChanged Event
Chapter 5. Advanced GUIs
Slide 74
Homework
Design Explore program
Chapter 5. Advanced GUIs
Slide 75
Homework
Load and treeView1 Cick Event
private void myTreeView_Load(object sender, EventArgs e)
Chapter 5. Advanced GUIs
{
// add c:\ drive to treeView1 and insert its subfolders
treeView1.Nodes.Add("C:\\");
LoadTreeView("C:\\",treeView1.Nodes[0]);
}
Slide 76
Homework
Load directories to treeView1
public void LoadTreeView(string dirValue, TreeNode parentNode)
Chapter 5. Advanced GUIs
{
string[] dirArray = Directory.GetDirectories(dirValue);
if (dirArray.Length != 0)
{
foreach (string directory in dirArray)
{
DirectoryInfo curDirectory = new DirectoryInfo(directory);
TreeNode myNode = new TreeNode(curDirectory.Name);
parentNode.Nodes.Add(myNode);
// recursively populate every subdirectory
LoadTreeView(directory, myNode);
}
}
}
Slide 77
Homework
Load file to listView1
public void LoadFilesInDirectory(string curDirectory)
Chapter 5. Advanced GUIs
{
// load directory information and display
listView1.Items.Clear();
DirectoryInfo newDirectory = new DirectoryInfo(curDirectory);
// put files and directories into arrays
DirectoryInfo[] dirArray = newDirectory.GetDirectories();
FileInfo[] fileArray = newDirectory.GetFiles();
// add directory names to ListView
foreach (DirectoryInfo dir in dirArray)
{
ListViewItem newDirectoryItem = listView1.Items.Add(dir.Name);
newDirectoryItem.SubItems.Add("");
Slide 78
Homework
Load file to listView1
newDirectoryItem.SubItems.Add("Folder");
Chapter 5. Advanced GUIs
newDirectoryItem.SubItems.Add(dir.LastWriteTime.ToString());
newDirectoryItem.ImageIndex = 0;
}
// add file names to ListView
foreach (FileInfo file in fileArray)
{
ListViewItem newFileItem = listView1.Items.Add(file.Name);
newFileItem.SubItems.Add(file.Length.ToString());
newFileItem.SubItems.Add("File");
newFileItem.SubItems.Add(file.LastWriteTime.ToString());
newFileItem.ImageIndex = 1;
}
}
Slide 79
Homework
Other functions
private void mnuList_Click(object sender, EventArgs e)
Chapter 5. Advanced GUIs
{
listView1.View = View.List;
}
Slide 80
LinkLabels
Displays links to other objects
Uses event handlers to link to right file or
Chapter 5. Advanced GUIs
program
Start method of Process class opens other
programs
Derived from class Label, inherits
functionality
LinkLabel Hand image displayed
on a form when mouse cursor over
a LinkLabel
Slide 81
LinkLabels
Common Properties
ActiveLinkColor: Specifies the color of the
Chapter 5. Advanced GUIs
Slide 82
LinkLabels
Common Properties
Links: Lists the LinkLabel.Link objects,
Chapter 5. Advanced GUIs
Slide 83
LinkLabels
Common Properties
VisitedLinkColor: Specifies the color of
Chapter 5. Advanced GUIs
Slide 84