Image of Navigational Map linked to Home / Contents / Search An Outlook-style Toolbar

by Stephan Grieger - GUI Computing
Image of Line Break

In the last edition of the AVDF I talked about how to create the nice border that Outlook does when you move your mouse over an icon. I made a point of mentioning that I hadn't bothered to code for multiple pages.

As I needed to write the code for an actual application and not simply because I could, I immediately ran out of room on the toolbar as I started adding icons. The solution was to either scrap the idea and go with a new one or to go the extra distance and complete the Outlook bar.

For those of you that use Outlook as their mail client, you will no doubt know to what I am referring to. For those that don't here's a quick run down.

Outlook's vertical tool bar is dynamic in that you can add icons to it and remove them again at will. Obviously, if you add more than a certain number of icons to the bar you are going to run out of room and you will need to employ the use of scrollbars.

However, having to scroll down a list of icons each time you want to access a certain application would take some time and would defeat the purpose of having the bar there in the first place.

Outlook skirts around the problem by using what it refers to as groups. Each icon is contained within a group. Each group is represented on the toolbar in the form of a button. Clicking on the button will make the group visible thus exposing the icons within.

Now I know this doesn't sound very impressive but Outlook animates the whole thing by sliding the groups up and down the toolbar as you click on various groups.

The sample I have included with this article does not have the code to add more icons and groups. Nor does it contain the code to place the groups at the bottom of the toolbar when the toolbar resizes.

There's a reason for not being able to add groups and it will be explained further on... of course, the fact that I haven't written the code for it at the time of this article also has some bearing! I might include it in the next edition or you can simply do it yourself seeing as you only need to move a few controls on resize.

There are several approaches you can take. The first is probably to have buttons in the tool bar that move up and down when clicked. This poses two immediate problems. The first is that when you click on the button, you need to move the button, as well as any icons for its group. The second is that when you click on the button, you get a focus box. Clicking on the Outlook button does not give you a focus box. Petty I know, but there you go.

The solution I came up with, while easily not the best, is the easiest in my opinion. I have no need to add groups or icons at run time. Therefore, I could substitute the button for a picture of a button in a picture box. This would eliminate the focus box.

However, I still need to move a host of controls up and down on click which would be slow. The solution was to place the picture button in another picture box and the icons within the same parent. That way I need move only the parents and not the icons.

Hmmm, suppose I made the parent picture box's picture property as the button itself. That way I could also eliminate the picture box containing the button.

Now you see why the code provided can't add groups.

The next problem was that as you tried to move more and more groups at the same time, the code does slow down quite a bit. The code provided accommodates for that by setting the increments to move the parents according to how many groups you are moving. This ensures a nice smooth transition between groups at a fairly constant rate.

I've included the code in the downloadable ZIP. Enjoy!

Written by: Stephen Grieger
October '97

Image of Arrow linked to Previous Article
Image of Line Break