UI Controls - PowerPoint PPT Presentation

ui controls n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
UI Controls PowerPoint Presentation
Download Presentation
UI Controls

play fullscreen
1 / 60
UI Controls
95 Views
Download Presentation
cai
Download Presentation

UI Controls

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