Show/Hide details WinForm

Question

I am creating a WinForm App(.net3.5) where I display some Client Details. My issue is that we have a directions field that correlates to an Address. To save room I would like to have the directions hidden until the user "wishes" to see them. My intended method was to have an "accordion" like presentation for the directions.
I would imagine I could also do this with a hidden field and BringToFront()(would this be better).

Can someone offer some guidance on the Accordion Style?
Does something already exist?
Do I need to take anything special into account?
In coding my own behavior; Would I just move everything down and then back up etc?

Thanks!

Answer 1

I think you would want to group your associated controls together in panels, align them to the top/bottom of your form, and then programmatically show/hide the appropriate panel when the user clicks "More Detail >>" / "<< Less Detail".

EDIT: I don't know of a helper control for this specific functionality, aside from panels used to group controls and show/hide them all at once.

Answer 2

If the controls are freely placed, then yes - you'd have to move things up or down. You can reduce the amount of work by encapsulating groups of related controls into panels: then you just have to move the panels. If the panels are docked (for example, "top") - then just hide / show the panel and everything should fall into place automatically.

Answer 3

The concept you are talking about is called Progressive Disclosure. Microsoft has some excellent tips in the UX Guide about these types of controls.

Answer 4

When I require this type of behaviour, I find that the TableLayoutPanel is useful. You can set the rows and columns to auto-size if holding expandable content - that way, when you hide the content, the row collapses.

If you then have another control (a button, for example), you can use that to control the hidden state of the expandable content.

For example, create a 3 row, 1 column table. Add a fixed size button at the top, and an autosize element in the middle. Make the last row percentage-sized (you need this so that something takes the remaining space when the middle row sizes to zero). Then use your button to change the visible property of whatever you have in the middle row.