Click here to Skip to main content
15,860,972 members
Articles / Multimedia / GDI+

Cool Scrollbar - Scrollbar like Windows Media Player's

Rate me:
Please Sign up or sign in to vote.
4.15/5 (28 votes)
3 May 2005CPOL6 min read 258.7K   2.8K   47   30
A cool scrollbar control.

Image 1

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:

  1. GDI+ expands the functions of GDI by means of providing new functions (i.e., gradient brush and alpha blending).
  2. 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:

VB
Dim g as Graphics = Button1.CreateGraphics

If you want to draw lines or shapes, a Pen class is needed:

VB
Dim myPen as new Pen(Color.Red)

Then you can draw lines and shapes:

VB
g.DrawLine(myPen, 1, 1, 45, 65) 'draw line
g.DrawBezier(myPen, 15, 15, 30, 30, 45, 30, 87, 20)  'draw Bezier curve
g.DrawEllipse(myPen, New Rectangle(33, 45, 40, 50))  'draw ellipse
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)})  'draw polygon

To fill a specific area, a Brush object is needed:

VB
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:

VB
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:

VB
g.DrawImage(myBitmap, 1, 1)

Don't forget to free memory after using the Graphics and Image objects:

VB
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:

Image 2

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:

VB
'height of the arrow bitmap
Private Const BitmapHeight As Byte = 12
'width of the arrow bitmap
Private Const BitmapWidth As Byte = 25

'max possible value of the scrollbar
Private m_nMaxValue As Long = 100
'min possible value of the scrollbar
Private m_nMinValue As Long = 0
'absolute value of the scrollbar
Private m_nValue As Long = 0
'value of the scrollbar
Private m_nRealValue As Long = 0

'left arrow image
Private m_imgLeftImage As Bitmap
'right arrow image
Private m_imgRightImage As Bitmap

'left value of Thumbleft
Private m_fThumbLeft As Single = 26.0F
'flag to indicate if mouse is hover the thumb
Private m_bMouseOnThumb As Boolean = False
' flag to indicate whether left mouse button pushed
Private m_bMouseDown As Boolean = False

'which button is clicked: Left-True; Right-False
Private m_bArrowClicked As Boolean

'''color properties
'Border color
Private m_cBorderColor As Color = Color.White
'right track begin color
Private m_cRightChannelBeginColor As Color = Color.Honeydew
'right track end color
Private m_cRightChannelEndColor As Color = Color.Gray
'left track begin color
Private m_cLeftChannelBeginColor As Color = Color.Green
'left track end color
Private m_cLeftChannelEndColor As Color = Color.White
'thumb's fill color(the left and right Half eclipse's color)
Private m_cThumbFillColor As Color = Color.Blue
'center color of the thumb
Private m_cThumbRectColor As Color = Color.LightYellow
'''end color properties

'layout, horizontal or vertical
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.

VB
Dim gTrack As Graphics = Me.CreateGraphics
'draw track border
gTrack.DrawRectangle(New Pen(m_cBorderColor), _
  0, 0, Me.Width - 1, Me.Height - 1)

'draw arrow to each side of the track
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:

VB
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:

  1. you shouldn't fill the track border;
  2. both channels exclude the arrows, so the arrow area should not be overlaid.

Consequently, the rectangle area of each channel is defined as below:

VB
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)
VB
'The function CalValue() returns the current
' thumb's left edge's x-coordinate.
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:

VB
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.

VB
Dim gThumb As Graphics = Me.CreateGraphics
'pen to draw the edge of the area
Dim linePen As New Pen(Color.Gray, 1)
Dim fX(3) As Single

'initialize edge values--------------------------------------
fX(0) = CalValue()
If (m_BarLayout = BarLayout.Horizontal) Then
    fX(1) = fX(0) + BitmapHeight / 2
    fX(2) = fX(1) + (BitmapWidth - BitmapHeight) / 2 '7
Else
    fX(1) = fX(0) + BitmapWidth / 2
    fX(2) = fX(1) + (BitmapHeight - BitmapWidth) / 2 '7
End If
'''----------------------------------------------------------

'define path and brushes
Dim rectPath As New Drawing2D.GraphicsPath
'path that will constitute the thumb area
If (m_BarLayout = BarLayout.Horizontal) Then
    Dim rect2Fill As New RectangleF(fX(1), 1.0F, _
        BitmapWidth - BitmapHeight, BitmapHeight)
        'center rectangle area of the thumb
    Dim rect2Fill As New RectangleF(fX(1), 1.0F, fX(2)_
       - fX(0), BitmapHeight)
       'center rectangle area of the thumb
    rectPath.AddArc(fX(0), 0.3F, BitmapHeight, _
                BitmapHeight, 90, 180) 'left pie
    rectPath.AddRectangle(rect2Fill) 'center
    rectPath.AddArc(fX(2), 0.3F, BitmapHeight, _
                BitmapHeight, 90, -180) 'right pie
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) 'upper pie
    rectPath.AddRectangle(rect2Fill) 'center
    rectPath.AddArc(0.3F, fX(2) - fX(1) + fX(0), _
            BitmapWidth, BitmapWidth, -180, 180) 'down pie
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

'draw the thumb
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:

Image 3

Image 4

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

  • Initial public release.

Version 0.2 - April 25, 2005

  • Add vertical version of the scrollbar.
  • Update the thumb drawing method.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Web Developer
United States United States
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.

Comments and Discussions

 
GeneralColored Scrollbar Pin
optimal-process.de7-Jun-10 8:08
optimal-process.de7-Jun-10 8:08 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.