Click here to Skip to main content
Click here to Skip to main content
Go to top

Save valuable screen space by hiding seldom used or insignificant controls on a WinForm

, 11 Apr 2005
Rate this:
Please Sign up or sign in to vote.
In any WinForm, there are controls that must be available for the user but not visible at all times. A clever approach is to hide these controls and only display them when the user so requests. The WinForm can be smaller which will save screen space.

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();

   // ShrinkArea objects must be created after a 
   // form's controls are created, so after 
   // call to InitializeComponent().

   // Create shrink area for address fields.

   shrinkAreaAddress = new ShrinkArea(this, 104, 192);

   // Create shrink area for notes fields 
   // and shrink the area from start.

   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.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Share

About the Author

Patric_J
Web Developer
United States United States
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.

Comments and Discussions

 
GeneralRedirect from one solution to other solution Pinmemberyvarjun11-Aug-09 3:11 
GeneralVB or VBA Version PinmemberMikster11-Jul-08 9:31 
GeneralHere is the GetFormRelativeBounds function Pinmemberlnae20-Feb-07 22:35 
GeneralOne more improvement.. Pinmemberlnae20-Feb-07 22:19 
GeneralOne thing I have done PinmemberEnnis Ray Lynch, Jr.14-Jul-06 9:29 
GeneralWell Done PinmemberVictor Ionescu14-Jul-06 9:05 
GeneralNice ( + horizontal shrinking) Pinmemberel_che11-Apr-05 13:21 
GeneralRe: Nice ( + horizontal shrinking) PinmemberSix CodeMaster17-Jun-06 10:52 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web02 | 2.8.140916.1 | Last Updated 11 Apr 2005
Article Copyright 2005 by Patric_J
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid