Implement a "click-here-to-expand" container

Question

I have no better way of explaining it, but I want to implement a container that only is shown after the user clicked "Advanced" or a plus sign somewhere in the dialog. I have a login form and want to add some "Advanced" settings. But they should normally out of view.

Of course, the dialog has to resize nicely to hold the extended content.

How should I go to implement such a thing. I have tried some Google searches, but can't find the right search words. Windows doesn't seem to have it by default.

Its called an Expander. Are you using WPF, Winforms or ASP.NET? — Daniel Hilgarth, Feb 13 '13 at 14:54
@DanielHilgarth Only Expander objects tend to be visible and extend themselves - like jQuery UI's Accordion - where this description seems to want the expander button to 'extend' its parent. — Grant Thomas, Feb 13 '13 at 14:55
I don't see why this is getting down-votes and votes to close. It's a real question, and assuming he's not familiar with WinForms, it's a perfectly reasonable question. Just because it seems trivial to some of us doesn't mean it's a bad question. — David, Feb 13 '13 at 14:55
Althought this is a duplicate (if this is for WinForms). You can find several answers to your question here: http://stackoverflow.com/questions/3795005/add-a-expander-collapse-expand-to-a-panel-winform — David, Feb 13 '13 at 14:56
@GrantThomas: If the expander wouldn't be visible, how would you click it? Expanding the parent is easily possible by doing so when the expander is expanded. — Daniel Hilgarth, Feb 13 '13 at 14:59
You could resize the form itself dynamically. Design the form in it's expanded state with controls, etc. and change the height on demand, showing or hiding (and enabling/disabling to prevent unwanted focus) the controls. — John Willemse, Feb 13 '13 at 14:59
@DanielHilgarth A button for operating it would be necessary, obviously, that's not what I excluded. — Grant Thomas, Feb 13 '13 at 15:00
@GrantThomas: "A button for operating" is all that is shown when an expander is not expanded: http://www.google.com/search?site=imghp&tbm=isch&q=expander+wpf — Daniel Hilgarth, Feb 13 '13 at 15:03
@DanielHilgarth Okay, this is splitting hairs; I know what an Expander is and looks like and I'm saying, IMO, it's a much different thing to what the OP is asking for. Think of clicking the expander button (no associated header or anything) and it dynamically changes the form it's on, its surroundings, without a body to expand of its own. These are common 'extendable dialogs' which I'm positive you'll know and have experience about, and are aware they're not 'Expanders'. — Grant Thomas, Feb 13 '13 at 15:08
@GrantThomas: I am not being pedantic, what you say simply makes no sense, if I may say so. Every extendable dialog works exactly this way: You have a button to show or hide the extended part. That's what the expander provides. Furthermore, you can style that "button for operating" any way you want. It can be a small down arrow as is the default in WPF but it also can be a button labeled "Advanced >>"... — Daniel Hilgarth, Feb 13 '13 at 15:11
@GrantThomas your very statement `I know what an Expander is and looks like` proves me right. — Federico Berasategui, Feb 13 '13 at 16:07
@DanielHilgarth Based on the OP's own solution, may I stand corrected. — Grant Thomas, Feb 13 '13 at 20:04

score 3 · Accepted Answer · answered Feb 13 '13 at 15:37

as John Willemse suggested, I ended up creating the functionality myself. I added a Panel in the form that I just set visible or invisible.

In the Form's constructor (to hide it on first view):

    public FrmLogin() {
        InitializeComponent();

        pnlAdvanced.Visible = false;
        Height -= pnlAdvanced.Height;
    }

Then, I added a LinkLabel with this Clicked handler:

   private void linkLabel1_LinkClicked(object sender, 
                            LinkLabelLinkClickedEventArgs e) {
        if (pnlAdvanced.Visible == false) {
            Height += pnlAdvanced.Height;
            pnlAdvanced.Visible = true;
        } else {
            Height -= pnlAdvanced.Height;
            pnlAdvanced.Visible = false;
        }
    }

Works perfectly and no extra code needed.

Implement a "click-here-to-expand" container

1 Answers1