1 / 68

Common Windows Controls

Common Windows Controls. 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

toshi
Download Presentation

Common Windows Controls

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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 button’s 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 firstsibling and another as the lastsibling • The terms grandchildren and greatgrandchildren 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 TreeNode’s 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 argument’s 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 AddRoot 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 AddChild 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 textAs String) As TreeNode Overridable Overloads Public Function Add (ByVal nodeAs 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

More Related