Figure 1: Two screenshots of the demo application fully expanded and with some areas hidden.
My current job involves developing a Windows application used by most trading firms and banks here in USA. The traders using this application usually have four screens or so for all their applications and it’s still a tight squeeze to fit them all. A common requirement is that all applications that have anything to do with the real time market data must be fully visible all the time, so no other application can share its space on the screen. So designing an application’s visible space as small as possible is an important part of improving an application’s usability.
There are several ways of solving this problem, for example splitting up large WinForms into several smaller windows and displaying only one at a time. Another solution would be to display only a part of the window and have a scrollbar so that the user can scroll the window. I have however found that the preferred way is to display all the required controls on a single window and avoid scrollbars if necessary. Instead, our trading application uses the concept of hiding controls that are seldom used or less important. This will also allow the window to take up less space most of the times. A user can expand the WinForm to display the hidden controls at any moment. Another advantage is that hiding insignificant controls will also make your windows less complex and easier to use, see figure 1.
Design overview and usage
I have created a new class called
ShrinkArea, which implements the hiding of specified controls. A
WinForm object needs to create a
ShrinkArea object for each area that will allow a user to hide and expand. The shrink area is the area of a
WinForm that a user can hide. The area is specified by giving the top and bottom coordinates of the area and of course, the coordinates should be relative to the
WinForm and not desktop coordinates. The constructor of
ShrinkArea also takes the parent form itself as an argument. A
ShrinkArea object can only be created after a form’s controls have been initialized, which means it can be created only after calling
InitializeComponent() of a
ShrinkArea class has one
Toggle() will shrink an expanded shrink area and expand a hidden shrink area. There is also a
bool property called
Expanded, which is used to either expand or hide a shrink area. The following code is from the constructor of our demo app’s
shrinkAreaAddress = new ShrinkArea(this, 104, 192);
shrinkAreaNotes = new ShrinkArea(this, 224, 352);
shrinkAreaNotes.Expanded = false;
To let a user hide or expand the address controls, we add a button, and in the button’s click handler, we add the following code:
The ShrinkArea class
When creating a
ShrinkArea object we will add a
WinForm’s controls to two collections. We add all the controls within the shrink area to a collection called
shrinkAreaControls and all controls below the shrink area to a collection called
To hide the shrink area we start by iterating over the controls in
shrinkAreaControls and make them invisible, see Figure 2, step 1. Then we iterate over the controls in
belowShrinkAreaControls and move them all up to cover the empty space of the shrink area, see Figure 2, step 2. The bottom part of the
WinForm is now empty so we just decrease the size of the
WinForm to get rid of that area, see Figure 2, step 3. To expand our
WinForm all we have to do is just the opposite, that is make the invisible controls visible again, move down the controls that are supposed to be below the shrink area, and enlarge the window back to its original size.
Figure 2: Steps to hide the shrink area.
In the demo application, I have provided two examples of buttons for the user to toggle the shrinking and expanding. The shrink/expand button for the address fields may not be the most graceful control but it is clear and easier to understand than the smaller and more elegant button we use to shrink and expand the Notes fields. Which button style is right for your project depends of course on your application and how computer savvy your users are.
One problem is how to solve if a user enters anything in an expanded shrink area and then shrinks it. The user may forget that he or she has entered some values in it, which will be saved with the rest of the
WinForm’s data. One solution is of course to disable the shrink/expand button once the user enters anything in the shrink area. The user then needs to clear all the controls if he or she wants to shrink the windows again. Another solution would be to somehow display that "controls in a hidden shrink area are filled in", for example with a small text label displaying an exclamation mark (!) in some bright color next to the shrink/expand button. The choice once again depends on how skilled your users are.
Future enhancements may involve adding functionality to shrink a window’s width instead of its height. Another enhancement would be to do the shrinking or expanding more gradually so that it looks like the window that is being rolled in and out instead of resizing it in an instant action. Check my frequently updated C# blog for more thoughts and further enhancements to this subject: C# Coach.