Click here to Skip to main content
Click here to Skip to main content

Group Panel

, 6 Aug 2003
Rate this:
Please Sign up or sign in to vote.
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:

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:

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

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

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

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

// 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:

this.groupPanel.SelectedIndexChanged
             += new System.EventHandler(this.groupPanel_SelectedIndexChanged);
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:

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:

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

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

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.

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

Share

About the Author

Teo
Web Developer
United States United States
No Biography provided

Comments and Discussions

 
QuestionAdded Control not show in tab pages Pinmembermanskkksii29-Jun-11 0:38 
GeneralNot working on VS 2005, fixed. PinmemberTeo22-Jul-08 15:50 
QuestionWhy Controls Not Showing in vs2005 & .net2 PinmemberMember 192464222-Jul-08 6:10 
AnswerRe: Why Controls Not Showing in vs2005 & .net2 PinmemberTeo22-Jul-08 15:52 
QuestionControls Not Showing? Pinmemberananduk7631-Mar-08 7:01 
AnswerRe: Controls Not Showing? PinmemberTeo31-Mar-08 8:33 
GeneralRe: Controls Not Showing? Pinmemberananduk7631-Mar-08 9:14 
GeneralRe: Controls Not Showing? PinmemberTeo22-Jul-08 15:52 
Questionworking version for vs2005 .net 2.0 ? PinmemberPyrro4-Nov-06 10:50 
GeneralCan't get any controls to show in VS2005 Pinmembergafferuk16-Sep-06 21:50 
GeneralRe: Can't get any controls to show in VS2005 PinmemberTeo22-Jul-08 15:53 
Generalimagelist not displaying images Pinmembergafferuk12-Jan-06 12:11 
i add a imageList to my groupPanel but the images are not displaying on the tabs, any ideas?
GeneralRe: imagelist not displaying images PinmemberTeo12-Jan-06 14:48 
GeneralRe: imagelist not displaying images PinmemberTeo22-Jul-08 15:53 
QuestionLicensing? PinmemberEugene Polonsky18-Aug-05 13:07 
AnswerRe: Licensing? PinsussAnonymous18-Aug-05 14:00 
GeneralRe: Licensing? PinmemberEugene Polonsky18-Aug-05 14:07 
Generaldoes not work on 2005 PinmemberSamar Aarkotti9-Mar-05 8:09 
GeneralRe: does not work on 2005 PinmemberTeo9-Mar-05 9:58 
GeneralRe: does not work on 2005 PinmemberEugene Polonsky18-Aug-05 13:06 
GeneralRe: does not work on 2005 PinmemberEugene Polonsky18-Aug-05 15:34 
QuestionRe: does not work on 2005 Pinmemberfarawaylace61317-Sep-07 23:16 
GeneralRe: does not work on 2005 PinmemberTeo22-Jul-08 15:54 
GeneralObject reverence null PinmemberDC3Dreamer15-Feb-04 3:47 
GeneralRe: Object reverence null PinmemberTeo15-Feb-04 4:05 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web03 | 2.8.140827.1 | Last Updated 7 Aug 2003
Article Copyright 2003 by Teo
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid