Click here to Skip to main content
13,090,930 members (46,978 online)
Click here to Skip to main content
Add your own
alternative version


35 bookmarked
Posted 11 Apr 2005

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.


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

   // 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:


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.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

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.

You may also be interested in...


Comments and Discussions

GeneralRedirect from one solution to other solution Pin
yvarjun11-Aug-09 3:11
memberyvarjun11-Aug-09 3:11 
GeneralVB or VBA Version Pin
Mikster11-Jul-08 9:31
memberMikster11-Jul-08 9:31 
GeneralHere is the GetFormRelativeBounds function Pin
lnae20-Feb-07 22:35
memberlnae20-Feb-07 22:35 
GeneralOne more improvement.. Pin
lnae20-Feb-07 22:19
memberlnae20-Feb-07 22:19 
GeneralOne thing I have done Pin
Ennis Ray Lynch, Jr.14-Jul-06 9:29
memberEnnis Ray Lynch, Jr.14-Jul-06 9:29 
GeneralWell Done Pin
Victor Ionescu14-Jul-06 9:05
memberVictor Ionescu14-Jul-06 9:05 
GeneralNice ( + horizontal shrinking) Pin
el_che11-Apr-05 13:21
memberel_che11-Apr-05 13:21 
GeneralRe: Nice ( + horizontal shrinking) Pin
Six CodeMaster17-Jun-06 10:52
memberSix CodeMaster17-Jun-06 10:52 

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

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

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.170813.1 | Last Updated 11 Apr 2005
Article Copyright 2005 by Patric_J
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid