Introduction
Hans Dietrich 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:
Dim g as Graphics = Button1.CreateGraphics
If you want to draw lines or shapes, a Pen
class is needed:
Dim myPen as new Pen(Color.Red)
Then you can draw lines and shapes:
g.DrawLine(myPen, 1, 1, 45, 65)
g.DrawBezier(myPen, 15, 15, 30, 30, 45, 30, 87, 20)
g.DrawEllipse(myPen, New Rectangle(33, 45, 40, 50))
g.DrawPolygon(myPen, New PointF() {New PointF(1, 1), _
New PointF (20, 10), New PointF(5, 4), New PointF(100, 2), _
New PointF(200, 50), New PointF(39, 45)})
To fill a specific area, a Brush
object is needed:
Dim myBrush as New SolidBrush(Color.Red)
In fact, several different brushes exist in GDI+, as listed below:
Brush class
|
Description
|
SolidBrush
|
Pure color
|
HatchBrush
|
Similar to SolidBrush but you could select the color you want from preset colors
|
TextureBrush
|
Use texture (i.e. picture)
|
LinearGradientBrush
|
Gradient
|
PathGradientBrush
|
Complex gradient
|
The ones we uses in our project are SolidBrush
, LinearGradientBrush
, and PathGradientBrush
.
If you want to show an image, an Image
object must be created and instantiated. For example:
Dim myBitmap as New Bitmap(System.Environment.GetFolderPath _
(System.Environment.SpecialFolder.MyPictures))
Then you can load this image to the Graphics
object in a specific location:
g.DrawImage(myBitmap, 1, 1)
Don't forget to free memory after using the Graphics
and Image
objects:
g.Dispose()
myBitmap.Dispose()
Please refer to GDI+ references in MSDN for details.
Nomenclature
The following image shows the components and nomenclature of a Cool Scrollbar:
Drawing Cool Scrollbar
Before I started, a list of the member variables and their meanings should be made clear. In the class CBar
, I used the following member variables:
Private Const BitmapHeight As Byte = 12
Private Const BitmapWidth As Byte = 25
Private m_nMaxValue As Long = 100
Private m_nMinValue As Long = 0
Private m_nValue As Long = 0
Private m_nRealValue As Long = 0
Private m_imgLeftImage As Bitmap
Private m_imgRightImage As Bitmap
Private m_fThumbLeft As Single = 26.0F
Private m_bMouseOnThumb As Boolean = False
Private m_bMouseDown As Boolean = False
Private m_bArrowClicked As Boolean
Private m_cBorderColor As Color = Color.White
Private m_cRightChannelBeginColor As Color = Color.Honeydew
Private m_cRightChannelEndColor As Color = Color.Gray
Private m_cLeftChannelBeginColor As Color = Color.Green
Private m_cLeftChannelEndColor As Color = Color.White
Private m_cThumbFillColor As Color = Color.Blue
Private m_cThumbRectColor As Color = Color.LightYellow
Private m_BarLayout As BarLayout = BarLayout.Horizontal
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.
Dim gTrack As Graphics = Me.CreateGraphics
gTrack.DrawRectangle(New Pen(m_cBorderColor), _
0, 0, Me.Width - 1, Me.Height - 1)
gTrack.DrawImage(m_imgLeftImage, 1, 1)
gTrack.DrawImage(m_imgRightImage, Me.Width - BitmapWidth - 1, 1)
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:
Dim rightBrush As New Drawing2D.LinearGradientBrush(ClientRectangle,_
m_cRightChannelBeginColor, m_cRightChannelEndColor, _
Drawing2D.LinearGradientMode.Vertical)
Dim leftBrush As New Drawing2D.LinearGradientBrush(ClientRectangle, _
m_cLeftChannelBeginColor,_ m_cLeftChannelEndColor, _
Drawing2D.LinearGradientMode.BackwardDiagonal)
There are two points that must be kept in mind when drawing the channels:
- you shouldn't fill the track border;
- both channels exclude the arrows, so the arrow area should not be overlaid.
Consequently, the rectangle area of each channel is defined as below:
Dim fTmpRightChannelWidth As Single
Dim LeftChannel As Rectangle = _
New Rectangle(BitmapWidth + 1, 2, 0, BitmapHeight - 2), _
RightChannel As RectangleF
LeftChannel.Width = CalValue() - BitmapWidth + BitmapHeight / 2
If LeftChannel.Width <= 0 Then
LeftChannel.Width = BitmapHeight / 2
fTmpRightChannelWidth = Me.Width - BitmapWidth * 2 - 2
RightChannel = New RectangleF(BitmapWidth + 1, 1, _
fTmpRightChannelWidth, BitmapHeight)
Private Function CalValue() As Single
Return BitmapWidth + 1 + (Me.Width - BitmapWidth * 3 - 2) _
* m_nValue / (m_nMaxValue - m_nMinValue)
End Function
Next, fill in the corresponding area using the brush defined above:
gTrack.FillRectangle(rightBrush, RightChannel)
gTrack.FillRectangle(leftBrush, LeftChannel)
gTrack.DrawRectangle(New Pen(Color.Gray), LeftChannel.X, LeftChannel.Y, _
LeftChannel.Width, LeftChannel.Height - 1)
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.
Dim gThumb As Graphics = Me.CreateGraphics
Dim linePen As New Pen(Color.Gray, 1)
Dim fX(3) As Single
fX(0) = CalValue()
If (m_BarLayout = BarLayout.Horizontal) Then
fX(1) = fX(0) + BitmapHeight / 2
fX(2) = fX(1) + (BitmapWidth - BitmapHeight) / 2
Else
fX(1) = fX(0) + BitmapWidth / 2
fX(2) = fX(1) + (BitmapHeight - BitmapWidth) / 2
End If
Dim rectPath As New Drawing2D.GraphicsPath
If (m_BarLayout = BarLayout.Horizontal) Then
Dim rect2Fill As New RectangleF(fX(1), 1.0F, _
BitmapWidth - BitmapHeight, BitmapHeight)
Dim rect2Fill As New RectangleF(fX(1), 1.0F, fX(2)_
- fX(0), BitmapHeight)
rectPath.AddArc(fX(0), 0.3F, BitmapHeight, _
BitmapHeight, 90, 180)
rectPath.AddRectangle(rect2Fill)
rectPath.AddArc(fX(2), 0.3F, BitmapHeight, _
BitmapHeight, 90, -180)
Else
Dim rect2Fill As New RectangleF(1.0F, fX(2), _
BitmapWidth, 2 * fX(1) - fX(0) - fX(2))
rectPath.AddArc(0.3F, 2 * fX(1) - fX(0), _
BitmapWidth, BitmapWidth, 0, 180)
rectPath.AddRectangle(rect2Fill)
rectPath.AddArc(0.3F, fX(2) - fX(1) + fX(0), _
BitmapWidth, BitmapWidth, -180, 180)
End If
Dim rectBrush As New Drawing2D.PathGradientBrush(rectPath)
rectBrush.CenterColor = m_cThumbRectColor
Dim rectColors As Color() = {m_cThumbFillColor, _
m_cThumbFillColor, m_cThumbFillColor, m_cThumbFillColor}
rectBrush.SurroundColors = rectColors
If (m_BarLayout = BarLayout.Horizontal) Then
gThumb.DrawArc(linePen, fX(0), 1.0F, _
BitmapHeight, BitmapHeight - 1, 90, 180)
gThumb.DrawArc(linePen, fX(2), 1.0F, _
BitmapHeight, BitmapHeight - 1, -90, 180)
Else
gThumb.DrawArc(linePen, 1.0F, 2 * fX(1) - fX(0), _
BitmapWidth, BitmapWidth - 1, 0, 180)
gThumb.DrawArc(linePen, 1.0F, fX(2) - fX(1) + fX(0), _
BitmapWidth, BitmapWidth - 1, 0, -180)
End If
gThumb.FillPath(rectBrush, rectPath)
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.
History
Version 0.1 - October 12, 2004
Version 0.2 - April 25, 2005
- Add vertical version of the scrollbar.
- Update the thumb drawing method.