Scrollbars seem easy at the surface, but I recently discovered that the .NET implementation needed a minor adjustment for my needs. I decided to write a little test application to study scrollbars and how the different properties affect the visual and functional aspects of a scrollbar.
How Does A ScrollBar Work?
There are three things about a scrollbar that you usually set:
- The thumb, so that it reflects the visible portion of the document proportional to the entire document, which is represented by the entire track height (or width, for horizontal scrollbars).
- How to set the scrollbar so that it correctly pages through a document when the user clicks on the track.
- How to set the scrollbar so that you can correctly display sub-page changes when the user moves the thumb or uses the arrow buttons at the edges of the scrollbar.
This is easy enough to do in .NET with the following properties:
LargeChange sets the viewable "page" dimension.
Maximum sets the total document dimension.
Setting these two properties adjusts the scrollbar so that the thumb correctly reflects the viewable "page" proportional to the entire document breadth or width. The following equation illustrates the relationship between
Maximum to the thumb length and scrollbar length (I'm using length here to reflect one dimension, width or height):
LargeChange Thumb Length
----------- = ------------
Maximum Track Length
Furthermore, when the user clicks on the track, the scrollbar's
Value changes by the
The assumption in the .NET implementation is that you will always want to scroll by a "page" (the
LargeChange). I have a situation where I don't want to do this. I have an image viewer that has rows of images, and what I'd like is the
LargeChange to scroll by rows, not the entire visible "page", which consists of multiple rows. At the same time, I'd like the
SmallChange to scroll pixel rows so that the viewer scrolls smoothly. This second requirement means that I can't do this:
because now I can't specify a sub-row
SmallChange (this property is of type
int). Instead, I should do something like this:
SmallChange=1; LargeChange=rowHeight; Maximum=numRows * rowHeight
But now my thumb is no longer proportional to the visible "page"! The thumb now reflects the ratio of one row with regards to the whole document rather than the entire page to the whole document. While this works from a functional perspective, the visual aspect is wrong.
The solution is to decouple the
LargeChange (which has to be used to get the thumb set to the appropriate size) from the actual change in
Value when the user clicks on the track. This is accomplished by overriding the
WndProc method and trapping the page up/down messages in a specialized
protected override void WndProc(ref Message m)
if (m.Msg == 8469)
case 2: if (this.Value - this.ValLargeChange > 0)
case 3: if (this.Value+this.LargeChange+this.ValLargeChange < this.Maximum)
this.Value=this.Maximum - this.LargeChange;
base.WndProc (ref m);
base.WndProc (ref m);
This takes control of the default scrollbar behavior and changes the
Value based on my desired large change (in the
You can play with the demo to see the difference in operation. Note that this code isn't brilliant, the property names are clumsy, and the message values are hard coded. Obviously, it's not production code. It is, as the project name indicates, merely a study of the problem.