Archive

Archive for February, 2011

Accordion control

February 21, 2011 17 comments

Using the Expander control that I posted a week ago, I created a Accordion control. It’s in C# and use WinForm.

The source code is available here.

Here is a image showing the Accordion:

In this example, there is 3 expander. Each expander use a Label control for the header and content section.
You can plug your own control easily.


A other rich panel

Categories: C#

Window form Expander

February 16, 2011 26 comments

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#