Click here to Skip to main content
15,176,980 members
Articles / Programming Languages / C#
Posted 13 Apr 2007


378 bookmarked


Rate me:
Please Sign up or sign in to vote.
4.93/5 (105 votes)
27 Nov 2008CPOL3 min read
Outlook 2007 styled expandable and collapsible panels and panel collections for grouping collections of controls.


The XPander library offers the option to store many user controls in one single document formula. They are optionally visible or non-visible, expanded or collapsed. The controls provide optically the Microsoft Outlook 2007 style with black, silver and blue color schemes. They also provide other styles. The included ToolStripRenderers offer some other opportunities. All the controls support visual designer, smart tag and RightToLeft features. It contains the following components.


The panel is a control that contains other controls. You can use a panel to group collections of controls such as the XPanderPanelList control. On top of the panel, there is the captionbar. This captionbar may contain an image and text. According to its dockstyle and properties, the panel is collapsible and/or closable.





The XPanderPanelList contains XPanderPanels, which are represented by XPanderPanel objects that you can add through the XPanderPanels property. The order of XPanderPanel objects reflects the order in which the xpanderpanels appear in the XPanderPanelList control.



XPanderPanel controls represent the expandable and collapsible panels in XPanderPanelList. The XpanderPanel is a control that contains other controls. You can use an XPanderPanel to group collections of controls such as the XPanderPanelList. The order of xpanderpanels in the XPanderPanelList.XPanderPanels collection reflects the order of xpanderpanels controls. To change the order of tabs in the control, you must change their positions in the collection by removing them and inserting them at new indexes. You can change the xpanderpanel's appearance. For example, to make it appear flat, set the CaptionStyle property to CaptionStyle.Flat.

On top of the XPanderPanel, there is the captionbar. This captionbar may contain an image and text. According to its properties, the panel can be closed.



This represents a splitter control that enables the user to resize docked controls. As different from the System.Windows.Forms.Splitter, the splitter supports a transparent background color.


A splitter can be attached to a panel. If the visibility of the panel changes, the visibility of the splitter changes too.


All the panelcolors and properties are customizable and changeable with the visual designer.



If you want to expand a XPanderPanel in the Visual Designer, please click the captionbar.


When the RightToLeft property value is set to RightToLeft.Yes, the horizontal alignment of the control's elements are reversed.


Using the Code

Right click on the toolbox and choose add/remove items..., there you browse for the BSE.Windows.Forms.dll and press OK. All the controls will be added in the ToolBox under "My User Controls". Set BSE.Windows.Test as StartUp Project.

Using the RightToLeft Feature in the Test Sample

Open the Program.cs file in the BSE.Windows.Test project and remove the following comments:

static void Main()
    //// if you want to use the RightToLeft demo,
    //// please remove these comments
    //CultureInfo currentCulture = new CultureInfo
    // (BSE.Windows.Test.Properties.Settings.Default.Language);
    //Thread.CurrentThread.CurrentCulture = currentCulture;
    //Thread.CurrentThread.CurrentUICulture = currentCulture;


    //// if you want to use the RightToLeft demo,
    //// please remove these comments
    //using (CCountrySelectionForm form = new CCountrySelectionForm())

    Application.Run(new Form1());

Select the ar-EG culture name for the Arabic (Egypt) culture:


Class Diagrams



Panel and XPanderPanel


Code Examples

Using the ToolstripProfessionalRenderer and the PanelsettingsManager at runtime:

public class Form2 : Form
	private BSE.Windows.Forms.Panel panel1;
	public Form2()
		// Create and initialize a Panel.
		this.panel1 = new BSE.Windows.Forms.Panel();
		this.panel1.Text = "panel1";
		// Set the panel background.
		this.panel1.ShowTransparentBackground = false;
		// Set the panel's DockStyle to DockStyle.Fill
		this.panel1.Dock = DockStyle.Fill;
		// Add the panel to the form

		// Create and initialize a ToolStripProfessionalRenderer.
		ToolStripProfessionalRenderer renderer = 
			new BSE.Windows.Forms.Office2007Renderer();
		// Add it to the ToolStripManager.Renderer
		ToolStripManager.Renderer = renderer;

		// Get the ProfessionalColorTable colorTable for the current renderer.
		BSE.Windows.Forms.ProfessionalColorTable colorTable = 
		    renderer.ColorTable as BSE.Windows.Forms.ProfessionalColorTable;
		if (colorTable != null)
			// Get the PanelColors panelColorTable for the 
			// current  colortable.
			BSE.Windows.Forms.PanelColors panelColorTable = 
			if (panelColorTable != null)
				// Set the panel properties for the form 
				// controls collection
				SetPanelProperties(this.Controls, panelColorTable);

Adaption of the Panel Colors

Create a colortable that derives from BSE.Windows.Forms.PanelColors and overwrite the protected method InitColors:

public class YourPanelColors : PanelColorsOffice
    protected override void InitColors(Dictionary<panelcolors.knowncolors>, rgbTable)
        rgbTable[KnownColors.BorderColor] = Color.FromArgb(101, 147, 207);
        rgbTable[KnownColors.InnerBorderColor] = Color.White;
        rgbTable[KnownColors.PanelCaptionCloseIcon] = Color.Black;
        rgbTable[KnownColors.PanelCaptionExpandIcon] = Color.FromArgb(21, 66, 139);
        rgbTable[KnownColors.PanelCaptionGradientBegin] = 
					Color.FromArgb(227, 239, 255);
        rgbTable[KnownColors.PanelCaptionGradientEnd] = 
					Color.FromArgb(173, 209, 255);
        rgbTable[KnownColors.PanelCaptionGradientMiddle] = 
					Color.FromArgb(199, 224, 255);
        rgbTable[KnownColors.PanelContentGradientBegin] = 
					Color.FromArgb(227, 239, 255);
        rgbTable[KnownColors.PanelContentGradientEnd] = 
					Color.FromArgb(227, 239, 255);
        rgbTable[KnownColors.PanelCaptionText] = Color.FromArgb(22, 65, 139);
        rgbTable[KnownColors.PanelCollapsedCaptionText] = 
					Color.FromArgb(21, 66, 139);
        rgbTable[KnownColors.XPanderPanelBackColor] = Color.Transparent;
        rgbTable[KnownColors.XPanderPanelCaptionCloseIcon] = Color.Black;
        rgbTable[KnownColors.XPanderPanelCaptionExpandIcon] = 
					Color.FromArgb(21, 66, 139);
        rgbTable[KnownColors.XPanderPanelCaptionText] = Color.FromArgb(21, 66, 139);
        rgbTable[KnownColors.XPanderPanelCaptionGradientBegin] = 
					Color.FromArgb(227, 239, 255);
        rgbTable[KnownColors.XPanderPanelCaptionGradientEnd] = 
					Color.FromArgb(199, 224, 255);
        rgbTable[KnownColors.XPanderPanelCaptionGradientMiddle] = 
					Color.FromArgb(173, 209, 255);
        rgbTable[KnownColors.XPanderPanelFlatCaptionGradientBegin] = 
					Color.FromArgb(214, 232, 255);
        rgbTable[KnownColors.XPanderPanelFlatCaptionGradientEnd] = 
					Color.FromArgb(253, 253, 254);
}    </panelcolors.knowncolors>

Or you may set the ColorScheme property to ColorScheme.Custom and fill the CustomColors properties with your colors.


  • Thanks to Phil. Wright for his Office 2007 ToolStrip Renderer. That gave me an insight into toolstrip rendering.
  • Thanks to Bernhard Jenny for many tips.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Uwe Eichkorn
Switzerland Switzerland
No Biography provided

Comments and Discussions

QuestionXPanderControls in VS 2017 Pin
Member 1343314428-Sep-17 1:28
MemberMember 1343314428-Sep-17 1:28 
GeneralMy vote of 5 Pin
JNDIONYSIM12-May-14 22:23
MemberJNDIONYSIM12-May-14 22:23 
Questionbug ... when i add a lot of xpanderPanel in xpanderListPanel Pin
Ehsanf37-Mar-14 20:13
MemberEhsanf37-Mar-14 20:13 
QuestionCaption image Pin
Member 882350017-Dec-12 8:31
MemberMember 882350017-Dec-12 8:31 
BugA Bug? when i add lots of sub panel, the property of AutoScroll is failed. Pin
IcyJiang7-Aug-12 21:04
MemberIcyJiang7-Aug-12 21:04 
Questiondowloading Pin
khanzzirfan15-Jun-12 20:54
Memberkhanzzirfan15-Jun-12 20:54 
AnswerRe: dowloading Pin
Uwe Eichkorn18-Jun-12 3:45
MemberUwe Eichkorn18-Jun-12 3:45 
BugBug Solution For XpanderPanelCollection.Insert method Pin
terminal_gr17-May-12 7:41
Memberterminal_gr17-May-12 7:41 
QuestionAlpha blending... Pin
93Current6-Jan-12 0:24
Member93Current6-Jan-12 0:24 
AnswerRe: Alpha blending... Pin
93Current6-Jan-12 8:20
Member93Current6-Jan-12 8:20 
QuestionVB version Pin
dherrmann18-Oct-11 10:46
Memberdherrmann18-Oct-11 10:46 
AnswerRe: VB version Pin
Uwe Eichkorn25-Oct-11 2:22
MemberUwe Eichkorn25-Oct-11 2:22 
GeneralRe: VB version Pin
dherrmann25-Oct-11 6:44
Memberdherrmann25-Oct-11 6:44 
Question.NET 4.0 Pin
Matt U.30-Aug-11 8:58
MemberMatt U.30-Aug-11 8:58 
QuestionIs it or isn't it? Pin
Johnny J.2-Aug-11 14:05
professionalJohnny J.2-Aug-11 14:05 
AnswerRe: Is it or isn't it? Pin
Johnny J.21-Sep-11 3:24
professionalJohnny J.21-Sep-11 3:24 
Questionadd gradient to content panels? Pin
roger_2721-Jul-11 8:14
Memberroger_2721-Jul-11 8:14 
QuestionExpand to left/right Direction Pin
Xennon114-Jul-11 3:16
MemberXennon114-Jul-11 3:16 
QuestionChm file can't open Pin
nrdsp13-Jul-11 1:13
Membernrdsp13-Jul-11 1:13 
AnswerRe: Chm file can't open Pin
Johnny J.2-Aug-11 14:06
professionalJohnny J.2-Aug-11 14:06 
GeneralProblems with Install on Visual C# 2008 Express Pin
hsfan17-May-11 4:20
Memberhsfan17-May-11 4:20 
GeneralMy vote of 5 Pin
rahul_raut17-May-11 1:13
Memberrahul_raut17-May-11 1:13 
GeneralMy vote of 5 Pin
lianghuating12-May-11 18:18
Memberlianghuating12-May-11 18:18 
QuestionCan I use it in commercial product? Pin
Southmountain25-Nov-10 9:27
MemberSouthmountain25-Nov-10 9:27 
AnswerRe: Can I use it in commercial product? Pin
Uwe Eichkorn10-Dec-10 23:14
MemberUwe Eichkorn10-Dec-10 23:14 

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.