Click here to Skip to main content
15,867,568 members
Articles / Programming Languages / Visual Basic
Article

XPander Controls Converged

Rate me:
Please Sign up or sign in to vote.
3.59/5 (19 votes)
4 Jan 20043 min read 222.6K   1.4K   40   47
WinXP like animated collapsing group box control.

Image 1

Introduction

There are a number of XP like grouping controls on CodeProject and elsewhere:

(Please let me know if I missed someone!)

Thanks to all those who wrote those nice controls. All these controls implement a number of features, however no single control implements all those features. So I decided to shamelessly copy their code and "Converge" everything in one! ;-) Also most of them were in C#, so I decided to start with VB.NET for this one. I used VS 2003 but they should work in VS 2002 also.

Feature list

  • Images on the left side of caption.
  • Animated expand/collapse. Animation can be switched off and the timing can also be changed. Gives the feeling of gradual fade away.
  • Drawing in gray if disabled.
  • Gradient fills.
  • Different chevron styles
  • Can be shown as non-collapsible
  • Tooltips
  • Office 2003 line style for the caption
  • Completely customizable

Using the control

You can use it in two ways:

  1. Drop XPanderList control to your form and then drop XPander controls to the XPanderList control.
  2. Or just drop XPander control to your form.

Most of the properties exposed on the controls are self-explanatory but some important ones are:

  • CaptionStyle - Choose a caption style. FlatLine makes it look like, Office 2003 flat caption with a line in the end, style.
  • ChevronStyle - Different chevron styles. Image, ArrowsInCircle, Triangle.
  • CollapsedImage, ExpandedImage, ExpandedHighlightImage, CollapsedHighlightImage - Specify your own bitmaps for chevrons! (Make sure that you have ChevronStyle set to Image.)
  • Image - Image on the left side of the caption.
  • CanToggle - Is the user allowed to expand/collapse? If
    VB
    False
    
    chevrons are not displayed, clicking on the caption does nothing and mouse cursor remains default.
  • ShowTooltips - Whether to show tool tips or not. Tool tip text is same as the caption text.
  • Animated - Enable/disable animation.
  • AnimationTime - How fast/slow (time). Used only if Animated is True. Value 0 behaves as if Animated=False
  • CaptionTextHighlightColor - Caption is drawn in this color when hovering.
  • CaptionHeight - Caption height can be adjusted. All child controls on this "group" are repositioned automatically with caption height change.

There are more properties for adjusting caption attributes like height, font, colors and so on.

Also methods Expand(), Collapse() are available on XPander and ExpandAll(), CollapseAll() are available on XPanderList.

Using the code

The "original articles" do such a good job of explaining the code so I will not repeat it here. They can be found with the links above.

Points of interest

Note that properties like CaptionLeftColor of type Color (and other properties like it) can be "Reset" using the VS.NET designer. This is achieved by using the DefaultValue attribute:

VB
<Description("Determines the ending (dark) " + _ 
    "color of the caption gradient fill."), _
    DefaultValue(GetType(Color), "198, 210, 248"), _
    Category("Caption")> _
Public Property CaptionRightColor() As Color

To draw disabled strings I use:

VB
ControlPaint.DrawStringDisabled(g, CaptionText, _ 
    m_CaptionFont, capcolor, CaptionRectF, format)

Similarly to draw disabled images I use:

VB
ControlPaint.DrawImageDisabled(g, m_ExpandedImage, _ 
    Me.Width - m_ExpandedImage.Width - 8, 2 + _ 
    imageOffsetY, Me.CaptionRightColor) 

Credits

Once again since this is more a copy/paste/organize operation then "new code", all credits go to those who wrote the original controls namely Daren May, Derek Lakin, Rob Tomson and the people who made TaskVision.

Revision history

  • Ver 1.2
    • New properties for pane color handling to get a look similar to Longhorn group boxes!. PaneBottomRightColor, PaneTopLeftColor, PaneOutlineColor
    • New property ImageOffset between image and caption top.
    • New property CaptionTextAlign, can be Left,Middle or Right
    • New CaptionStyle=WrapAroundLine
    • New ChevronStyle=PlusMinus
  • Ver 1.1
    • DrawChevronImage replaced by ChevronStyle. Currently you can select Image, ArrowsInCircle, Triangle or None.
    • FlatCaptionStyle replaced by CaptionStyle which can be Normal or FlatLine.
    • Reorganized most of the code to make it much more readable.
    • CaptionCurveRadius is also exposed now. Set it to 0 to remove curved captions.
    • Standard border styles can be used with BorderStyle. Enable border drawing by setting DrawBorder to True

Note: If you are already using version 1.0, you will have to change your form code to use CaptionStyle and ChevronStyle instead of FlatCaptionStyle and DrawChevronImage.

Happy XPanding!

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


Written By
mkg
Web Developer
United States United States
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
GeneralBugs during Mouse Hover Pin
netfusion30-Apr-09 0:09
netfusion30-Apr-09 0:09 
Generalusing this in visual web developer Pin
dualshock039-Mar-08 23:43
dualshock039-Mar-08 23:43 
GeneralBug!? help me! Pin
scheisse8312-Sep-07 10:26
scheisse8312-Sep-07 10:26 
Questionprogramming work? Pin
Alex Niswander20-Jan-07 7:47
Alex Niswander20-Jan-07 7:47 
AnswerRe: programming work? Pin
DaveAuld16-Apr-10 4:15
professionalDaveAuld16-Apr-10 4:15 
QuestionHeader has a verticle gradient instead of horizontal Pin
rwbaker23-Jun-06 3:02
rwbaker23-Jun-06 3:02 
AnswerRe: Header has a verticle gradient instead of horizontal Pin
ssamayoa1-Jul-06 7:06
ssamayoa1-Jul-06 7:06 
GeneralRe: Header has a verticle gradient instead of horizontal Pin
rwbaker1-Jul-06 9:18
rwbaker1-Jul-06 9:18 
GeneralThanks a lot! Pin
CodingWolf29-Mar-06 14:50
CodingWolf29-Mar-06 14:50 
QuestionXPander returning an error in VS.NET 2005 Pin
Nick49784-Nov-05 20:24
Nick49784-Nov-05 20:24 
AnswerRe: XPander returning an error in VS.NET 2005 Pin
bqStony13-Feb-06 3:14
bqStony13-Feb-06 3:14 
QuestionExpanding left to right Pin
avantip1807-Oct-05 10:02
avantip1807-Oct-05 10:02 
AnswerRe: Expanding left to right Pin
mkg10-Oct-05 6:35
mkg10-Oct-05 6:35 
Unfortunately not at this moment. It should be fairly easy to implement though. If you look at the Expand and Collapse methods in XPander.vb, you will see that all they do is change the height of the control. Replacing the code in ChangeHeight to change width instead would do the trick. You will have to change the Timer1_Tick code also.

If I ever get around to posting a new version, I will make sure to include that.
QuestionI want to ask you How to run it when having error? Pin
myphuong24431-Aug-05 19:24
myphuong24431-Aug-05 19:24 
AnswerRe: I want to ask you How to run it when having error? Pin
mkg10-Oct-05 6:37
mkg10-Oct-05 6:37 
GeneralRe: I want to ask you How to run it when having error? Pin
myphuong24410-Oct-05 17:00
myphuong24410-Oct-05 17:00 
QuestionXPander Control have error? Pin
myphuong24431-Aug-05 17:29
myphuong24431-Aug-05 17:29 
GeneralRun XPander Controls have errors! Pin
myphuong24429-Aug-05 18:18
myphuong24429-Aug-05 18:18 
AnswerRe: Run XPander Controls have errors! Pin
mkg31-Aug-05 7:58
mkg31-Aug-05 7:58 
GeneralLittle bug Pin
titan_pi81-Aug-05 5:31
titan_pi81-Aug-05 5:31 
GeneralRe: Little bug Pin
mkg31-Aug-05 7:59
mkg31-Aug-05 7:59 
GeneralAdding XPander to XPanderList at Runtime Pin
slipmat17-Mar-05 17:10
slipmat17-Mar-05 17:10 
GeneralTransparent Background Pin
romias4-Feb-05 2:49
romias4-Feb-05 2:49 
GeneralRe: Transparent Background Pin
mkg10-Feb-05 5:08
mkg10-Feb-05 5:08 
GeneralRe: Transparent Background Pin
mkg10-Feb-05 5:26
mkg10-Feb-05 5:26 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.