Figure 1: Two screenshots of the demo application fully expanded and with some areas hidden.
Introduction
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 WinForm.
The ShrinkArea class has one public method, Toggle(). Calling 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 WinForm class.
public FormMain()
{
InitializeComponent();
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:
shrinkAreaAddress.Toggle();
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 belowShrinkAreaControls.
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.
Final comments
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.
I'm a software developer from Sweden who got tired of snow and cold weather and moved to USA. I choose New York City, so I wouldn't totally miss out on snow and cold weather. I work on Wall Street with financial systems (not much else to do in this neighborhood). I primarily use Visual C++/MFC or C#/.NET as development tool.
The picture is of my wife and me in Cannes, France, drinking the most expensive Coke we ever had.
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
)
