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

Group Panel

Rate me:
Please Sign up or sign in to vote.
4.72/5 (27 votes)
6 Aug 20033 min read 247.7K   3.2K   138   41
Group control with MS Messenger Style

Introduction

I just wanted to write a small and light control to arrange several controls on groups, saving space on the form. I really liked the MS Messenger’s way to group actions and contacts, so I decided to emulate its look and feel.

Using the Group Panel

The Tab Page Panels associated to the control can not be created at design time (there is no designer yet) so they have to be created by code at run time. This is not an issue to me because I actually load the panels from entries in a database table.

To add the tab page panels:

C#
Morell.GroupPanel.TabPage t0 = new Morell.GroupPanel.TabPage("Group 00");
Morell.GroupPanel.TabPage t1 = new Morell.GroupPanel.TabPage("Group 01");

After creating the Tab page panels, a control must be associated to each tab page:

C#
t0.AddControl(treeView);
t1.AddControl(txt0);

To add some graphical effects, you can select the images to show and a color gradient:

C#
// Configure the icons to use
groupPanel.UpImage = Image.FromFile("up.bmp");
groupPanel.DownImage = Image.FromFile("down.bmp");

These two images are located in the folder "GroupPanel\Test\bin\Debug".

When selecting images, you have to set the TransparentColor property to the background color image. I normally use System.Drawing.Color.Magenta.

C#
// Create a color gradient
groupPanel.ColorLeft = SystemColors.ControlDarkDark;
groupPanel.ColorRight = SystemColors.ControlLight;

Finally, add the tab pages to the control panel and select the initial group that you want to show.

C#
// Add the tab pages to the group panel control
groupPanel.TabPages.AddRange(new Morell.GroupPanel.TabPage[] 
                                                   {t0, t1, t2, t3, t4, t5});
 
// Set the first tab to be shown
groupPanel.SelectedIndex = 0;

Other Features

Look and Feel

HotTrack. Set it to true so the text is underlined when the mouse passes over it.
HotTrackColor. Color to display the text while hot tracking.
TabHeight. The height of the panel title area.

Selected Tab Page and Selected Index Changed

When the user changes the selected tab page, you can refresh other controls or execute an action based on the user selection:

C#
this.groupPanel.SelectedIndexChanged
             += new System.EventHandler(this.groupPanel_SelectedIndexChanged);
C#
private void groupPanel_SelectedIndexChanged(object sender, 
                                             System.EventArgs e)
{
 int index = groupPanel.SelectedIndex;
 string s = "Selected tab: " + groupPanel.TabPages[index].Text + " Index: "
             + index;
}

Labels Editing

The text for each tab page can be edited by the user by invoking the BeginEdit() method:

C#
groupPanel.TabPages[index].BeginEdit();

This will start the text editing for the selected tab page.

When the user presses enter, finishing the editing, the AfterLabelEdit event is raised so you can cancel if necessary. The maximum text length is controlled with the property LabelMaxLenght.

Ordering the Tab Pages

You can invoke the methods:

groupPanel.MoveDown(groupPanel.TabPages[index]);
groupPanel.MoveUp(groupPanel.TabPages[index]);

Suggestion

With the group panel control you can dynamically Add, Remove, change the text, or rearrange the tab pages orders. Allow the user to use this functionality with a popup menu, detecting the tab page where the mouse was pressed.

You can hook the TabPageMouseUp event:

C#
this.groupPanel.TabPageMouseUp += 
   new System.Windows.Forms.MouseEventHandler(this.groupPanel_TabPageMouseUp);

And get the selected tab page to display the context menu:

C#
private void groupPanel_TabPageMouseUp(object sender, 
                                      System.Windows.Forms.MouseEventArgs e)
{
    if(e.Button == MouseButtons.Right)
    {
        // Menu handling........
    }
}

Remember to enable/disable the "Move Up" and "Move Down" options based on the selected tab page index. Calling "Move Up" on the tab page index 0 will raise an exception. The same goes for calling "Move Down" on the last tab page.

Points of Interest

I have found a bug (or at least I think so) with the treeview. After adding a TreeView to the panel control by code, a horizontal scroll bar appears at the bottom of the treeView, even if it is not necessary. The only way I found to remove this, was setting the control's width to 0; and because its Dock property is set to DockStyle.Fill it is displayed correctly.

C#
TabPage.cs
public void AddControl(Control control)
{
    // Set the reference to the control
    _childControl = control;

    // Add the control to the controls collection
    this.Controls.Add(_childControl);
    _childControl.Dock = DockStyle.Fill;
            
    // BUG: Detected on Treeview.
    // If the control is not Hidden and Shown, the treeview 
    // always presents and horizontal scroll bar that is not necessary.
    // If the Windows XP style is on, the scrollbar does not have the XP look.
    _childControl.Width = 0;
}

Sample Image - Group_Panel.jpg

If the _childControl.Width is not changed, a scrollbar is displayed. Also notice that the scroll bar is shown with the standard look and feel, not Windows XP's.

History

August 7, 2003 - version 1.0

  • Initial version.

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
Teo
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

 
QuestionGroupPanel Pin
drago112-Sep-18 14:35
drago112-Sep-18 14:35 
Questiongroup panel Pin
hamidhakimi17-Feb-15 19:59
hamidhakimi17-Feb-15 19:59 
QuestionAdded Control not show in tab pages Pin
manishsingh12jan29-Jun-11 0:38
manishsingh12jan29-Jun-11 0:38 
GeneralNot working on VS 2005, fixed. Pin
Teo22-Jul-08 15:50
Teo22-Jul-08 15:50 
QuestionWhy Controls Not Showing in vs2005 & .net2 Pin
Member 192464222-Jul-08 6:10
Member 192464222-Jul-08 6:10 
AnswerRe: Why Controls Not Showing in vs2005 & .net2 Pin
Teo22-Jul-08 15:52
Teo22-Jul-08 15:52 
QuestionControls Not Showing? Pin
ananduk7631-Mar-08 7:01
ananduk7631-Mar-08 7:01 
AnswerRe: Controls Not Showing? Pin
Teo31-Mar-08 8:33
Teo31-Mar-08 8:33 
GeneralRe: Controls Not Showing? Pin
ananduk7631-Mar-08 9:14
ananduk7631-Mar-08 9:14 
GeneralRe: Controls Not Showing? Pin
Teo22-Jul-08 15:52
Teo22-Jul-08 15:52 
Questionworking version for vs2005 .net 2.0 ? Pin
Pyrro4-Nov-06 10:50
Pyrro4-Nov-06 10:50 
GeneralCan't get any controls to show in VS2005 Pin
gafferuk16-Sep-06 21:50
gafferuk16-Sep-06 21:50 
GeneralRe: Can't get any controls to show in VS2005 Pin
Teo22-Jul-08 15:53
Teo22-Jul-08 15:53 
Please read new message "Not working on VS 2005, fixed." I hope this solve the issue.

Regards,

Teo
Generalimagelist not displaying images Pin
gafferuk12-Jan-06 12:11
gafferuk12-Jan-06 12:11 
GeneralRe: imagelist not displaying images Pin
Teo12-Jan-06 14:48
Teo12-Jan-06 14:48 
GeneralRe: imagelist not displaying images Pin
Teo22-Jul-08 15:53
Teo22-Jul-08 15:53 
QuestionLicensing? Pin
Eugene Polonsky18-Aug-05 13:07
Eugene Polonsky18-Aug-05 13:07 
AnswerRe: Licensing? Pin
Anonymous18-Aug-05 14:00
Anonymous18-Aug-05 14:00 
GeneralRe: Licensing? Pin
Eugene Polonsky18-Aug-05 14:07
Eugene Polonsky18-Aug-05 14:07 
Generaldoes not work on 2005 Pin
Samar Aarkotti9-Mar-05 8:09
Samar Aarkotti9-Mar-05 8:09 
GeneralRe: does not work on 2005 Pin
Teo9-Mar-05 9:58
Teo9-Mar-05 9:58 
GeneralRe: does not work on 2005 Pin
Eugene Polonsky18-Aug-05 13:06
Eugene Polonsky18-Aug-05 13:06 
GeneralRe: does not work on 2005 Pin
Eugene Polonsky18-Aug-05 15:34
Eugene Polonsky18-Aug-05 15:34 
QuestionRe: does not work on 2005 Pin
farawaylace61317-Sep-07 23:16
farawaylace61317-Sep-07 23:16 
GeneralRe: does not work on 2005 Pin
Teo22-Jul-08 15:54
Teo22-Jul-08 15:54 

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.