Home > C# > Window form Expander

Window form Expander

I wrote a expander using WinForm in C#

The source code is available here.

The Expander is divided in two regions: Header and Content. They take a Control, so you can create your own header control and put any control that you want into the content region.

Here is a image of a Expander created using the Expander control:

The header and the content are basic Labels.

The code to create this expander is the following:

            Expander expander = new Expander();
            expander.Size = new Size(250, 400);
            expander.Left = 350;
            expander.Top = 10;
            expander.BorderStyle = BorderStyle.FixedSingle;

            ExpanderHelper.CreateLabelHeader(expander, "Header", SystemColors.ActiveBorder, Properties.Resources.Collapse, Properties.Resources.Expand);

            Label labelContent = new Label();
            labelContent.Text = "This is the content part.\r\n\r\nYou can put any Controls here. You can use a Panel, a CustomControl, basically, anything you want.";
            labelContent.Size = new System.Drawing.Size(expander.Width, 80);
            expander.Content = labelContent;

            this.Controls.Add(expander);

This sample use the ExpanderHelper class to create a header label.

You can create your own header control. The next sample create a Label and connect the Label.Click event to toggle the expander and change the background color depending on the expander state.

Expanded:

Collapsed:

            Expander expander = new Expander();
            expander.Size = new Size(250, 120);
            expander.Left = 350;
            expander.Top = 230;
            expander.BorderStyle = BorderStyle.FixedSingle;

            Label headerLabel = new Label();
            headerLabel.Text = "Click me";
            headerLabel.AutoSize = false;
            headerLabel.Font = new Font(headerLabel.Font, FontStyle.Bold);
            headerLabel.TextAlign = ContentAlignment.MiddleLeft;
            headerLabel.BackColor = SystemColors.ActiveBorder;

            headerLabel.Click += delegate
            {
                expander.Toggle();
                if (expander.Expanded)
                    headerLabel.BackColor = SystemColors.ActiveBorder;
                else
                    headerLabel.BackColor = SystemColors.ActiveCaption;
            };

            expander.Header = headerLabel;

            Label labelContent = new Label();
            labelContent.Text = "You are not limited to use the ExpanderHelper to create your header. Here is a example with a custom code and custom click event handler that change the header backcolor when the expander state change.";
            labelContent.Size = new System.Drawing.Size(expander.Width, 75);
            expander.Content = labelContent;

            this.Controls.Add(expander);

Expander State

The expander offer 2 events: StateChanging and StateChanged.
You can use the StateChanging to prevent the expander to collapse or to expand.


A other rich panel

Categories: C#
  1. JStinebaugh
    June 21, 2011 at 8:18 am | #1

    Does this require the 4.0 framework or can it be used with a lower version?

  2. jfblier
    June 21, 2011 at 5:02 pm | #2

    I created the classes using VS2010 and .NET 4. But you can create a new project in a other version of .net and copy the classes into your new project. It should work.

  3. Anonymous
    August 14, 2011 at 10:28 pm | #3

    Works ONLY on Framework 4.0

  4. Anonymous
    December 10, 2011 at 4:05 pm | #4

    This is very helpful, thank you!

  5. Anonymous
    December 19, 2011 at 4:35 pm | #5

    Actually it works on .NET 3.5 as well. It just needs the Microsoft.CSharp reference removed and the resources file deleted and rebuilt.

  6. Anonymous
    December 21, 2011 at 1:20 am | #6

    its not wokring on dotnet 3.5

  1. February 17, 2011 at 6:56 am | #1
  2. February 17, 2011 at 6:57 am | #2
  3. February 17, 2011 at 6:57 am | #3
  4. March 26, 2011 at 5:32 am | #4

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.