600 likes | 743 Views
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
E N D
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 • This implementation is new to Visual Studio 2005 • Images are typically bitmaps or icon files
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
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
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
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
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
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
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
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
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
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
Drill-Down Interface ListView displays files and associated icons TreeView utilizes a drill down interface to display file hierarchy
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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)
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
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")
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
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
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
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
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
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
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
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
The ListViewItem Class • Each item appearing in a ListView control instance is a ListViewItem • ListViewItem contains a • Textual description • Optional image
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
ListViewItem Class (Methods) • BeginEditmethod enables editing of the ListViewItem • EndEditmethod disables editing