Global Components

HOME

DOWNLOADS

ORDER ONLINE

CONTACT US

OVERVIEW

DOWNLOAD

ORDER ONLINE

KNOWLEDGE
BASE

How to create a list of check boxes

Once you have begun to experiment with SBList you will come up with new and imaginative ways of using it - one of the first may well be creating a list of check boxes. Standard check boxes are very useful in situations where you will always have the same number of options, but there are situations where you simply don't know how many you might need.

For example, suppose you wanted to display a list of users and tick the ones which had administrator privileges. There could be 5 or 500 users; you have no way of knowing. You could create a control array of check boxes and load as many new check boxes as required, but you may end up needing a huge form just to show them all! A far easier solution is to use an SBList to simulate an array of check boxes.

This is how your list might appear. Each entry in the list looks like a normal check box and will act like a normal check box when clicked, but there is virtually no limit to the number of boxes you can display.

For this demonstration you will need to draw a form which has a single SBList on it. Set the ItemHeight property of the list to 15, set the BackColor to light-grey, and set the TextLeft property to 18. You will also need a control array of two Image controls - Image1(0) will hold the un-ticked box, Image1(1) will hold the ticked box (shown below).

We will be using the ItemData property of each list item to hold the ticked status - true or false.

1. Insert the following code into your Form_Load event:

For A% = 1 To 10
  SBList1.AddPacket -1, "Item " & A%, "", , Image1(0).Picture
Next A%

This will place 10 items in the list, all with empty tick boxes. The ItemData parameter is not specified in the AddPacket statement, and so the default value of 0 is used. This is fine for us, because 0 (or False) indicates an empty tick box.

2. Insert the following code into your SBList1_DblClick event:

With SBList1
  NewSetting% = Not .ItemData(.ListIndex)
  Set .ItemPicture(.ListIndex) = Image1(-NewSetting%).Picture
  .ItemData(.ListIndex) = NewSetting%
End With

On the first line we toggle the ItemData value for the list item which has been double-clicked. We then change the image in the list to reflect the new setting. Finally, we write the toggle value back to the ItemData property.

3. Insert the following code into your SBList1_Click event:

If X <> -1 and Y <> -1 then SBList1_DblClick 1

Here we test whether the bitmap itself has been clicked, and if it has we react as though a double-click had taken place. The SBList Click event returns the X,Y position of the cursor if it is clicked on the bitmap element of a list item, and it returns -1 for both values if the bitmap element of the line was not clicked.

This bit of code is optional, depending on whether you feel it is logical or not. The idea behind it is that in order to change the tick mark the user must either double-click the text of the list item, or single-click the bitmap part of the list item.

You can't use the normal Click event to toggle the tick mark, otherwise it would change state whenever you select any list item with just a normal click, which is why we have used double-click in the example.

To give you another idea of what is possible, below is a screen-shot of an SBList as it is used in one of my programs for choosing which machines on a network can have access to a particular file. I've used the HighLeft property to prevent the highlight bar from intruding onto the image, and also various tab and font settings to enhance the layout of the information which the list is displaying.

Tweaks

There are a couple of ways in which you can tweak this routine depending on how much like a list of check boxes you want your list to appear. For example:

You can set the HighForeColor and HighBackColor properties to the same colours as the ForeColor and BackColor properties so that the highlight bar does not show up.

You can set the list Border style to False so that there is no obvious outline to the list.

You can set the HighLeft property to specify an indent from the left-hand side of the list where the highlight bar begins.

Those who seek perfection will have noticed that the list's BackColor has to be set to light grey in order for this example to appear correctly. To avoid this limitation you can use an ImageList control to hold the ticked and unticked images and then mask them against the default background color of the list.

Topic devised by Andy Groom.