LESSON 5 - Advanced Visual Basic Controls

ADVANCED VISUAL BASIC CONTROLS

5

The MonthView control displays a calendar of the current month and lets the user scroll to other months as well. The user can select a date or range of sequential dates in MonthView controls.

The DateTimePicker control allows the user to specify a date or time, as its name implies. DateTimePickers can display a Month View as a drop-down control, or the current time together with an updown control to let users select the time they want.

To add these controls to your program, select the Project >> Components menu item, click the Controls tab in the Components dialog box that opens, select the Microsoft Windows Common Controls-2 entry, and click OK to close the Components dialog box.

GETTING DATES FROM A MonthView CONTROL

When the user clicks a date in a Month View control, the control creates a DateClick event. We can take advantage of that event to display the date in a message box using the Value property.

Private Sub MonthView1_DateClick()MsgBox MonthView1.Value

End Sub

You can also extract the Month, Day, and Year by using the MonthView’s Month, Day, and Year properties as in the following example.

Private Sub MonthView1_DateClick() Msgbox MonthView1.Month & “/“ & MonthView1.Day & “/“ _

& MonthView1.YearEnd Sub

USING THE DateTimePicker CONTROL

An easy way of letting the user select a date is to use a DateTimePicker control. The DateTimePicker control allows the user to specify a date or time. DateTimePickers can display a Month View as a drop-down control, or the current time with an updown control to let the user select the time they want.

In particular, the control’s UpDown property determines which mode the control is in:

UpDown = False means the control is in drop-down calendar mode (the default).UpDown = True means the DateTimePicker is in time format mode.

DateTimePicker controls have a Change event, and we’ll make use of that event to catch new time settings as the user makes them. In this case, we’ll just display the new time in a TextBox this way, using the DateTimePicker’s Value Property:

Private Sub DTPicker1_Change() Text1.Text = DTPicker1.ValueEnd Sub

The DateTimePicker control also contains Month, Day, and Year properties just like the MonthView control.

Information and Communication Technology DepartmentPalompon Institute of Technology

37

Working with MonthView Control and DateTimePicker Control


5

You can group controls in Visual Basic into one, using a Tab Strip; as the user selects tabs in the tab strip, you can display the contents in that panel when their tab is clicked.

To add a Tab Strip control to a form:

Select Project >> Components >> Controls tab >> Windows Common Controls >> OK.

After you add a Tab Strip control to your program, it’s up to you to tailor it the way you want it, by adding new tabs, text, and images to those tabs, and so on.

INSERTING TABS INTO A TAB STRIP CONTROL

When you first add a tab strip control to a form, that control has one tab in it, to add another tab, you use the tab strip’s property pages at design time. To do this, just right-click the tab strip, select Properties from the menu that appears, and click the Tabs tab. In this tab, you add new tabs by clicking the Insert Tab button, and at the same time you can set the tab’s Text, Key, and other properties.

SETTING TAB CAPTIONS

At design time, you use the property pages of the Tab Strip control to set the captions of the tabs. To do this, just right-click the tab strip, select Properties from the menu that appears, and click the Tabs tab. To enter the text for each tab, just select the tab you want to work on, and enter the text for that tab in the box labeled Caption.

SETTING TAB IMAGES

You can connect an Image List control to a Tab Strip control using the Tab Strip’s ImageList property, and you can connect the images in that Image List to the tabs in the Tab Strip. At design time, you use the Tab Strip’s Property pages. Just right-click the Tab Strip, select Properties from the menu that appears, and click the Tabs tab. Then select the tab you want to add an image to, and place the image’s Index or Key in the Image List into the box labeled Image. In addition, you must connect the Image List to the Tab Strip control; select General tab, and enter the name of the Image List control that holds the images you’ll use in the box labeled Image List.

USING A TAB STRIP TO DISPLAY OTHER CONTROLS

You usually use Tab Strips to display other controls in your application. The most effective way to do this is to embed those controls in a Picture Box and place the Picture Box on the Tab Strip. After you place controls on the Picture Box, adjust the size of the Picture Box to cover the Tab Strip’s client area (its display area). To do this, consider the following code:

With PictureBox1 .Move TabStrip1.ClientLeft, TabStrip1.ClientTop, _

TabStrip1.ClientWidth, TabStrip1.ClientHeightEnd With

If you have multiple Picture Box on top of each other, you can make sure that only one of these Picture Box will show at a time by setting the Zorder property of the Picture Box to 0.

HANDLING TAB CLICKS

When the user clicks a tab in a Tab Strip, the control creates Click event. You can identify which tab the user clicks by combining two Tab Strip properties: SelectedItem and Index. Consider the following


38

Working with Tab Strip Control


5example, which displays a Message Box telling which tab of the Tab Strip control has been clicked by the user (the Tab Strip control in this example contains two tabs):

Private Sub TabStrip1_Click() Select Case TabStrip1.SelectedItem.Index Case 1

MsgBox “You clicked Tab 1”Case 2

MsgBox “You clicked Tab 2” End SelectEnd Sub

A drop-down menu offers a special kind of control that lets your users selects options and issue commands. Some menu options might mimic controls on your form. A drop-down menu will descend from the menu heading (i.e., the name displayed in the main Menu Bar) when the user clicks on the menu heading.

The Toolbox window doesn’t contain any menu-creation tool. Instead, Microsoft offers a special menu tool called the Menu Editor that you use to create menus. From the form window, you can press CTRL + E to display the Menu Editor, or you can accessed the Menu Editor by clicking on the Menu Editor button in the Toolbar, or select Tools >> Menu Editor. The Menu Editor will then appear as shown below.

The Menu Editor helps you design menus for your applications. In a way, the menu editor acts like a Properties window for the menu bar because you’ll designate the names of the menu controls as well as the captions that the users see on the menus and other related information from within the menu editor.

Each line of text (menu item) in a menu is a Menu control, just as each command button that you place on a form is a command button control. You use the Menu Editor to create Menu controls and to set the following properties for each control:

Caption. The caption is the actual text that is displayed in the menu item. You can specify an access key, which allows the users to select the menu item with the keyboard instead of


39

Building Drop-Down Menus


5a mouse, by placing an ampersand (&) before the appropriate letter of the caption. For example, if a particular menu item’s Caption property is set to F&ormat, the “o” is underlined, and the users can select that item by pressing O when the menu is active. The Caption property is required for all menu items.

Name. This property is used to identify the menu item in code. The Name property is required for all menu items. Like all other controls, each Menu control must have a name that will be used to refer to it in code. With these controls, unlike other controls, however, Visual Basic does not give menu items a default name; therefore, you must set the Name property of all menu items before leaving the Menu Editor.

Shortcut. With this property, you can define shortcut key combinations that allow your users to select a menu item with one keystroke, bypassing the menu system entirely. For example, many programs use CTRL + P as a shortcut key; eliminating the need to choose File, Print from the menu system.

Checked. If this property is True, a check mark appears to the left of the menu item’s caption to indicate, for example, that a user has selected a particular option. If this property is False, no check mark appears.

Enabled. This property can be set to False if its associated action isn’t appropriate at a particular time. For example, if no text is selected, an Edit menu’s Copy command can be disabled by setting its Enabled property to False.

Visible. This property determines whether the menu item can be seen. Your application may have menu items that should not be seen at certain times; for example, you may not want the users to be able to see the Window menu item if no windows are open.

WindowList. If your menu is on an MDI (Multiple Document Interface) form, setting this property for a top-level menu control appends a dynamically-updated list of any active MDI child windows to the menu automatically.

TO CREATE A DROP-DOWN MENU

Open the Menu Editor and provide the value for the Caption and Name property, as well as all other properties associated to a top-level menu and sub-menu in your application.

A Toolbar contains buttons that correspond to items in an application’s menu, providing an easy interface for the user to reach frequently used functions and commands. In this way, toolbars can make life a lot easier for the user.

Although, there are two types of toolbars (toolbar and coolbar), they both are used for the same purpose: to provide a set of graphical buttons to access common program functions.

The Toolbar control enables you to create six different types of buttons:

Pushbuttons that work like command buttons

Check buttons that work in an on-off mode, like a check box

Button groups that work like option buttons

Separator buttons that create spaces in the toolbar

Placeholder buttons that create empty space, allowing you to place other controls, such as combo boxes, on the toolbar

Drop-down buttons that, when clicked, offer the user a drop-down menu of choices


40

Working with Toolbars


5TO DRAW A TOOLBAR CONTROL TO A FORM

Right-click in an empty area of the Toolbox >> choose Components from the pop-up menu; or click Project >> Components.

When the Components dialog box appears, select the first group of Common controls – Microsoft Windows Common Controls 6.0. This group of controls contains the standard toolbar and ImageList control. The Coolbar control is in the third group (Microsoft Windows Common Controls-3 6.0); select this group to add the coolbar to the Toolbox.

GETTING THE IMAGES FOR YOUR TOOLBAR

The first step in creating any toolbar is adding the images that will be displayed on the toolbar to an ImageList control. Follow these steps to get those images:

1. Draw an ImageList control on your form, and give it a unique name. Because the ImageList control is not visible to the users, its size is set by Visual Basic. No matter what size you draw it on the form, it always appears as a little icon at design time.

2. To add bitmap images to the control, open its Property Pages dialog box either by pressing the ellipsis (. . .) button of the Custom property in the Properties window, or by right-clicking the ImageList control and selecting Properties.

From the Property Pages dialog box shown at the right, you can add images from graphics files (icons and bitmaps) stored on your hard drive.


41


53. To add an image to the ImageList control, click the Insert Picture button. This action presents you

with the Select Picture dialog box, from which you can choose the bitmap or icon you want. As you select the picture, it is added to the control and displayed in the Images area.

4. After you add all the pictures you might need, click OK button to close the dialog box.

After you complete these steps, your ImageList control is ready to use for supplying images to your toolbar.

CREATING A STANDARD TOOLBAR

To use the standard Toolbar control, you first need to position it on a form. To do so, follow these steps:

1. Draw the Toolbar control on your form. Visual Basic positions the Toolbar at the top of the form, and the control spans the width of the form.

2. Set the toolbar’s alignment. A toolbar can be aligned along any of the four edges of its form or float freely. You can set the alignment of the toolbar with its Align property, which can take these values:

vbAlignNone – 0 vbAlignTop – 1 (default) vbAlignBottom – 2 vbAlignLeft – 3 vbAlignRight - 4

3. Open the Toolbar control’s Property Pages dialog box by right-clicking the control and choosing Properties.

4. Set the Toolbar control’s ImageList property to the name of the ImageList control that you already set up to provide images.

CREATING THE TOOLBAR’S BUTTONS

The next step in creating your toolbar is to create the buttons that will be placed on the toolbar. For this task, you move to the Buttons tab of the Property Pages of the Toolbar you placed on your form.

To add a button to the toolbar, click Insert Button. If other buttons already exist on the toolbar, a new button appears after the currently selected button. For each button that you add, you should specify several properties – the Key property, the Style property, and the Image property.


42


5The Key property specifies a string that is used to identify the button in your code. The Key property for each button must be unique, and you should assign a string that is meaningful to you. This way, you can remember it more easily when you are writing you code.

The Image property specifies the index of the picture that you want to appear on the face of the button. The index corresponds to the index of the picture in the ImageList control. You can specify a value of zero for the Image property if you do not want a picture to appear on the button.

The Style property determines the type of button that you create, which can take various settings summarized below.

0 – tbrDefault – the button is a standard pushbutton. 1 – tbrCheck – the button indicates that an option is on or off by its state. 2 – tbrButtonGroup – the button is part of a group. Only one button of the group can be

pressed at a time. 3 – tbrSeparator – the button is used to provide space between other buttons. The button

has a width of eight pixels 4 – tbrPlaceHolder – this button is used to hold a space in the toolbar for other controls

such as a combo box. 5 – tbrDropDown – used with a Buttonmenu to create a drop-down menu on the toolbar

button.

In addition to these three key properties, you can set several other properties for each button on the toolbar as shown below.

Caption – this text is displayed beneath the picture on a button. Description – this text describes the button to the users when they invoke the Customize

Toolbar dialog box. ToolTipText – this text appears when the mouse pointer rests on the button. This text is

displayed only if the ShowTips property of the toolbar is set to True (which is the default). Value – this property sets or returns the current state of the button. A value of 10 indicates that

the button is not pressed. A value of 1 indicates that the button is pressed. This property is typically used to pre-select a check-style button, or one button in a group.

HANDLING TOOLBAR BUTTONS CLICKS

To make toolbar buttons active, you do that with the toolbar control’s ButtonClick event:

Private Sub Toolbar1_ButtonClick(ByVal Button As CmctlLib.Button). . . . .executable statements. . . . .

End Sub

The button the user clicked is passed to us in this event handler procedure, and we can determine which button was clicked by checking either the button’s Index or Key properties, with the help of the Select Case statement.


43


5Consider the following example (using the button’s Index property):

Private Sub Toolbar1_ButtonClick(ByVal Button As CmctlLib.Button)Select Case Button.Index

Case 1 executable statementsCase 2 . . . . .Case n . . . . .Case Else . . . . .

End SelectEnd Sub

Status bar appear at the bottom of windows and usually hold several panels in which you can display text. The status bar is there to give feedback to the user on program operation, as well as other items like time of day or key states (such as Caps Lock of the Ins Key).

You add the Status bar control tool to the toolbox by following the same steps to add the Toolbar control tool, because the status bar control is also part of the Microsoft Windows Common Controls 6.0

If the Microsoft Windows Common Controls 6.0 group is already on the Visual Basic toolbox, you can add the status bar control by simply double-clicking the Status Bar control on the toolbox.

ALIGNING STATUS BAR IN A FORM

When you add a Status bar control in a form, by default, it aligns itself with the bottom of the client area of the form. You can set the alignment of the status bar with its Align property, which can take these values:

vbAlignNone – 0 vbAlignTop – 1 vbAlignBottom – 2 (default) vbAlignLeft – 3 vbAlignRight – 4

ADDING PANELS TO A STATUS BAR

A status bar has a Panels collection which displays text, picture, etc. and you add the panels you want to that collection by following these steps:

1. Right-click the status bar, and select the Properties item in the menu that opens.2. Click the Panels tab in the property pages.3. Click the Insert Panel button as many times as you want panels in your status bar.4. Close the property pages by clicking on OK.

DISPLAYING TIME, DATES, and KEY STATES IN A STATUS BAR

Status bar controls are already setup to display common status items like key states and dates. To display one of those items, just right-click the status bar you added in the form >> select the Properties item in the menu that appears >> click the Panels tab >> select the panel you want to work with >> set the Style property in the box labeled Style to one of the following:

sbrText – 0 (default); text and/or a bitmap. Displays text in the Text property.Information and Communication Technology DepartmentPalompon Institute of Technology

44

Working with Status Bar


5 sbrCaps – 1; Caps Lock key. Display the letters “CAPS” in bold when Caps Lock is enabled,

and dimmed when disabled. sbrNum – 2; Num Lock key. Displays the letters “NUM” in bold when the Num Lock key is

enabled, and dimmed when disabled. sbrIns – 3; Insert key. Displays the letters “INS” in bold when the Insert key is enabled, and

dimmed when disabled. sbrScrl – 4; Scroll Lock key. Displays the letters “SCRL” in bold when Scroll Lock is enabled,

and dimmed when disabled. sbrTime – 5; Time. Displays the current time in the system format. sbrDate – 6; Date. Displays the current date in the system format. sbrKana – 7; Kanna lock. Displays the letters “KANA” in bold when kana lock is enabled, and

dimmed when disabled (this feature is enabled on Japanese operating systems only).

CUSTOMIZING A STATUS BAR PANEL’S APPEARANCE

You can customize the appearance of the panels in a status bar with the Bevel, AutoSize, and Alignment properties. The Bevel property specifies whether the panel will have an inset bevel (default), raised, or none at all. Here’s how you can set the Bevel property:

sbrNoBevel – 0; the Panel displays no bevel, and text looks like it is displayed right on the status bar.

sbrInset – 1; the Panel appears to be sunk into the status bar. sbrRaised – 2; the Panel appears to be raised above the status bar.

The AutoSize property determines how a panel will resize itself when its container (usually a form) is resized by the user. Here are the settings for the AutoSize property:

sbrNoAutoSize – 0; None. No autosizing occurs. The width of the panel is always and exactly that specified by the Width property.

sbrSpring – 1; Spring. When the parent form resizes and there is extra space available, all panels with this setting divide the space and grow accordingly.

sbrContents – 2; Content. The panel is resized to fit its contents.

The Alignment property indicates how the text or image in a panel will align in the panel. The settings for the Alignment property are as follows:

sbrLeft – 0; text appears left-justified and to the right of any bitmap. sbrCenter – 1; text appears centered and to the right of any bitmap. sbrRight – 2; text appears right-justified but to the left of any bitmap.

DISPLAYING IMAGES IN A STATUS BAR

A status bar has a Picture property. To place an image in a status bar panel at design time, follow these steps:

1. Right-click the status bar, and select the Properties item in the menu that appears.2. Click the Panels tab in the property pages that open.3. Select the panel you want to work with.4. Set the panel’s Picture property by clicking the Browse button in the box labeled Picture.5. Close the property pages by clicking on OK.


45


5

The ListView control displays lists of items. Each item in a ListView control is itself a ListItem object and can have both text and an image associated with it. The ListItem objects are stored in the ListView’s ListItems collection.

ListView can display data in four different view modes:

Icon mode – can be manipulated with the mouse, allowing the user to drag and drop and rearrange objects.

SmallIcon mode – allows more ListItem objects to be viewed. Like the Icon view mode, objects can be rearranged by the user.

List mode – presents a sorted view of the ListItem objects. Report mode – presents a sorted view, with sub-items, allowing extra information to be

displayed.

ADDING A LISTVIEW TO A FORM

1. Select the Project >> Components menu item.2. Click the Controls tab in the Components dialog box that opens.3. Select the Microsoft Windows Common Controls 6.0 item.4. Click on OK to close the Components dialog box.5. Add the ListView control by clicking its icon in the toolbox and drawing it on the form.6. Set the ListView’s properties, and add the code you want.

After the list view is in your program, it’s up to you to add items, images, and select what kind of view you want.

ADDING ITEMS TO A LISTVIEW

You add items to a ListView’s ListItems collection, using its Add method. Each item you add is a ListItem object. Consider the following example which adds three items to a list view control:

Private Sub Form_Load() Dim ListItem1 As ListItem Set ListItem1 = ListView1.ListItems.Add() ListItem1.Text = “Item 1”

Dim ListItem2 As ListItem Set ListItem2 = ListView1.ListItems.Add() ListItem2.Text = “Item 2”

Dim ListItem3 As ListItem Set ListItem3 = ListView1.ListItems.Add() ListItem3.Text = “Item 3”End Sub

Finally, set the ListView control’s View property to lvwList and run the program to see the result.

ADDING ICON TO A LISTVIEW ITEMS

Each item in a list view is a ListItem object, and each such object has an Icon property. You set this property to an image’s index or key in an image list control.


46

Working with ListView


5To use icon for an item in a list view, you have to connect the list view control to an Image List containing the icon. To do this, right-click the list view at design time, and select the Properties item in the menu that appears. Click the Image List tab in the property pages, and select ImageList1 (or any name you assign to an Image List control) in the box labeled Normal, then click on OK to close the property pages.

Now we can add the image in the image list to the items in a list view, using their Icon property like this:

Private Sub Form_Load() Dim ListItem1 As ListItem Set ListItem1 = ListView1.ListItems.Add() ListItem1.Text = “Item 1” ListItem1.Icon = 1

Dim ListItem2 As ListItem Set ListItem2 = ListView1.ListItems.Add() ListItem2.Text = “Item 2” ListItem2.Icon = 2

Dim ListItems3 As ListItem Set ListItem3 = ListView1.ListItems.Add() ListItem3.Text = “Item 3” ListItem3.Icon = 3End Sub

Finally, set the ListView’s View property to lvwIcon and run the program.

ADDING SMALL ICONS TO LISTVIEW ITEMS

You usually use two icons for each item in a list view, a normal icon and a small icon. Each set of icons is stored in its own image list control, so we add a new image list control, ImageList2, to a program to hold small icons (we’ll use ImageList1 to store the large icons and the actual list view control will be ListView1). To connect the image list with the list view, right-click the list view at design time, and select the Properties item in the menu that appears. Click the Image List tab in the property pages, and select ImageList2 in the box labeled Small, then click OK to close the property pages.

To add the image we’ve stored as the small icon of all the list items:

Private Sub Form_Load() Dim ListItem1 As ListItem Set ListItem1 = ListView1.ListItems.Add() ListItem1.Text = “Item 1” ListItem1.Icon = 1 ListItem1.SmallIcon = 1

Dim ListItem2 As ListItem Set ListItem2 = ListView1.ListItems.Add() ListItem2.Text = “Item 2” ListItem2.Icon = 2 ListItem2.SmallIcon = 2

Dim ListItems3 As ListItem Set ListItem3 = ListView1.ListItems.Add() ListItem3.Text = “Item 3” ListItem3.Icon = 3


47


5 ListItem3.SmallIcon = 3End Sub

Finally, set the ListView’s View property to lvwSmallIcon and run the program.

ADDING COLUMN HEADERS TO A LISTVIEW

ListView can display lists arranged in columns when you set their View property to lvwReport.

To add columns to a list view, you just need to add column headers, and you do that with the list view’s ColumnHeaders collection. Consider the example below which will contain two columns for a ListView1:

Private Sub Form_Load()

ListView1.ColumnHeaders.Add(1) ListView1.ColumnHeaders(1).Text = “LAST NAME” ListView1.ColumnHeaders(1).Width = ListView1.Width / 2 ListView1.ColumnHeaders(1).Icon = 1

ListView1.ColumnHeaders.Add (2) ListView1.ColumnHeaders(2).Text = “MIDDLE NAME” ListView1.ColumnHeaders(2).Width = ListView1.Width / 2 ListView1.ColumnHeaders(2).Icon = 1End Sub

ADDING COLUMN FIELDS and SUB ITEMS TO A LISTVIEW

You use the ListSubItems collection’s Add method to add column text to an item. Each ListItem object has a ListSubItems collection, and here’s how you use that collection’s Add method:

ListSubItems.Add [index],[key],[text],[reporticon],[tooltiptext]

For example:

Private Sub Form_Load() ListView1.ColumnHeaders.Add(1) ListView1.ColumnHeaders(1).Text = “LAST NAME” ListView1.ColumnHeaders(1).Width = ListView1.Width / 2

ListView1.ColumnHeaders.Add (2) ListView1.ColumnHeaders(2).Text = “MIDDLE NAME” ListView1.ColumnHeaders(2).Width = ListView1.Width / 2

Dim ListItem1 As ListItem Set ListItem1 = ListView1.ListItems.Add() ListItem1.Text = “Smith” ListView1.ListItems(1).ListSubItems.Add , , “John”

Dim ListItem2 As ListItem Set ListItem2 = ListView1.ListItems.Add() ListItem2.Text = “Doe” ListView1.ListItems(2).ListSubItems.Add , , “Jane”End Sub

Finally, set the ListView’s View property to lvwReport and run the program.


48


5HANDLING LIST VIEW ITEM CLICKS

When the user clicks an item in a list view, the control generates an ItemClick event:

Private Sub ListView1_ItemClick(ByVal Item As MSComctLib.ListItem)

End Sub

The item that was clicked is passed to us as the argument named Item, and you can access its Index or Key properties to determine which item it is. As an example, here we display the item’s index in a Message Box when the user clicks it:

Private Sub ListView1_ItemClick(ByVal Item As MSComctLib.ListItem) MsgBox “You clicked item: “ & Item.IndexEnd Sub

HANDLING LIST VIEW COLUMN HEADER CLICKS

The List View control generates a ColumnClick event when a Column Header is clicked:

Private Sub ListView1_ColumnClick(ByVal ColumnHeader As MSComctLib.ColumnHeader)

End Sub

The column header the user clicked is passed to us as the ColumnHeader argument, and you can determine which column header was clicked with its Index property. As an example, we will sort List View items in a column when a certain Column Header is clicked using the Select - Case Statement:

Private Sub ListView1_ColumnClick(ByVal ColumnHeader As MSComctLib.ColumnHeader) Select Case ColumnHeader.Index Case 1

ListView1.Sorted = True ListView1.SortKey = 0 ListView1.SortOrder = lvwAscending

Case 2 ListView1.Sorted = True ListView1.SortKey = 1 ListView1.SortOrder = lvwAscending

End SelectEnd Sub


49

LESSON 5 - Advanced Visual Basic Controls

Documents

Transcript of LESSON 5 - Advanced Visual Basic Controls