Click here to Skip to main content
11,928,352 members (50,004 online)
Click here to Skip to main content
Add your own
alternative version


62 bookmarked

Custom Drawn Scrollbar

, 28 Aug 2009 CPOL
Rate this:
Please Sign up or sign in to vote.
An article about creating a custom scrollbar control


I was working (in my free time) on a calendar control which looks similar to the one in Outlook 2007 and I encountered, among other problems, that the standard scrollbar doesn't fit nicely with the look of my calendar control. So I searched the Web and CodeProject for custom drawn scrollbars.

Among others, I found the article from Greg Ellis. Although it pointed me in the right direction, I missed some things the system scrollbar is capable of. As a last resort, I searched in the help of Visual Studio and found a simple example of a custom drawn scrollbar which I took as a starting point.

Some Remarks

This control is mostly useful for developers who build their own custom drawn controls and need a scrollbar.

The scrollbar has one major shortcoming - the width is fixed. I didn't need this feature and the drawing would be more complex, so I left it out.
Because I used collection initializers, the project builds only with a C# 3.0 compiler and upwards, but that can easily be fixed.
To enable the scrollbar to scroll when pressing and holding the mouse button, I used a timer - didn't find another way.
The drawing is realized with GDI+ (in a separate renderer class) with two exceptions: the little arrow in the arrow buttons and the grip in the thumb are images - there, shame on me, I was a bit lazy.

Layout of the Control

As it is said, a picture says more than thousand words, here is a diagram with the essential classes: 

Please note that the property Opacity sets the opacity of the context menu, not of the control itself.
I left out the control designer class because it's not really necessary, only when using Visual Studio. 

Let's Start 

When drawing a control from scratch, it's necessary to override the OnPaint method and also, in my humble opinion, to set some control styles in the constructor:

public ScrollBarEx()
   // sets the control styles of the control
     ControlStyles.OptimizedDoubleBuffer | ControlStyles.ResizeRedraw
     | ControlStyles.Selectable | ControlStyles.AllPaintingInWmPaint
     | ControlStyles.UserPaint, true);


After that, some thoughts have to go to the logic of the control, among them methods to calculate the thumb size and position.
As an example, here is the method that calculates the thumb size: 

private int GetThumbSize()
    // get the size of the track the thumb can occupy
    int trackSize =
       this.orientation == ScrollBarOrientation.Vertical ?
       this.Height - (2 * this.arrowHeight) : this.Width - (2 * this.arrowWidth);

    if (this.maximum == 0 || this.largeChange == 0)
       return trackSize;

    float newThumbSize = ((float)this.largeChange * (float)trackSize) /

    return Convert.ToInt32(Math.Min((float)trackSize, Math.Max(newThumbSize, 10f)));

The second step was to think about mouse handling, so one needs to override the OnMouseDown, OnMouseUp and OnMouseMove methods to interact with the mouse.

There are three main areas where mouse handling is done:

  • arrow buttons
  • thumb
  • track above and under the thumb

As an addition, I've also overridden OnMouseEnter and OnMouseLeave to get a visual indication whether the mouse is over the scrollbar or not.

The third step was the interaction with the keyboard and can be done in several ways - one way is to override the ProcessDialogKey method which captures also the arrow keys that will be needed to navigate the scrollbar.

The last step was to implement the drawing functionality which I put in a renderer class to separate logic and drawing of the control.

To prevent the painting but still be able to update the scrollbar, two methods were added to the control: 

  • BeginUpdate
  • EndUpdate

These methods send a message via the SendMessage API switching the painting on or off.

Some Last Words

This is my first article here on CodeProject (or elsewhere), so please bear with me. I know this isn't a very good article, but I hope with time and experience future articles will be better. Feel free to point out what I should have done better.


  • 28th August, 2009: Initial post


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


About the Author

Thomas Duwe
Germany Germany
No Biography provided

You may also be interested in...

Comments and Discussions

Bugsource and demo code is down Pin
Sebastian.Lange.Net8-Jan-15 20:43
memberSebastian.Lange.Net8-Jan-15 20:43 
QuestionWhy did you not use inheritation? Pin
multitasker22-Oct-14 23:26
membermultitasker22-Oct-14 23:26 
GeneralMy vote of 5 Pin
Wonderwhy113-Oct-12 3:19
memberWonderwhy113-Oct-12 3:19 
AnswerRe: My vote of 5 Pin
Thomas Duwe14-Oct-12 22:36
memberThomas Duwe14-Oct-12 22:36 
GeneralMy vote of 5 Pin
Tinhiuvanoinho23-Jul-11 7:16
memberTinhiuvanoinho23-Jul-11 7:16 
GeneralRe: My vote of 5 Pin
Thomas Duwe26-Aug-11 0:04
memberThomas Duwe26-Aug-11 0:04 
GeneralAttaching the scrollbar to panel Pin
roopan18-Dec-09 5:05
memberroopan18-Dec-09 5:05 
GeneralRe: Attaching the scrollbar to panel Pin
Thomas Duwe19-Dec-09 16:51
memberThomas Duwe19-Dec-09 16:51 
GeneralRe: Attaching the scrollbar to panel Pin
roopan19-Dec-09 19:30
memberroopan19-Dec-09 19:30 
GeneralRe: Attaching the scrollbar to panel Pin
Thomas Duwe29-Dec-09 6:14
memberThomas Duwe29-Dec-09 6:14 
GeneralGreat job 5! Pin
V# Guy31-Aug-09 17:11
memberV# Guy31-Aug-09 17:11 
GeneralRe: Great job 5! Pin
Thomas Duwe1-Sep-09 23:14
memberThomas Duwe1-Sep-09 23:14 
GeneralThanks Pin
Paul Selormey28-Aug-09 17:16
memberPaul Selormey28-Aug-09 17:16 
GeneralRe: Thanks Pin
Thomas Duwe28-Aug-09 18:28
memberThomas Duwe28-Aug-09 18:28 
GeneralCool - Voted 5 Pin
Ant210028-Aug-09 9:18
memberAnt210028-Aug-09 9:18 
GeneralRe: Cool - Voted 5 Pin
Thomas Duwe28-Aug-09 14:51
memberThomas Duwe28-Aug-09 14:51 
GeneralRe: Cool - Voted 5 Pin
Ant210029-Aug-09 1:13
memberAnt210029-Aug-09 1:13 
GeneralRe: Cool - Voted 5 Pin
qingpoqiu1-May-13 17:59
memberqingpoqiu1-May-13 17:59 

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.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.151126.1 | Last Updated 28 Aug 2009
Article Copyright 2009 by Thomas Duwe
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid