Expandable GroupBox

Hi,

Here's an Expandable Groupbox control. It works just like the regular GroupBox control, except that there is an Expand Button next to the caption. Clicking that button will Expand or Collapse the Groupbox.

Screenshot when expanded:
http://i29.tinypic.com/aa98cw.jpg

And after collapsing:
http://i31.tinypic.com/2u8w6iu.jpg


The control has the following new Properties you can set:

• Caption - Sets the text of the caption,
• BorderColor - Sets the color of the custom-drawn border,
• CaptionColor - Sets the color of the caption text,
• Expanded - Whether or not the control is expanded,
• ExpandedSize - The size of the control when expanded,
• HeaderClickExpand - Whether or not the user can click the header (caption) to expand/collapse the control.

The control can be expanded / collapsed during Design-Time simply by clicking the Expand Button. Yes, it works during Design-Time :)

That's all you need to know if you want to use it :)


If you want some more information, read on.

The control is simply a UserControl with two panels: the header panel and the content panel. In the header panel, I put a Button and a Label.
The + and - signs on the button are custom drawn, because it is too small to display its normal caption text properly.

The rounded border is drawn in parts. First, the top part and a small part of the vertical lines is drawn on the header panel, and the rest is drawn on the content panel separately.

There is no groupbox in this control at all, and no inheriting from the groupbox. It only looks like a groupbox because I've custom drawn it that way.
For this reason, it is completely customizable (at least, if you want to put some effort into it ;)). You could make it look however you want by editing the painting methods. You are not stuck with the groupbox appearance.

To enable the button to work during Design-Time, I had to write a Designer class. The GetHitTest function in that class actually enables you to click the button.
Once you button is clicked, I also need to tell the Visual Studio designer that the control has updated (it's size has changed). If it doesn't do this, then the selection rectangle remains in the old size until you re-select it, which is quite confusing. To make that happen, I get a reference to the control and add the ExpandButton_Click event handler, so I can notify the designer when it is clicked.


------------------
Sorry, can't post the full code as it was too long to fit in a single post...
VB file is attached.


To use:
1. Add a reference to System.Design (required to compile!) Huh?! What's that?
2. Add the attached VB file to your project.
3. Build your project.
4. Enjoy!


EDIT---
Updated to fix an error with the caption text resetting. The Text property is now renamed to the Caption property.

how can i add that file to my project.

please tell me.

:down:

Right click your project in the Solution Explorer and choose Add Existing Item. Then browse to the file and select it.

When I add the file to my project, there are a lot of errors; is this for a certain version or am I doing something wrong?

Is it too much to ask to list at least some of the errors you are getting? I can't read your mind you know...

Did you read point 1 of my instructions?

Wow; I read it, but misunderstood what you meant and did something completely different; it works now, my bad. Lost my brain for a few minutes.

That's ok, it happens :p You should just have provided me with some errors and I could have told you instantly what was wrong. It was just by pure 'experience' that I knew that not adding the System.Design reference causes loads of errors.


In case someone doesn't know how to add a reference:
Right click the project name in the Solution Explorer. Choose Add Reference. Wait. Wait some more. When the window finally pops up, scroll down and select System.Design from the list. Then click OK. A rebuild might be required.

Why not just make this a control in a control library? That way people can just reference the dll and it'll just work on the spot.

Well, a few reasons... People might just be interested in the control, but not actually want to use it. They can view my code easily, test it out in a project quickly and then forget about it.

If people do want to use it, I provide the class file for them so they can edit it to their needs. If I just provide a DLL they can't, and would have to ask for my code etc.

Finally, if I provide a DLL people will just mindlessly put it in their project without even looking at the code. I want people to learn from it too, otherwise I would keep it to myself.

Oh, and I also don't think it's allowed to post compiled files..?

I meant include the project files for a class library of just the control as well as what you've already posted in #1.

That way people can simply add the dll (they'd dl the project, compile it and use it) no rules broken, they have the source code to it for learning still and since the *.vb file is still in post #1 they have just that for a quick test/play with it then move on.

Ah, now I understand you :)
Yeah I suppose I could do that. Of course, you then merely get a different issue where people don't know how to use class libraries :p

Quote:

---

Originally Posted by NickThissen

Ah, now I understand you :)
Yeah I suppose I could do that. Of course, you then merely get a different issue where people don't know how to use class libraries :p

---

That's when you inform them that required IQ is out-of-bounds of their array. :bigyello:

Hehe. Object reference 'brain' not set to an instance of an object.

Very Very useful, thanks.

Has anyone got a C# version of this control? It's perfect for what I need but I'm currently working in C#.

It shouldn't be too hard to translate, but there's really no need. Just add a new (VB) project to your solution, add the control to that project, and reference the project in your main project. Then you can use the control in your C# project even though it's written in VB. Yes, you can mix VB and C# code in the same solution (but not in the same project).

Of course, that only works if you have Visual Studio, and not the Express edition.

If you've got the express edition, try running the code through a translator like this
http://www.developerfusion.com/tools.../vb-to-csharp/

Great work man,
the chance to go trough the code and see how its wired up - priceless :thumb:
just one thought:

If the whole idea of this kind of control is to group and save space (probably on a crowded form) wouldn't it be correct to have it behave so the rest of the controls would be pushed away, form expanded..?

thanx for the cool work :check:
Petr

If the docking is set up properly, it does that already. If the controls aren't docked, then I'm afraid there's not much I can do.

For example, dock the groupbox to the top, and some other control to fill (or also to the top, doesn't matter), and you get this
http://i43.tinypic.com/5b4b9h.png

I am using VS2008 and the class ExpandableGroupboxDesigner has multiple issues ranging from ParentControlDesigner not located even with forms and forms.design referenced in the project to some other issues which I am guessing stem from the ParentControlDesigner not defined in the IDE. Any thoughts?

Did you follow step 1?

Quote:

---

Originally Posted by NickThissen

Did you follow step 1?

---

Yes I did as your instructions were in bold at that point but while poking around I noticed a problem unrelated to the control (funky blank property window for a DataGridview, freshly placed on the form with only a button and no code yet) and tried with another project and it worked fine. Of course at the same time the network techs were doing remote pushes to my computer so how knows what happened there.

So does it work now or not? You mentioned referencing 'forms.design'. Did you mean System.Windows.Forms.Design? I told you to reference System.Design, not System.Windows.Forms.Design ;)

Quote:

---

Originally Posted by NickThissen

So does it work now or not? You mentioned referencing 'forms.design'. Did you mean System.Windows.Forms.Design? I told you to reference System.Design, not System.Windows.Forms.Design ;)

---

I have a compiled DLL now, have not actually tried the control. When I was mentioning System.Windows.Forms.Design it was regarding your code

Code:

---

Public Class ExpandableGroupboxDesigner
    Inherits System.Windows.Forms.Design.ParentControlDesigner

---

and not the reference at all.

I have no reason to go past compiling at this point as I do not have a use for the control. I keep nothing that I download unless there is a clean compile and when time permits will examine said control.

So the problem was not your control or me missing the reference. As stated in the last reply things sometimes go sideways especially when pushes are being done from the network people.

Nick,

Firstly, thank you. I love your control and its adding so much to the look and feel of my apps UI, however I have a question if I may.

To reduce the size of my UI, I've setup some code which forces all of the other groups to collapse upon expanding one of them. Example below:

Code:

---

Private Sub grpREcommendations_Expand(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles grpRecommendations.Expand
        grpGeneralSettings.Expanded = False
        grpSiteInformation.Expanded = False
        grpDatabaseInfo.Expanded = False
        grpUsageSummary.Expanded = False
        grpSpeechRecognition.Expanded = False
        grpServerHealth.Expanded = False
        grpBadgeHealth.Expanded = False
    End Sub

---

This works great and collapses all of the other compartments when one is expanded, however I've noticed that the expand button remains in it's Minus or expanded state until I mouse-over the button at which point it redraws and becomes the correct Plus image.

Is there a way to force the group to redraw when I am collapsing it so that the button updates?

Thanks
Richard

Quote:

---

Originally Posted by richardjgreen

Nick,

Firstly, thank you. I love your control and its adding so much to the look and feel of my apps UI, however I have a question if I may.

To reduce the size of my UI, I've setup some code which forces all of the other groups to collapse upon expanding one of them. Example below:

Code:

---

Private Sub grpREcommendations_Expand(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles grpRecommendations.Expand
        grpGeneralSettings.Expanded = False
        grpSiteInformation.Expanded = False
        grpDatabaseInfo.Expanded = False
        grpUsageSummary.Expanded = False
        grpSpeechRecognition.Expanded = False
        grpServerHealth.Expanded = False
        grpBadgeHealth.Expanded = False
    End Sub

---

This works great and collapses all of the other compartments when one is expanded, however I've noticed that the expand button remains in it's Minus or expanded state until I mouse-over the button at which point it redraws and becomes the correct Plus image.

Is there a way to force the group to redraw when I am collapsing it so that the button updates?

Thanks
Richard

---

I managed to get this working using the .Refresh syntax.

Thanks
Richard

Apparently when the Expanded property is changed it doesn't refresh the button. You could add a Refresh call as you said, but it would be better to refresh just the button in the Set part of the Expanded property.

Quote:

---

Originally Posted by Pettt

Great work man,
the chance to go trough the code and see how its wired up - priceless :thumb:
just one thought:

If the whole idea of this kind of control is to group and save space (probably on a crowded form) wouldn't it be correct to have it behave so the rest of the controls would be pushed away, form expanded..?

thanx for the cool work :check:
Petr

---

Put it in a FlowLayoutPanel.

Hi Nick,

That is an excellent control! I would like to use it in an Open Source project.

Is this allowed and if so, how would you like me to mention this in my project?

kind regards,
Rob

Of course, otherwise I wouldn't have posted the source ;)
I don't mind how you mention me, it's not like it was a huge effort. If you do want to mention me just mention my name or whatever.

Has anyone gotten this to work with .Net 4.0? I can't find System.Design anywhere, so I'm having a hard time adding in the required reference. Has this been replaced in .Net 4.0?

Looks like a great control :cool:

You need to target the .NET Framework 4.0 and not the Client Profile. The Client Profile is the default and it is basically a trimmed down version which does not include the System.Design reference.

Excellent, that helped. Thanks :)

Nick,

Nice control, I've been looking for something like this. I'm having a problem, I put a textbox and combobox inside the groupbox but when I run the app in the IDE the control don't hold there position from the design window and after I stop running the app the controls have move in the design window also. I played around with anchor/dock but it didn't solve the problem

I'm I doing something wrong.
I'm use VS 2010 pro

thanks

EDIT - Just an example, I set the combobox width to 300 and after running my app in the IDE the width was set to 605.

great control but there is no expanded size?

The ExpandedSize property is hidden from the propertylist in the designer, as you should set it by just dragging the control. I think I did that so that the OnSizeChanged method would fire, which handles some stuff internally, and that would not get done if you set the size directly. I'm not sure about that though.

VS2010 Professional

Thank you very much for this. I have followed the instructions to get it into my project. I see it in the Solution Explorer as a .vb.

My questions may seem obvious to the more experienced programmers here.

How can I add this as a control onto an existing form? Is there any way of adding this into the Toolbox as a control?

Quote:

---

Originally Posted by Falcon--

VS2010 Professional

Thank you very much for this. I have followed the instructions to get it into my project. I see it in the Solution Explorer as a .vb.

My questions may seem obvious to the more experienced programmers here.

How can I add this as a control onto an existing form? Is there any way of adding this into the Toolbox as a control?

---

You'll need ot have compiled (or ran) your program at least once & then it'll show in the toolbox at the very top.

Quote:

---

Originally Posted by JuggaloBrotha

You'll need to have compiled (or ran) your program at least once & then it'll show in the toolbox at the very top.

---

Thank you JuggaloBrotha! :) It worked just as you wrote.

I learn something new everyday in this forum.

Thank you. :thumb::bigyello:

Edit

Hello, I encounter some problems using the expandable groupbox.
At design time I place some controls in the groupbox but when I run my application the controls change in position and size or whatever. I can't figure how to use it properly because I'm really new to vb. Thanks.

Attachment 122277

Ok.. I figured it out. I change the scale mode to none in the expandedgroupbox.vb

Me.AutoScaleMode = System.Windows.Forms.AutoScaleMode.None

Nice code!