Common Windows Controls

1
Common Windows Controls
2
Objectives

• Learn about common Windows controls
• Load, display, and share images with other
  control instances using the ImageList control
• Create a ToolBar control instance on a form and
  configure it
• Create a status bar on a form to display
  application-specific information
• Create a drill-down interface using the TreeView
  and ListView controls
• Configure the ListView control to work with
  Details view

3
CommonWindows Controls (1)

• The ImageList control stores images typically
  used by other control instances
• It is used with the ListView and TreeView
  controls for example
• The ToolBar control displays buttons
• Each button typically duplicates the
  functionality of some menu item
• The StatusBar control displays a horizontal bar
• Typically appears docked along the bottom of a
  form
• Technically can be docked along any edge of the
  form

4
Common Windows Controls (2)

• The TreeView control allows you to create a
  hierarchical interface called a drill-down
  interface
• Works similarly to the left pane in Windows
  Explorer
• The ListView control displays data in the form of
  a list
• The ListView control is commonly used in
  conjunction with the TreeView control
• Works similarly to the right pane in Windows
  Explorer

5
The ImageList Control (1)

• The ImageList control stores graphical files such
  as bitmap (.bmp), icon (.ico), and cursor (.cur)
  files
• Used in conjunction with other control instances
  that display graphical images
• TreeView
• ListView
• ToolBar

6
The ImageList Control (2)

• An ImageList control has a property named Images
• This property contains a reference to an
  ImageCollection
• This collection, in turn, contains one or more
  Image objects corresponding to the images in the
  collection
• Reference an individual Image object in the
  collection at runtime by its 0-based numeric
  index
• Add images at design time using the Image
  Collection Editor
• All images in a control instance must have the
  same size
• If images of multiple sizes are necessary, create
  multiple control instances

7
Image Collection Editor
Add a new image
Remove the selected image
8
The ToolBar Control

• A ToolBar control typically contains buttons that
  the user clicks to perform an action
• Each toolbar button can contain text, a graphical
  image, or both
• Buttons can be configured as drop-down buttons or
  as push buttons

9
ToolBar Control (Properties)

• The Appearance property defines whether the
  buttons on the toolbar appear raised off the
  surface of the toolbar or appear flat
• The Buttons property references a collection
  containing the ToolBarButton objects appearing on
  the toolbar
• The ImageList property stores a reference to an
  ImageList control instance
• The Boolean ShowToolTips property defines whether
  or not the ToolTips will appear as the mouse
  hovers over a button
• The TextAlign property defines how the text will
  be aligned about the button when the button
  displays text

10
ToolBar Control (Events)

• A ButtonClick event fires for the ToolBar itself
• Use second argument to obtain a reference to the
  clicked button
• Use Name or Tag property to determine which
  button was clicked
• A ButtonDropDown event fires when a button having
  a drop-down style is clicked

11
ToolBar Control Buttons (1)

• Buttons appearing on a toolbar have a data type
  of ToolBarButton
• Properties
• Enabled and Visible properties enable or disable
  a ToolBarButton or make it visible or invisible,
  respectively
• ImageIndex property contains the numeric index of
  the image defined in an instance of the ImageList
  control

12
ToolBar Control Buttons (Properties)

• Each button has a Name property with which you
  can reference the button programmatically
• The Tag property can be used to accomplish the
  same task as Name
• The Style property defines how the button
  operates
• Four possible styles
• The Text property defines the optional text
  appearing in the button
• The ToolTipText property contains the text that
  will appear in the buttons ToolTip

13
ToolBarButton Collection Editor
14
ToolBar Control Button Style

• Four button styles
• A button configured as a DropDownButton displays
  a context menu
• A button configured as a PushButton works much
  like an ordinary Button control
• A Separator button does nothing other than to
  visually separate one button from another
• A ToggleButton works similarly to a check box or
  checked menu item
• It can be checked or unchecked

15
DropDown Buttons (1)

• A DropDown button displays a context menu
• To create a context menu
• Create an instance of the ContextMenu control
• Create the menu in-place as you have done before
  with the MainMenu control
• Create a Click event handler for each menu item

16
DropDown Buttons (2)

• To associate a ToolBarButton with a context menu
• Set the DropDownMenu property of the button to
  the name of the ContextMenu control instance
• Set the Style of the button to DropDownButton
• VB .NET does the rest

17
Creating Event Handlersfor ToolBar Buttons

• Example of a ButtonClick event handler
• Private Sub tbrMain_ButtonClick( _
• ByVal sender As System.Object, ByVal e As _
• System.Windows.Forms.ToolBarButtonClickEventArgs)
  _
• Handles tbrMain.ButtonClick
• Select Case e.Button.Tag
• Case "tbbOpen"
• 'Case statements for other buttons
• End Select
• End Sub

18
The StatusBar Control (1)

• Use to display status information
• Control typically docked along the bottom of the
  form
• Status bar contains one or more panels to display
  information
• Panels may be configured to resize as form is
  resized

19
The StatusBar Control (2)

• Events
• PanelClick event fires when the user clicks on
  the status bar
• A reference to the panel that was clicked is
  passed in the second argument to the event
  handler
• Properties
• Panels property contains a reference to the
  StatusBarPanelCollection
• This collection contains a reference to each
  panel defined in the status bar
• ShowPanels property (Boolean), if False, causes
  the value of the Text property to appear across
  the entire status bar
• If True, individual panels appear in the visible
  region of the status bar
• Text property value appears in the status bar
  only when the value of the ShowPanels property is
  False

20
The StatusBarPanel Class

• Visible region of the status bar is divided into
  panels
• A panel can contain text, a picture, or both
• Panel size can be configured
• To hide a StatusBarPanel, set the Width property
  to 0
• No Visible property exists

21
StatusBarPanel (Properties)

• The Alignment property can be set to Left, Right,
  or Center, to align the text within the visible
  region of the panel
• The AutoSize property allows you to specify how a
  panel is resized relative to the other panels in
  the status bar
• Values are None, Contents, Spring
• The BorderStyle property defines how the border
  appears around a status bar panel
• Borders are typically recessed
• The Icon property contains an image
• The MinWidth property defines the minimum width
  of the panel
• The Width property defines the actual or maximum
  panel width

22
StatusBarPanelCollection Editor
23
StatusBar Panels (Example)

• Store a value in the panel having an index value
  of 3
• sbrMain.Panels(3).Text _
• System.DateTime.Today.ToShortDateString
• Use the panel name to accomplish the same task
• sbpDate.Text _
• System.DateTime.Today.ToShortDateString

24
Introduction toDrill-Down Interfaces

• A drill-down interface is one in which the user
  navigates through hierarchical data from the most
  general data to the most specific data
• VB .NET uses two different controls to create the
  two parts of a drill-down interface
• The TreeView control creates the hierarchical
  part of the user interface, which appears in the
  left pane of Windows Explorer
• The ListView control appears in the right pane of
  Windows Explorer and displays detailed
  information about the selected item(s) appearing
  in the TreeView

25
Drill-Down Interface
ListView displays files and associated icons
TreeView utilizes a drill-down interface to
display file hierarchy
26
TreeView Control Relationships

• Top-level node is a root node
• Root node has no parent node
• Nodes have one or more children
• Children having the same parent are siblings
• One sibling is designated as the first sibling
  and another as the last sibling
• The terms grandchildren and great grandchildren
  further describe relationships

27
Hierarchical Relationships Between TreeNodes
28
The TreeView Control (Properties 1)

• The CheckBoxes property can be set to True or
  False
• If set to True, check boxes appear to the left of
  each TreeNode
• If set to False, they do not
• The ImageIndex property contains the numeric
  index of the image from an associated ImageList
  control instance
• The ImageList property contains a reference to an
  instance of the ImageList control
• The LabelEdit property (Boolean) defines whether
  or not the user can edit the textual contents of
  each TreeNode
• The Nodes property references a collection of
  TreeNode objects

29
TreeView Control (Properties 2)

• The PathSeparator property defines the character
  that separates the TreeNodes appearing in the
  hierarchy of a TreeView control instance
• The Scrollable property (Boolean) defines whether
  or not scroll bars will appear when the expanded
  TreeNodes will not fit within the visible region
  of the control instance
• The SelectedImageIndex property contains the
  numeric index of an image appearing in the
  associated ImageList control instance
• The SelectedNode property gets the selected
  TreeNode or selects a TreeNode
• The ShowLines property (Boolean) defines whether
  or not lines connect the visible TreeNodes

30
TreeView Control (Properties 3)

• If the ShowRootLines property is True, then child
  TreeNodes appear connected to the root TreeNode
• If the ShowPlusMinus property is True, then a
  plus sign appears to the left of TreeNodes text
  if the TreeNode is collapsed, and a minus sign
  appears if the TreeNode is expanded
• The Sorted property, if True, causes the TreeNode
  objects to be sorted in alphabetical order

31
TreeView Control (Methods 1)

• The BeginUpdate and EndUpdate methods suppress
  painting of the TreeView control instance while
  TreeNodes are being added or removed
• Use to reduce display flicker and improve
  efficiency
• The CollapseAll method collapses all TreeNode
  objects in the hierarchy, such that only the
  root-level node(s) are visible
• The ExpandAll method expands all of the TreeNode
  objects in the hierarchy
• The GetNodeAt method is typically used with a
  mouse event to get a TreeNode at a particular
  point or x,y coordinate pair

32
TreeView Control (Methods 2)

• The GetNodeCount method accepts one Boolean
  argument
• If the argument is False, then GetNodeCount
  returns the number of immediate children of the
  specified TreeNode
• If the arguments value is True, then the method
  returns the count of all of the child TreeNodes
  in the TreeView control instance

33
TreeView Control (Events 1)

• The AfterCheck event only fires when the
  CheckBoxes property is set to True
• The event fires just after a TreeNode is checked
  or unchecked
• The BeforeExpand and AfterExpand events fire just
  before and just after a TreeNode is being
  expanded, respectively
• The BeforeCollapse and AfterCollapse events fire
  just before and just after a TreeNode is
  collapsed, respectively

34
TreeView Control (Events 2)

• The AfterSelect event fires after a TreeNode is
  selected in the control instance
• Data type of the second argument is
  TreeViewEventArgs
• The BeforeSelect event fires just before a
  TreeNode is selected
• Data type of the second argument is
  TreeViewCancelEventArgs

35
The TreeNode Object (Properties 1)

• The Checked property, if True, indicates that the
  TreeNode is checked
• If the TreeNode is not checked, then the Checked
  property has a value of False
• The ImageIndex property contains the numeric
  index of the image appearing in the corresponding
  ImageList control instance
• The SelectedImageIndex property contains the
  numeric index of an image appearing in the
  corresponding ImageList control instance
• The Tag property has the same meaning as the Tag
  property of other control instances
• The Text property stores the text appearing in
  the TreeNode

36
TreeNode Object (Properties 2)

• Boolean Properties
• The IsVisible property returns True if the
  TreeNode is visible
• The IsSelected property returns True if the
  TreeNode is selected
• The IsExpanded property returns True if the
  TreeNode is expanded
• Properties used to locate sibling TreeNodes
• The FirstNode property gets the first sibling
  TreeNode of the current TreeNode
• The PreviousNode and NextNode properties get the
  previous and next sibling, respectively
• The LastNode property gets the last sibling

37
TreeNode Object (Methods 1)

• The Collapse method collapses the child TreeNodes
  of the current TreeNode
• The Expand method expands the child TreeNodes of
  the current TreeNode
• The Toggle property collapses expanded nodes or
  expands collapsed nodes depending on the current
  state of the TreeNode
• The BeginEdit and EndEdit methods enable and
  disable editing of the current TreeNode,
  respectively

38
TreeNode Object (Methods 2)

• The Remove method removes the current TreeNode
• The EnsureVisible method makes the TreeNode
  visible, expanding or collapsing other TreeNodes
  as necessary
• The GetNodeCount method returns the number of
  child TreeNodes of the current TreeNode

39
TreeNode Editor

• The TreeNode Editor allows you to create the root
  TreeNode, child TreeNodes, and sibling TreeNodes
  using the following buttons
• The Add Root button is the only enabled button
  when the TreeView control instance contains no
  TreeNodes
• To add a child TreeNode, select an existing
  TreeNode, and then click the Add Child button
• The new TreeNode will be created as a child of
  the selected TreeNode
• To delete a TreeNode, select the TreeNode to be
  deleted, and then click the Delete button

40
TreeNode Editor (Illustration)
41
Adding a TreeNode Programmatically (1)

• The overloaded Add method adds a new TreeNode
  object to the Nodes collection
• Syntax
• Overridable Overloads Public Function Add
• (ByVal text As String) As TreeNode
• Overridable Overloads Public Function Add
• (ByVal node As TreeNode) As TreeNode

42
Adding a TreeNode Programmatically (2)

• In the first overloaded method, the Add method
  creates a new instance of the TreeNode class
• Method accepts one argument, the text string
  stored in the TreeNode
• Method returns the instance of the TreeNode that
  was added
• In the second overloaded method, the Add method
  accepts one argument
• An existing TreeNode object
• Method returns the index of the node in the Nodes
  collection

43
Adding a TreeNode Programmatically (3)

• Add a root-level node to the TreeView control
  instance named tvwMain
• tvwMain.Nodes.Add("First Node")
• Dim ptnCurrent As New TreeNode()
• ptnCurrent.Text "Second Node"
• tvwMain.Nodes.Add(ptnCurrent)

44
Creating Child Nodes

• Node collections are hierarchical
• Each TreeNode object contains its own Nodes
  collection
• Note TreeView control contains a Nodes collection
  too
• This Nodes collection stores the immediate
  children of the current TreeNode

45
Creating Child Nodes (Example)

• Create a root-level node
• Dim ptnRoot As TreeNode
• Dim ptnChild As TreeNode
• ptnRoot tvwMain.Nodes.Add("Root Node")
• Create child nodes of the root-level node
• ptnChild tvwMain.Nodes(0).Nodes.Add( _
• "First Child")
• ptnChild tvwMain.Nodes(0).Nodes.Add( _
• "Second Child")

46
TreeNode Hierarchy
47
Iterating Through TreeNodes

• A recursive procedure is a procedure that calls
  itself
• Typically used with hierarchical data structures
  such as a TreeView
• A condition must occur causing the procedure to
  stop calling itself

48
Calling a Recursive Procedure
49
Calling a Recursive Procedure (Example)

• Call CheckChildren(e.Node, True)
• Private Sub CheckChildren(ByVal tnCurrent As _
  TreeNode, ByVal pblnChecked As Boolean)
• Dim tnLocal As TreeNode
• For Each tnLocal In tnCurrent.Nodes
• ' Statements
• Call CheckChildren(tnLocal, pblnChecked)
• Next
• End Sub

50
The ListView Control

• The ListView control displays data in the form of
  lists or organized into columns
• The view defines how the data are displayed
  within the control instance
• 4 views are supported
• ListView control is typically used with the
  TreeView control

51
ListView Control (Properties 1)

• The Alignment property defines the alignment of
  the icons within the visible region of the
  control instance
• The Boolean AllowColumnReorder property defines
  whether or not the user can reorder the columns
  using drag-and-drop
• The Boolean CheckBoxes property defines whether
  check boxes appear along with the list items
• The Columns property references a collection of
  type ColumnHeaderCollection
• The FullRowSelect property is only relevant while
  the ListView is in Details view
• The Boolean LabelEdit property defines whether or
  not the user can edit the text of an item

52
ListView Control (Properties 2)

• The Boolean MultiSelect property, if set to True,
  allows the user to select multiple items in the
  control instance
• The Boolean Scrollable property defines whether
  or not scroll bars appear in the control instance
  when the items will not fit within the visible
  region
• The Sorting property allows you to specify
  whether and how the items in the ListView will be
  sorted
• The View property defines which of the four
  supported views is the current view

53
ListView Control (Methods)

• When adding or removing several items from the
  list, suspend repainting the control instance by
  calling the BeginUpdate method, performing the
  updates, and then calling the EndUpdate method
• The Clear method removes all of the items from
  the control instance
• The Sort method sorts the items in the control
  instance

54
ListView Control (Events)

• The BeforeLabelEdit event fires just before the
  user begins editing the text in a label
• The AfterLabelEdit event fires just after the
  user finishes editing the text in a label
• The ItemCheck event fires when the user checks or
  unchecks an item

55
The View Property

• The value of the View property can be changed at
  runtime or at design time
• Four different views
• In LargeIcon view (default), items are displayed
  with large (32 by 32) pixel icons
• In SmallIcon view, items are displayed with small
  (16 by 16) pixel icons
• In List view, items are displayed in a list. Data
  can be aligned in rows or columns
• In Detail view, items are displayed in multiple
  columns having column headers

56
The ListViewItem Class

• Each item appearing in a ListView control
  instance is a ListViewItem
• A ListViewItem object contains a textual
  description and an associated image

57
The ListViewItem Class (Properties)

• The ImageIndex property contains the index of the
  image associated with the ListViewItem
• The ImageList property returns the ImageList
  control instance associated with the ListViewItem
• The SubItems property references a collection of
  type ListViewSubItemCollection
• The Text property stores the text appearing in
  the visible region of the ListViewItem

58
ListViewItem Class (Methods)

• The BeginEdit method enables editing of the
  ListViewItem
• The EndEdit method disables editing

59
Adding a ListView Item

• Call the Add method having the following syntax
• Overridable Overloads Public Function Add(ByVal
  value As ListViewItem) As ListViewItem
• Overridable Overloads Public Function Add(ByVal
  text As String) As ListViewItem
• Overridable Overloads Public Function Add(ByVal
  text As String, ByVal imageIndex As Integer) As
  ListViewItem

60
Adding a ListView Item

• The first overloaded method accepts one argument,
  an existing instance of the ListViewItem class
• The ListViewItem is added to the end of the list
• The second overloaded method accepts one
  argument, a string
• The string appears in the visible region of the
  control instance
• The third overloaded method accepts two arguments
• The first contains the string appearing in the
  visible region of the control instance
• The second contains the index of an image from an
  instance of the ImageList control

61
ListViewItem Class (Example)

• Add a ListViewItem
• lvwDemo.Items.Add("Item 1")
• Dim lviDemo As New ListViewItem()
• lviDemo.Text "Item 2"
• lvwDemo.ImageIndex 1
• lvwDemo.Items.Add(lviDemo)
• lvwDemo.Items.Add("Item 3", 1)

62
The ListView Control (Details View)

• Displays data in multiple columns
• ColumnHeaderCollection applies to the ListView
  control itself and contains column headers
• ListViewSubItemCollection applies to each ListItem

63
Using Details View (Illustration)
64
The ColumnHeaderCollection

• The ColumnHeaderCollection contains one or more
  ColumnHeader objects representing each column
• Properties
• The Text property contains the text that appears
  in the column header
• The TextAlign property defines horizontal
  alignment of the text within the column
• The Width property defines the width of the
  column
• This column width is measured in pixels

65
ColumnHeaderCollectionExample

• Example
• Dim lvwchCurrent As New ColumnHeader()
• lvwchCurrent.Text "Column 1"
• lvwchCurrent.Width 72
• lvwchCurrent.TextAlign HorizontalAlignment.Cent
  er
• lvwDemo.Columns.Add lvwchCurrent
• lvwDemo.Columns.Add("Column 2", 72, _
• HorizontalAlignment.Center)

66
ColumnHeaderCollectionExample

• Dissection
• The first block of statements
• Creates a new instance of the ColumnHeader class
• Then it configures the class instance by
  individually setting each property
• Finally, it adds the ColumnHeader to the Columns
  collection
• The final statement adds a new ColumnHeader

67
ListViewSubItems

• ListViewSubItems do not respond to events
• ListViewSubItems support only the BackColor and
  ForeColor properties that define the text color,
  and the Text property to define the text itself
  that appears in the sub item

68
ListViewSubItems (Illustration)