Developing User Interfaces
CMSC 498B
Spring 2002
Prof. Ben Bederson
Project #3
Due April 11, 2002

Purpose

The purpose of this program is to understand what is involved in developing and using a custom widget.

The Problem

You are going to create a custom double-headed scrollbar, and use it to control how an image is displayed.  Normal scrollbars have a minimum, maximum and current value with an extent that controls how large the thumb is.  A double-headed scrollbar provides an interface for setting the extent.  It usually is presented to the user as two arrows on either side of the thumb to explicitly change the bottom and top ends of the thumb.  An example double-headed scrollbar looks like this:

The ScrollBar

You must create the scrollbar from scratch.  It should be built as a generic widget without knowledge of your project or any other application, and should be able to be used in any application that needs such a widget.  As such, it should lay itself out generically depending on its size.  It also should respond to user mouse input events, and generate custom internal events to allow applications to respond to it.

The requirements are:

• Your scrollbar class should extend Systems.Windows.Forms.Control.
• Define these properties.  Note that setting these properties should result in the scrollbar being redrawn in such a way to represent the new values.
  • Low & High (extents of thumb)
  • Minimum & Maximum (extreme legal values of Low and High)
  • SmallChange (amount Low & High change when pressing on end buttons)
  • LargeChange (amount Low & High change when pressing in trough)
  • Orientation (should be Horizontal or Vertical, and should control layout and interaction of scrollbar in the obvious way).
• Render with standard 3D look and feel.
• Respond to mouse events so that it reacts to the user in the normal expected way.  This includes:
• Clicking on the top or bottom buttons (which should show the buttons depress during clicking) should change the value down or up, respectively, by SmallChange (bounded by Minimum and Maximum)
• Click and holding on the top and bottom buttons should change the value in the appropriate direction continuously at a reasonable speed (independent of machine speed).
• Clicking on the trough should change the value up or down appropriately by LargeChange (bounded by Minimum and Maximum).
• Click and dragging on button at bottom of thumb should move thumb, changing Low value of thumb (bounded by Minimum and Maximum)
• Click and dragging on button at top of thumb should move thumb, changing High value of thumb (bounded by Minimum and Maximum)
• Click and dragging on thumb should move thumb, changing Low and High values simultaneously (bounded by Minimum and Maximum)
• Define Scroll event that gets fired whenever the user interacts with the scrollbar.  The event should contain the new values of the scrollbar, and also include a type that specifies what triggered the event.  The type should include all of the attributes of ScrollEventType and in addition, also include Low to mean that the low value of the thumb changed and High to mean that the high value of the thumb changed.

The Application

You should build a simple application that contains a Menu, a simple custom control to display an image, two double headed scrollbars, and nothing else.  The layout should put the menu across the top, one scrollbar on the right side (being 18 pixels wide), one scrollbar on the bottom (being 18 pixels high), and the image filling the middle, and keep the components sized and positioned properly when the user resizes the window.

The Menu should include File and Help.  Help should have an About option which displays a simple dialog box giving information about how to use the program, and who wrote it.  File should include Open and Exit.  Open should allow the user to open an abritrary file (using the system file dialog box), and display the image in the custom image control (although naturally it will only make sense to open image files in this way).  When a new image is loaded, the application should adjust the scrollbar's properties to match the image size.  When an image is first loaded, the thumb should fill the scrollbars.  Then, you will be able to magnify and pan the image by manipulating either scrollbar. 

To make this work, you'll also have to create a simple custom control that renders a single image with properties that control how much of the image should be displayed.  Whatever portion of the image is selected should be rendered filling the control - thus selecting just a portion of the image to render will result in that portion of the image being magnified.

C# Hints

To render the components of the scrollbar, see the System.Windows.Forms.ControlPaint class.

To generate events at a regular interval (i.e., timer events) in response to the user holding down the mouse, see the System.Threading.Timer and System.Threading.TimerCallback classes.

To create a file dialog box for opening text files, see System.Windows.Forms.OpenFileDialog.

You can make any kind of About you'd like, including defining a new form, or just creating a System.Windows.Forms.MessageBox.

Submitting

Submit your program the same way you submitted the other projects, by creating a zip file of all the source code files related to your project, login to a Unix WAM computer, and run the WAM submit program.  This is course CMSC 498B, Section 0101, Project #3.