Understand .NET Scrollbars

• Download demo project - 8.23 Kb

Introduction

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 LargeChange and 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 LargeChange value.

Sub-Page Scrolling

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:

LargeChange=1;       // 1 row
Maximum=numRows;     // total # of rows

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;                // 1 pixel of change
LargeChange=rowHeight;        // height of 1 row
Maximum=numRows * rowHeight   // total height of all rows

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

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 VScrollBar (or HScrollBar):

protected override void WndProc(ref Message m)
{
  if (m.Msg == 8469)
  {
    switch((uint)m.WParam)
    {
      case 2: // page up
        if (this.Value - this.ValLargeChange > 0)
        {
          this.Value-=this.ValLargeChange;
        }
        else
        {
          this.Value=0;
        }
        break;

      case 3: // page down
        if (this.Value+this.LargeChange+this.ValLargeChange < this.Maximum)
        {
          this.Value+=this.ValLargeChange;
        }
        else
        {
          this.Value=this.Maximum - this.LargeChange;
        }
        break;

      default:
        base.WndProc (ref m);
        break;
    }
  }
  else
  {
    base.WndProc (ref m);
  }
}

This takes control of the default scrollbar behavior and changes the Value based on my desired large change (in the ValLargeChange property).

Conclusion

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.