Click here to Skip to main content
15,888,802 members
Articles / Programming Languages / C#
Article

XPanderControls

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

Introduction

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.

BSE.Windows.Forms.Panel

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.

panelexpanded.png

panelcollapsed.png

panelclosed.png

BSE.Windows.Forms.XPanderPanelList

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.

xpanderpanellist.png

BSE.Windows.Forms.XPanderPanel

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.

xpanderpanellist2.png

BSE.Windows.Forms.Splitter

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.

panelsplitter.png

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

splitter.png

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

xpandercontrolsdesigner.png

paneldesigner.png

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

xpanderpanelexpand.png

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

xpanderpanellistrighttoleft.png

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:

C#
[STAThread]
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;

    Application.EnableVisualStyles();
    Application.SetCompatibleTextRenderingDefault(false);

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

    Application.Run(new Form1());
}

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

xpandercontrols5.png

Class Diagrams

XPanderPanelList

xpanderpanellistclass.png

Panel and XPanderPanel

panelsclass.png

Code Examples

Using the ToolstripProfessionalRenderer and the PanelsettingsManager at runtime:

C#
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
		this.Controls.Add(this.panel1);

		// 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 = 
						colorTable.PanelColorTable;
			if (panelColorTable != null)
			{
				// Set the panel properties for the form 
				// controls collection
				BSE.Windows.Forms.PanelSettingsManager.
				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:

C#
public class YourPanelColors : PanelColorsOffice
{
    protected override void InitColors(Dictionary<panelcolors.knowncolors>, rgbTable)
    {
        base.InitColors(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.

Credits

  • 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.

License

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


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

Comments and Discussions

 
AnswerRe: How to change Panel color using Office2007BlueColorTable Pin
Uwe Eichkorn19-Jul-09 21:01
Uwe Eichkorn19-Jul-09 21:01 
GeneralThanks ! Great Work ! Pin
igetorix31-May-09 3:07
igetorix31-May-09 3:07 
GeneralSimply awesome !!! Pin
Tamal Saha13-May-09 19:01
Tamal Saha13-May-09 19:01 
GeneralThanks Pin
Dalibor Savanovic9-Mar-09 5:08
Dalibor Savanovic9-Mar-09 5:08 
GeneralPanel with Autoscroll Pin
WayneSchou24-Feb-09 13:29
WayneSchou24-Feb-09 13:29 
QuestionUSE FREE Pin
Alessandro Arnoldi29-Dec-08 3:12
Alessandro Arnoldi29-Dec-08 3:12 
GeneralSaving and restoring positions Pin
Tom Holt2-Dec-08 5:05
Tom Holt2-Dec-08 5:05 
GeneralRe: Saving and restoring positions Pin
Uwe Eichkorn2-Dec-08 10:15
Uwe Eichkorn2-Dec-08 10:15 
Hi Tom,

in the Panel.OnCreateControl Method, I save the RestoreBounds values.
These RestoreBounds values are necessary for the panel if it's state changes from collapse to expand.

If you sets the Panel.Expand property in the form constructor, the Panel.OnCreateControl event is not yet raised.
You have to set the Panel.Expand property in the Form.Load event. Then it should work

Example

public partial class Form1 : Form
{
    private FormSettings m_formSettings;

    public Form1()
    {
        InitializeComponent();
    }

    private void Form1_Load(object sender, EventArgs e)
    {
        this.m_formSettings = new FormSettings();

        bool bPanel1Expand = this.m_formSettings.Panel1Expand;
        if (bPanel1Expand == false)
        {
            panel1.Width = this.m_formSettings.Panel1Bounds.Width;
            panel1.Expand = bPanel1Expand;
        }
        else
        {
            if (this.m_formSettings.Panel1Bounds != Rectangle.Empty)
            {
                panel1.Width = this.m_formSettings.Panel1Bounds.Width;
            }
        }
        panel1.Visible = this.m_formSettings.Panel1Visible;
    }

    private void Form1_FormClosing(object sender, FormClosingEventArgs e)
    {
        if (this.m_formSettings != null)
        {
            bool bExpandPanel1 = panel1.Expand;
            this.m_formSettings.Panel1Expand = panel1.Expand;
            this.m_formSettings.Panel1Visible = panel1.Visible;
            if (bExpandPanel1 == false)
            {
                this.m_formSettings.Panel1Bounds = panel1.RestoreBounds;
            }
            else
            {
                this.m_formSettings.Panel1Bounds = panel1.ClientRectangle;
            }
            this.m_formSettings.Save();
        }
    }
}


//Application settings wrapper class
public class FormSettings : ApplicationSettingsBase
{
    [UserScopedSetting()]
    [DefaultSettingValue("true")]
    public bool Panel1Expand
    {
        get { return ((bool)this["Panel1Expand"]); }
        set { this["Panel1Expand"] = (bool)value; }
    }
    [UserScopedSetting()]
    [DefaultSettingValue("true")]
    public bool Panel1Visible
    {
        get { return ((bool)this["Panel1Visible"]); }
        set { this["Panel1Visible"] = (bool)value; }
    }
    [UserScopedSetting()]
    public Rectangle Panel1Bounds
    {
        get
        {
            if (this["Panel1Bounds"] == null)
            {
                return Rectangle.Empty;
            }
            else
            {
                return ((Rectangle)this["Panel1Bounds"]);
            }
        }
        set { this["Panel1Bounds"] = (Rectangle)value; }
    }
}


Regards Uwe
QuestionHow about supportting docking and drag-drop? Pin
Jeason Zhao1-Dec-08 16:23
Jeason Zhao1-Dec-08 16:23 
AnswerRe: How about supportting docking and drag-drop? Pin
Uwe Eichkorn1-Dec-08 20:43
Uwe Eichkorn1-Dec-08 20:43 
GeneralSo beautyful those controls,I need another version! Pin
topmvp17-Nov-08 19:24
topmvp17-Nov-08 19:24 
QuestionKeeping panels open while expanding others Pin
xJorDyx24-Aug-08 11:44
xJorDyx24-Aug-08 11:44 
AnswerRe: Keeping panels open while expanding others Pin
Uwe Eichkorn8-Sep-08 3:53
Uwe Eichkorn8-Sep-08 3:53 
GeneralCouldn't find the dll in the download file Pin
Member 148262031-Jul-08 2:34
Member 148262031-Jul-08 2:34 
GeneralRe: Couldn't find the dll in the download file Pin
Uwe Eichkorn31-Jul-08 2:49
Uwe Eichkorn31-Jul-08 2:49 
GeneralXpander Controls ported to VB.net [modified] Pin
BartSystems Software Components Engineering16-Jun-08 2:10
BartSystems Software Components Engineering16-Jun-08 2:10 
GeneralRe: Xpander Controls ported to VB.net Pin
Coreo3-Jul-08 10:12
Coreo3-Jul-08 10:12 
GeneralRe: Xpander Controls ported to VB.net Pin
BartSystems Software Components Engineering8-Jul-08 2:15
BartSystems Software Components Engineering8-Jul-08 2:15 
GeneralGreat Job! Pin
bdprogrammer16-Apr-08 6:37
bdprogrammer16-Apr-08 6:37 
GeneralPanel rendering setting change works on Vista but not on XP Pin
ejuste15-Mar-08 23:41
ejuste15-Mar-08 23:41 
GeneralRe: Panel rendering setting change works on Vista but not on XP Pin
ejuste16-Mar-08 0:05
ejuste16-Mar-08 0:05 
GeneralRe: Panel rendering setting change works on Vista but not on XP Pin
Uwe Eichkorn16-Mar-08 21:26
Uwe Eichkorn16-Mar-08 21:26 
GeneralRe: Panel rendering setting change works on Vista but not on XP Pin
ejuste17-Mar-08 10:41
ejuste17-Mar-08 10:41 
GeneralRe: Panel rendering setting change works on Vista but not on XP Pin
Uwe Eichkorn17-Mar-08 22:32
Uwe Eichkorn17-Mar-08 22:32 
Generalcan't run under VS2005 WinXP Pin
BillWoodruff22-Jan-08 9:25
professionalBillWoodruff22-Jan-08 9:25 

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.