2

A customer has asked for a user interface which combines a number of different elements. It's basically a list. Selecting an entry in the list causes a dialog to expand in-place:

Item 1
Item 2
Item 3

After selecting Item 2

Item 1
------------------------------------
| Item 2                           |
| text box             button      |
|                      button      |
|                                  |
| text box             button      |
------------------------------------
Item 3

I know you can make some fairly complex listviews http://www.codeproject.com/KB/list/ObjectListView.aspx

How would some of you GUI experts do this? Is there a name for this type of layered interface that I could just search on to learn more about it? Can I just extend listviewitem with my in-line form? I think I just need a pointer as to how to start. I've done some forms programming but this is beyond my current knowledge.

Thanks

Edit --

Dash's comment set me on the right track as I think it's an accordion control that I'm looking for. Since he didn't provide an answer I don't know how to mark this as answered...

Paul H.
  • 158
  • 8
  • 2
    You are probably looking at an accordion style control: http://jfblier.wordpress.com/2011/02/21/accordion-control/ (http://stackoverflow.com/questions/1303195/winforms-accordion) for example, although there are lots of examples around the net. You basically have 3 regions that are all collapsed, but when you click on one it expands. A listbox probably isn't what you want. – dash Dec 05 '11 at 22:54
  • 3
    Is this planned to be a WebForms interface or WinForms? – Joel C Dec 05 '11 at 22:56
  • I guessed at WinForms due to the last line, but good ask – dash Dec 05 '11 at 23:05
  • 1
    @Dash You should put your answer in the "Answers" section so it can be upvoted and/or accepted. Don't be timid. – Scott Rippey Dec 05 '11 at 23:18
  • @Scott Rippey It's not really about being timid; I'm just a bit unsure of the protocol. The answer above takes a lot from other content on SO and I'm not really sure whether that amounts to an "answer" or not. Nice profile picture btw, hope you've played the new one! – dash Dec 05 '11 at 23:20
  • 1
    @dash: It's no problem to compose an answer out of sources from other answers (see the paragraph starting with "Want to know an easy way to earn reputation?" from [this link](http://www.joelonsoftware.com/items/2008/09/15.html)!). Putting in your answer as an answer also allows it to be downvoted if it's wrong in the future (hope not) and accepted as an answer if it meets Paul H.'s needs. – Daniel Pryden Dec 05 '11 at 23:42
  • These responses are exactly what I needed. Progressive Disclosure, Accordion-control, and expander control are all terms I needed to get on the right track. Thanks! – Paul H. Dec 06 '11 at 00:37
  • @Joel C Yes, it's a WinForms. – Paul H. Dec 06 '11 at 00:41

3 Answers3

3

If you're using WinForms, there's an implementation called DropDownPanel on CodeProject that looks like what you want.

This answer to a similar question describes a possible solution using TableLayoutPanel, which you may also be interested in.

Community
  • 1
  • 1
Daniel Pryden
  • 59,486
  • 16
  • 97
  • 135
  • +1 for the related http://msdn.microsoft.com/en-us/library/aa511487.aspx - great article. – dash Dec 05 '11 at 23:37
  • I had seen the DropDownPanel on CodeProject but it's not quite what the user's wireframes describe. Thanks for the suggestion, though. – Paul H. Dec 06 '11 at 00:33
2

I suggest TableLayoutPanel with 6 rows and 1 column with this orientation:

Row1: Flat button with text=Item1

Row2: A panel corresponding Item1(visible false else button in row1 pressed)

.... and so on.

Note:

First row2,4,6 visible=false

When any button in row1,3,5 is pressed depend on position single row 2,3,4 visible =true else visible=false.

Reza ArabQaeni
  • 4,848
  • 27
  • 46
0

Have you looked at the WPF expander control? You could incorporate this into your list to create a composite control which would satisfy the 'layering' you wish to create.

m.edmondson
  • 30,382
  • 27
  • 123
  • 206