Introduction

This is a fully drawn GDI+ custom scrollbar control class. All of its drawing methods are overrideable allowing developers to paint it however they choose.

Tutorial

Well, let me start off by mentioning why I wrote this class. I wrote this class because I read somewhere that you could custom draw the Windows scrollbar in .NET. Well, from that article, I tried to capture the wndproc() messages for custom drawing. But as I soon found out after tweaking the code several times over, Windows paints the scrollbar all over the place in different methods, making it impossible to custom draw due to flickering. I was so mad because I had spent so much time trying to make it work. So, I decided to start all over anew. I made my own custom control all from scratch.

All though very time consuming, I learned a lot of things about the Windows scrollbar class and how it works, from the links below:

Scrollbars seem to be one of those things Microsoft doesn't like to share with their source code. The articles above stated information about basic knowledge of how to use the scrollbars. They were lacking in depth information about how the scrollbars are calculated. Not only did they forget to explain how they are calculated, but they did not mention how to get size and location information from the thumb, shaft, buttons, etc. This information is not public information because Microsoft doesn't want you fooling around with it.

In my tutorial below, I will explain everything you want to know about scrollbars and more. Besides that, you will learn how to make a fully custom drawn control with event mapping.

Part 1 - Drawing your Fake Controls

Let's jump right into it. To make a custom control, you start off by inheriting the System.Windows.Forms.UserControl class. This class holds all the basic properties for your control. It's kinda like a basic starter template control for all you newbies out there. :) I started off building my control making the fun stuff first, the graphic design of it all!

There are two ways to design a custom control. One way is by using other pre-built MS controls to make a Composite control. This is a very effective way to get the job done fast. Although it is very fast to create, it may be very slow on load time, and eats up a lot of resources. Besides that, there are many things to the engine that can go wrong considering you are using other controls. You also cannot fix errors in pre-built controls, and you are limited to their design and functionality.

The second way is design by custom draw. This type of design takes forever, hehe. Although, the benefits are outstanding. To custom draw in .NET, you must import the System.Drawing classes. These classes give you full drawing capabilities inside your control. Custom drawing is called GDI+ in .NET. You can draw everything from circles, rectangles, fonts, lines, etc.

For my scrollbar class, I decided to pick the second way of design by drawing everything. My first method Draw() starts off by defining my sizes and locations of where I want everything to be. Keep in mind that none of the drawings are really controls. You have to keep track of all of their information like height, width, top, left and name. To do this, the best way is to create a class that stores all of the information and makes an array out of it. Below is the simple way to make this type class:

The method above is very simple. We first re-declare the array sizes. We then start making our fake controls.

Main User Control

Thumb Control

Shaft Control Above Thumb

Shaft Control Below Thumb

Scroll Arrow Button Up

Scroll Arrow Button Down

We then set all of our fake properties, storing them in our controlinfo class. Last but not least, each fake control has its own drawing method. All of these drawing methods are overrideable, allowing for easy custom draw. They also do not leave you in the dark, because they pass several parameters to you. These parameters consist of location, size, and event type. Let's take a look at what one of the drawing methods looks like. This drawing method is Draw_Arrow_Up(). It draws the scroll arrow button up.

For all you people not familiar with drawing with GDI+, I start off by creating a variable to hold my graphics that I am going to paint. I set its smoothingmode to none to get a crisp look. There are many other modes in that enumeration to choose from, like highquality, which will try to blend your graphics. Next, I use a Case statement to figure out which event has occurred, so I can paint my graphics to that event. I use some basic GDI+ drawing methods like FillRectangle which makes solid rectangles, DrawRectangle which makes outlines of rectangles, and DrawLine which makes lines from one point to another. I then finish off by setting all of the fake properties in my controlinfo class once again. You may ask why twice? Well, that's how we can use this method more than once, from more than one place. The rest of the fake control drawing methods are very similar. They are easy to override if you want to make scrollbars that look fancy, or like XP style, or whatever you choose, it's up to you.

Part 2 - Making Fake Events for Your Fake Controls

How to make fake events? Well, to start out, the inherited usercontrol class lets you override its main events. This will give you a starting point. Knowing what events occurred is half the battle, the hard part is figuring out where the event occurred in relation to the location of your fake control. Since you have stored your fake control properties in your controlinfo class, figuring out if the event happened over your fake control is easy. Below are two methods to show you how this is done:

The first method CursorPOS() checks to see what fake control the event occurred over. It then returns its array ID. With the ID, you can then draw the new control and set its new properties. The second method OnMouseMove() does this. It finds out if the mouse moved over the fake control, then calls its drawing method to repaint it, which can be a nice looking highlight effect for mouseover like below:

In this example, the thumb is highlighted from the mouseover.

Part 3 - Sizing Fake Scrollbar Controls

This section is the part that Microsoft doesn't want to give away their secrets. They are the calculating methods for sizing the thumb and scrolling range. To calculate the thumb size is very simple.

First, we check to make sure properties are set by user in designmode. Then we calculate the thumb height. The equation is below:

ThumbHeight = ShaftHeight / (Maximum / LargeChange)

Easy you say? Yes, seems easy enough. We then need to check to see how big the thumb is. If the thumb is smaller than 10 in height, we wouldn't be able to click on it, so we make sure it is a minimum height of 10. If it is greater than 10, we return it as is.

Below is an example of the control resizing:

As you can see, depending upon the maximum property value, the thumb height changes. The next calculation is the thumb sliding up and down the shaft. LOL Only if "beavis and butthead were here". The method is ThumbMover().

Well, let me break it down for you. First, we get the cursor position. Then we calculate the new position with this equation:

NewPosition = CurrentCursorPosition + ThumbTop - OldCursorPosition

This will give us a new position for a moveable thumb. We then check to make sure the thumb is within the shaft. If it is out of range, we correct it. If it is in range, we then start the moving process. OK, now to get in depth on the secrets of the Windows scrollbar. To keep the scrollbar from flickering, we do not paint under the thumb. The shaft is in two pieces. The top shaft and bottom shaft. We draw from the top shaft to the thumb top, then we draw the bottom thumb to the bottom shaft. This reduces the drawing flicker to almost nothing. The next equation calculates the new control value.

The equation is:

Value = (Maximum / FullShaftSize) * ThumbTop

Seems simple enough! Then, last but not least, we raise a scroll event.

Part 4 - Scrolling Thumb based On Arrow Button Events

OK, we start off this section describing how Microsoft makes its arrow buttons work. How it clicks once and moves the thumb one position down, but if you continue holding the arrow button, it speeds up thumb moving. To create this effect, I use a timer control. Of course, how can you live in a world without time?

The PageDown timer property (enabled) is set to True. It then calls the Move_ThumbDown() method. This creates a one click move for the thumb. The timer then increases its speed which, if the mouse is still down, increases the speed of the thumb movement.

Part 5 - Scrolling Thumb based on Shaft MouseDown Events

You have just seen in the previous section how to move the thumb by arrow buttons. Now, I am going to teach you how to move thumb with largechange, by clicking on the shaft. The following method creates this in combination with the previous timer method:

The code above starts out by checking to see if the value is below the maximum. If it is, it then highlights the shaft and moves the thumb. It only highlights the shaft half that was clicked on.

The below example shows this:

Part 6 - Scrolling Based on Key and Wheel Events

The methods below show how to capture the arrow and page keyboard keys, as well as the mouse wheel. To capture the keyboard keys, I use the ProcessDialogKey() method. To capture the mouse wheel, I use the onMouseWheel() method.

Conclusion

Well, this concludes my tutorial on scrollbars. I hope you all enjoyed how long it was. ;) If anyone needs any help with understanding this article, don't forget to write.

Also one more thing, I am in the process of making the orientation of the scrollbar. So, currently you can only vertical scroll. Sorry! I am also making custom drawing presets for XP style, 3D style, flat style, and futuristic style.

"Devon Developers!" VectorX.

License

Free to use and modify as long as header stays in place. If any modifications are made to this assembly, users must email changes to author's email address.

Terms and Conditions For Use, Copy, Distribution and Modification:

THIS CODE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS CODE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.