1 / 60

UI Controls

UI Controls. Overview. Image Resources The ToolStrip control The StatusStrip control The TreeView control The ListView control. Image Resources (Introduction). Note that the ImageList control is used for some controls Others are obtained from resource files

cai
Download Presentation

UI 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. UI Controls

  2. Overview • Image Resources • The ToolStrip control • The StatusStrip control • The TreeView control • The ListView control

  3. Image Resources (Introduction) • Note that the ImageList control is used for some controls • Others are obtained from resource files • This implementation is new to Visual Studio 2005 • Images are typically bitmaps or icon files

  4. Image Resources (Implementation) • Use the Select Resource dialog box to select an image • Images can be used by • The form • The entire project • Images are stored in a resource file having a suffix of .resx • Note that resources have many other purposes too • They can store just about anything

  5. The ImageList Control (Introduction) • Like resource files, it stores images • It’s used with the TreeView and ListView control • Use the Image Collection Editor to assign images to the control • All images in a control instance must have the same size • If images of multiple sizes are necessary, create multiple control instances

  6. The Image Collection Editor (Illustration)

  7. The ImageList Control (Properties) • The Images collection store a reference to the images • Use the Add method to add new images programmatically • Optional argument contains a string key used to reference the image • Reference in image • By index • By string key • Calling the IndexOfKey method

  8. The ToolStrip Control (Introduction) • It replaces the ToolBar control found in previous versions • It is considered a container control meaning that it sites other controls • Clickable buttons on the toolbar, for example • Events fire as the user interacts with these buttons • The implementation is similar to a menu

  9. The ToolStrip Control (Properties) • The Dock property is typically set to Top to tock the toolbar across the top of the form • The Items property is a collection • It contains the items that will appear on the toolbar • It works like any other collection

  10. The Items Collection (Introduction) • The Items collection is the container for the control instances appearing on the toolbar • Use the Items Collection Editor to create these control instances • ToolStripButton, Label, DropDownButton, ComboBox, TextBox, ProgressBar

  11. The Items Collection Editor (Illustration)

  12. The ToolStripButton Class • It’s a button appearing on the ToolStrip • Many properties are the same as those used by the Button class • Handle the Click event for the ToolStripButton as you would an ordinary button

  13. The ToolStripButton Class (Members) • Set the Image property to the image that will appear on the button • Images appear in the folder • Use Checked and CheckOnClick to create a checked button • Use DisplayStyle to display text, images, or both

  14. The ToolStripDropDownButton Class • Use this to create a drop-down button that works similar to a combo box • The DropDownItems collection contains the items that will drop down • Each item has a data type of ToolStripMenuItem • Handle the Click event just like any other menu item

  15. 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 • TreeView controlcreates the hierarchical part of the user interface, which appears in the left pane of Windows Explorer • ListView controlappears in the right pane of Windows Explorer and displays detailed information about the selected item(s) appearing in the TreeView

  16. Drill-Down Interface ListView displays files and associated icons TreeView utilizes a drill down interface to display file hierarchy

  17. 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

  18. Hierarchical Relationships Between TreeNodes

  19. 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 • ImageIndex property contains the numeric index of the image from an associated ImageList control instance • ImageListproperty contains a reference to an instance of the ImageList control

  20. TreeView Control(Properties 2) • LabelEditproperty (Boolean) defines whether or not the user can edit the textual contents of each TreeNodeNodesproperty references a collection of TreeNode objects • Note that this collection is hierarchical • Scrollableproperty (Boolean) defines whether or not scroll bars will appear when the TreeNodes will not fit within the visible region of the control instance

  21. TreeView Control (Properties 3) • PathSeparator property defines the character that separates the TreeNodes appearing in the hierarchy of a TreeView control instance • The SelectedImageIndexproperty contains the numeric index of an image appearing in the associated ImageList control instance • The SelectedNodeproperty gets the selected TreeNode or selects a TreeNode • The ShowLinesproperty (Boolean) defines whether or not lines connect the visible TreeNodes

  22. TreeView Control (Properties 4) • If the ShowRootLinesproperty is True, then child TreeNodes appear connected to the root TreeNode • If the ShowPlusMinusproperty 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 Sortedproperty, if True, causes the TreeNode objects to be sorted in alphabetical order

  23. TreeView Control (Methods 1) • The BeginUpdateand EndUpdatemethods suppress painting of the TreeView control instance while TreeNodes are being added or removed • Use to reduce display flicker and improve efficiency • The CollapseAllmethod collapses all TreeNode objects in the hierarchy, such that only the root-level node(s) are visible • The ExpandAllmethod expands all of the TreeNode objects in the hierarchy • The GetNodeAtmethod is typically used with a mouse event to get a TreeNode at a particular point or x,y coordinate pair

  24. TreeView Control (Methods 2) • GetNodeCountmethod 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

  25. TreeView Control (Events 1) • AfterCheckevent only fires when the CheckBoxes property is set to True • The event fires just after a TreeNode is checked or unchecked • BeforeExpandand AfterExpandevents fire just before and just after a TreeNode is being expanded, respectively • BeforeCollapseand AfterCollapseevents fire just before and just after a TreeNode is collapsed, respectively

  26. TreeView Control (Events 2) • AfterSelectevent fires after a TreeNode is selected in the control instance • Data type of the second argument is TreeViewEventArgs • BeforeSelectevent fires just before a TreeNode is selected • Data type of the second argument is TreeViewCancelEventArgs

  27. The TreeNode Object (Properties 1) • Checkedproperty, if True, indicates that the TreeNode is checked • If the TreeNode is not checked, then the Checked property has a value of False • ImageIndexproperty contains the numeric index of the image appearing in the corresponding ImageList control instance • SelectedImageIndexproperty contains the numeric index of an image appearing in the corresponding ImageList control instance • Tagproperty has the same meaning as the Tag property of other control instances • Text property stores the text appearing in the TreeNode

  28. TreeNode Object (Properties 2) • Boolean properties • IsVisibleproperty returns True if the TreeNode is visible • IsSelectedproperty returns True if the TreeNode is selected • IsExpandedproperty returns True if the TreeNode is expanded

  29. The TreeNode Object (Properties 3) • Properties used to locate sibling TreeNodes • FirstNodeproperty gets the first sibling TreeNode of the current TreeNode • PreviousNodeand NextNodeproperties get the previous and next sibling, respectively • LastNodeproperty gets the last sibling

  30. TreeNode Object (Methods 1) • Collapsemethod collapses the child TreeNodes of the current TreeNode • Expandmethod expands the child TreeNodes of the current TreeNode • Toggleproperty collapses expanded nodes or expands collapsed nodes depending on the current state of the TreeNode • BeginEditand EndEditmethods enable and disable editing of the current TreeNode, respectively

  31. TreeNode Object (Methods 2) • Removemethod removes the current TreeNode • EnsureVisiblemethod makes the TreeNode visible, expanding or collapsing other TreeNodes as necessary • GetNodeCountmethod returns the number of child TreeNodes of the current TreeNode

  32. The TreeNode Editor • 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

  33. TreeNode Editor (Illustration)

  34. 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

  35. 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

  36. Adding a TreeNode Programmatically (3) • Add a root-level node to the TreeView control instance named tvwMain tvwMain.Nodes.Add("First Node") Dim CurrentNode As New TreeNode() CurrentNode.Text = "Second Node" tvwMain.Nodes.Add(CurrentNode)

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

  38. Creating Child Nodes (Example) • Create a root-level node Dim RootNode As TreeNode Dim ChildNode As TreeNode RootNode = tvwMain.Nodes.Add("Root Node") • Create child nodes of the root-level node ChildNode = tvwMain.Nodes(0).Nodes.Add( _ "First Child") ChildNode = tvwMain.Nodes(0).Nodes.Add( _ "Second Child")

  39. Iterating Through TreeNodes • A recursive procedure is a procedure that calls itself • They are typically used with hierarchical data structures such as a TreeView • A condition must occur causing the procedure to stop calling itself • The result is infinite recursive descent

  40. Calling a Recursive Procedure

  41. 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

  42. 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

  43. ListView Control (Properties 1) • Alignmentproperty defines the alignment of the icons within the visible region of the control instance • Boolean AllowColumnReorderproperty defines whether or not the user can reorder the columns using drag-and-drop • Boolean CheckBoxesproperty defines whether check boxes appear along with the list items • Columnsproperty references a collection of type ColumnHeaderCollection • FullRowSelectproperty is only relevant while the ListView is in Details view • BooleanLabelEditproperty defines whether or not the user can edit the text of an item

  44. ListView Control (Properties 2) • Boolean MultiSelectproperty, if set to True, allows the user to select multiple items in the control instance • Boolean Scrollableproperty defines whether or not scroll bars appear in the control instance when the items will not fit within the visible region • Sortingproperty allows you to specify whether and how the items in the ListView will be sorted • Viewproperty defines which of the four supported views is the current view

  45. ListView Control (Methods) • When adding or removing several items from the list, suspend repainting the control instance by calling the BeginUpdatemethod, performing the updates, and then calling the EndUpdatemethod • Clearmethod removes all of the items from the control instance • Sortmethod sorts the items in the control instance

  46. ListView Control (Events) • The BeforeLabelEditevent fires just before the user begins editing the text in a label • AfterLabelEditevent fires just after the user finishes editing the text in a label • ItemCheckevent fires when the user checks or unchecks an item

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

  48. The ListViewItem Class • Each item appearing in a ListView control instance is a ListViewItem • ListViewItem contains a • Textual description • Optional image

  49. The ListViewItem Class (Properties) • ImageIndexproperty contains the index of the image associated with the ListViewItem • ImageListproperty returns the ImageList control instance associated with the ListViewItem • SubItemsproperty references a collection of type ListViewSubItemCollection • Textproperty stores the text appearing in the visible region of the ListViewItem

  50. ListViewItem Class (Methods) • BeginEditmethod enables editing of the ListViewItem • EndEditmethod disables editing

More Related