Introduction

Hans Dietrich</a /> did a good job in creating a Windows Media Player like XScrollbar; however, for most Visual Basic programmers, it's a little bit inconvenient to use that expressly in Visual Basic, so I recently wrote a VB edition of Dietrich's XScrollbar – Cool Scrollbar, using GDI+ to draw everything. It currently has:

Optional color displayed on thumb, in channel, and on control border.

Hand cursor is displayed when mouse hovers over thumb.

Thumb color is changed to "hover color" when mouse hovers over thumb.

Clicking in channel moves thumb to that spot.

Left and right arrow buttons move thumb by one unit, and if kept pushed, the thumb would keep moving.

ValueChanged event is raised when value changes.

Both horizontal and vertical versions of the scrollbar.

This control is still in its infantile period and many things could be added to it. I would appreciate any advice to enhance its performance.

First things first

Some introduction to GDI+

GDI+ differs from GDI in two aspects:

GDI+ expands the functions of GDI by means of providing new functions (i.e., gradient brush and alpha blending).

GDI+ redefines programming model to make it easier and flexible for graphics programming.

GDI+ can be used to show images, draw custom shapes and lines, draw strings, and even image transformation. In our project, we use it to draw and fill shapes, and show images.

In order to use GDI+, a Graphics object must be created and instantiated. For instance:

Step 1: draw arrows and track border

As it might be a little complicated to draw arrow buttons and the user might want to customize the arrow picture, I use bitmaps as arrow picture and directly draw them onto each side of the control. Initially, I restricted the control's height to BitmapHeight+2 pixels, the arrow picture size is BitmapWidth * BitmapHeight (pixels). You can modify these values later. If the user doesn't specify a different picture, it will use the default arrows, the same as those in Dietrich's. For the track border, I draw a rectangle along the entire side of the control.

Step 2: draw channels

For both the channels, I use the LinearGradientBrush to fill in the area, which gives the entire control a 3D look. The user can customize the color of each channel through corresponding properties, which I will describe later. The left channel and right channel brush are defined like this:

Step 3: Draw thumb

Until very recently, I haven't figured out a good-looking style of the thumb, so the current result of the style of the thumb might look a bit ugly; however, the drawing process is almost the same.

The size of the thumb is the same as that of the arrow. Before drawing the thumb, you must first calculate the position of the thumb. This is done by the function CalValue(), as described earlier. The thumb area is composed of a pie area at each side and a rectangle area in the center. I use a GraphicsPath class to create such an area and use a PathGradientBrush to fill in the area.

Step 4: Add them together

Just do the jobs described in the first three steps every time the value of the scrollbar changes and the bar will appear like the one described at the beginning of the article.

Turn our scrollbar into a real Cool Scrollbar

Add overrides

Up to now, our scrollbar has its “face”, but is nothing more than a picture. In order to be a real scrollbar, first it should be able to be scrolled. With the help of bunches of override subs and functions inherited from the System.Windows.Forms.UserControl class, it is easy to realize this.

As described in the Nomenclature section, the scrollbar has three areas: the channels, the thumb and the arrow buttons. Thus when the mouse is clicked or moved in these areas, there should be different events. For more details, please refer to my code, this section is written as clear as possible so that you can understand it well.

Add properties

As for the properties, I currently enable the following:

Behavior

Value: the current value of the scrollbar (Long)

MinValue: minimum value of the scrollbar (Long)

MaxValue: maximum value of the scrollbar (Long)

Appearance

LeftArrow: left arrow image (Bitmap)

RightArrow: right arrow image (Bitmap)

LeftChannelBeginColor: begin color of the left channel brush (Color)

LeftChannelEndColor: end color of the left channel brush (Color)

RightChannelBeginColor: begin color of the right channel brush (Color)

RightChannelEndColor: end color of the right channel brush (Color)

ThumbFillColor: center color of the thumb area (Color)

ThumbRectColor: surrounding color of the thumb area (Color)

TrackBorderColor: color of the border of the track (Color)

ScrollbarLayout: the layout of the scrollbar, vertical or horizontal.

The way of enabling these properties is the same as the ordinary one, just remember to redraw the track every time the property value changes.

This is what they look like in a Windows application property window:

You can modify them as you like.

Add event

Currently the Cool Scrollbar only needs one event to function correctly: ValueChanged. Just raise this event each time the MouseUp event occurs.

Future enhancements

A more stylish thumb

Flexible size property

Optional tooltip text indicating the value of the scrollbar

More...

Acknowledgement

Thanks to Hans Dietrich for the idea of creating the XScrollBar, as well as the clear explanation of the drawing process.

Share

About the Author

Graduated from Wuhan University(EE), China in june 2004, I worked for Fiberhome Telecommunication Technologies, Co., LTD, WRI for one year, and now I am pursuing my graduate studies in Electrical Engineering. Basicly I wrote programs in my spare time.