Windows Forms Application With Collapsible Panel

ukraju

Hi, I need to create a windows forms application having collapsible panel with some controls like label and picture box inside the panel.How to do this?Please help me by providing a sample solution or steps.Thanks in advance.

Lost User

ukraju wrote:

Please help me by providing a sample solution or steps.

That's the wrong way of learning to develop; you start with a book or easy tutorials and work trough that - starting a project without knowing where to begin and asking for help on every step of the way will not be a "fun" way of learning, because of comments like mine :) If you've been assigned this "problem" by a teacher, please introduce him/her to this thread. Drop a Panel on your form. Notice that you can hide/show the panel using it's Visible property, or the Hide/Show methods. Also note that a Panel inherits from Control, and that it can notify you if the user enters or leaves the panel (see MSDN[^]). Drop your other controls on the Panel, and implement the logic to show it when the mouse enters the control, hides it when it leaves the control. Next, you'll notice that it will not unhide; that is because you cannot "enter" an invisible control. So, we'll introduce the Size property right away: if the mouse enters the control, make the Panel a 100 pixels wide, if it leaves the control, make it 25 pixels wide. First state is called "Normal", seconds state is called "Collapsed". You can earn bonus-points by wrapping it all in a re-usable UserControl and writing an article (submit on this site of course) on the topic. Yes, we welcome articles that provide a sample solution and/or steps.

Bastard Programmer from Hell :suss: if you can't read my code, try converting it here[^]

BillWoodruff

I think you got the best possible advice from Eddie Vluggen in his post above: you need to "ground" yourself in the fundamentals of what Forms, and "container controls," like the Panel Control, are: And, the fact that true "container controls," at design-time in Visual Studio, allow you to drag-and-drop other Controls within them, at which point those dropped Controls have their Parent property set to the Container Control they were dropped into: you hide the Parent container control: everything within it is hidden. The only thing I can add here is to suggest that, to me, a "collapsible" Panel, implies that some part of it will always be visible: the simplest way to achieve that is, as Eddie suggested, to manipulate the Size property of the Panel using the Enter and Leave events of the Panel. If you want to leave the Panel "fully open" some of the time, when the user moves the mouse outside the Panel: that requires a different solution. There are other, more sophisticated techniques (but still rather simple to code), for when you need multiple Panels that open and collapse within an outer Panel, leaving only one open, as in the famous "Outlook Bar" interface. edit ... Hint: use Panels set to Dock.Top within an outer Panel, and respond to Click events on the inner panels by iterating the ControlCollection of the outer Panel, and doing the right thing to hide and collapse the inner Panels. good luck, Bill

"Everything we call real is made of things that cannot be regarded as real." Niels Bohr

Ger Hayden

Again, Eddy's advice rules. But of course you could also use a command button to control the panel size. That way it changes when you tell it to rather than based on where the mouse is. I've only recently used the panel for the second time and on this occasion I am placing an image, label and command button on at run time rather than design time one per row, based on the number of rows on a particular database table. Its well worth the effort.

Ger

BillWoodruff

Good point, Ger, Indeed, a given UI of this type (sub-panels in a Panel) is may be designed to allow any number of sub-panels to be expanded, or collapsed,or "accordion style," allow only one sub-panel to be open at-a-time: that may mean you need to deal explicitly with visibility, assuming you have the Panel's 'AutoScroll property set to 'true, and there are sub-panels in the Panel's ControlCollection which are scrolled out of view. I assume you add these controls to your sub-panels at run-time because: either you don't know the number of rows until run-time, or, the end-user may set a parameter that affects number of rows to be rendered into sub-panels on Load, or the user "on-the-fly" changes the number of rows they want rendered into sub-panels (via selection or query or whatever). Personally, I'm a "true believer," in this situation, in creating a UserControl that can be multiply instantiated, that contains all sub-elements: such as the ones you described: image,label, command button, and then keeping a Collection of those back on the "ranch" (some "MainForm") in a form of a Generic Dictionary, which will vary depending on the scenario, but may be like: Dictionary<subPanel, bool>, where the Boolean might indicate if its "open," or "collapsed." ... edit ... Assuming a scrollable outer container Panel: if the user does some selection activity ... outside the container Panel ... that will then determine that sub-panel#x needs to be visible, you may have to adjust the scroll-position in your code, if the targeted sub-panel is currently scrolled out-of-view: this is a reason why I like using a generic collection here: to get away from code like

panel2.ScrollControlIntoView(panel2.Controls[0]);

... end edit ... But, that's just another recipe from Mama's Kitchen, and I am not questioning the way you are doing things now: just extending your comment a bit. "Each scenario may require a different UI solution that is optimal" is such a cliche, that I won't even mention it here :) best, Bill

"Everything we call real is made of things that cannot be regarded as real." Niels Bohr