LESSON 5 - Advanced Visual Basic Controls
LESSON 5 - Advanced Visual Basic Controls
5
Working with MonthView Control and DateTimePicker
Control
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.
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.
You can also extract the Month, Day, and Year by using the MonthView’s Month, Day, and Year
properties as in the following example.
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:
The DateTimePicker control also contains Month, Day, and Year properties just like the MonthView
control.
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.
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.
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.
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.
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.
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.ClientHeight
End 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.
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
Information and Communication Technology Department 38
Palompon Institute of Technology
ADVANCED VISUAL BASIC CONTROLS
5
example, 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):
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:
• 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.
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.
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.
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.
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.
The 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.
In addition to these three key properties, you can set several other properties for each button on the toolbar
as shown below.
To make toolbar buttons active, you do that with the toolbar control’s ButtonClick event:
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.
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.
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
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.
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:
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:
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.
Information and Communication Technology Department 45
Palompon Institute of Technology
ADVANCED VISUAL BASIC CONTROLS
5
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.
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.
• 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.
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.
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:
Finally, set the ListView control’s View property to lvwList and run the program to see the result.
To 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:
Finally, set the ListView’s View property to lvwIcon and run the program.
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:
Finally, set the ListView’s View property to lvwSmallIcon and run the program.
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:
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 = 1
End Sub
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:
When the user clicks an item in a list view, the control generates an ItemClick event:
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:
The List View control generates a ColumnClick event when a Column Header is clicked:
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: