Click here to Skip to main content
11,496,146 members (681 online)
Click here to Skip to main content

Group Panel

, 6 Aug 2003 203.3K 2K 133
Group control with MS Messenger Style
The site is currently in read-only mode for maintenance. Posting of new items will be available again shortly.

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

 
Questiongroup panel Pin
hamidhakimi17-Feb-15 20:59
memberhamidhakimi17-Feb-15 20:59 
QuestionAdded Control not show in tab pages Pin
manskkksii29-Jun-11 1:38
membermanskkksii29-Jun-11 1:38 
GeneralNot working on VS 2005, fixed. Pin
Teo22-Jul-08 16:50
memberTeo22-Jul-08 16:50 
QuestionWhy Controls Not Showing in vs2005 & .net2 Pin
Member 192464222-Jul-08 7:10
memberMember 192464222-Jul-08 7:10 
AnswerRe: Why Controls Not Showing in vs2005 & .net2 Pin
Teo22-Jul-08 16:52
memberTeo22-Jul-08 16:52 
QuestionControls Not Showing? Pin
ananduk7631-Mar-08 8:01
memberananduk7631-Mar-08 8:01 
AnswerRe: Controls Not Showing? Pin
Teo31-Mar-08 9:33
memberTeo31-Mar-08 9:33 
GeneralRe: Controls Not Showing? Pin
ananduk7631-Mar-08 10:14
memberananduk7631-Mar-08 10:14 
GeneralRe: Controls Not Showing? Pin
Teo22-Jul-08 16:52
memberTeo22-Jul-08 16:52 
Questionworking version for vs2005 .net 2.0 ? Pin
Pyrro4-Nov-06 11:50
memberPyrro4-Nov-06 11:50 
GeneralCan't get any controls to show in VS2005 Pin
gafferuk16-Sep-06 22:50
membergafferuk16-Sep-06 22:50 
GeneralRe: Can't get any controls to show in VS2005 Pin
Teo22-Jul-08 16:53
memberTeo22-Jul-08 16:53 
Generalimagelist not displaying images Pin
gafferuk12-Jan-06 13:11
membergafferuk12-Jan-06 13:11 
GeneralRe: imagelist not displaying images Pin
Teo12-Jan-06 15:48
memberTeo12-Jan-06 15:48 
GeneralRe: imagelist not displaying images Pin
Teo22-Jul-08 16:53
memberTeo22-Jul-08 16:53 
QuestionLicensing? Pin
Eugene Polonsky18-Aug-05 14:07
memberEugene Polonsky18-Aug-05 14:07 
AnswerRe: Licensing? Pin
Anonymous18-Aug-05 15:00
sussAnonymous18-Aug-05 15:00 
GeneralRe: Licensing? Pin
Eugene Polonsky18-Aug-05 15:07
memberEugene Polonsky18-Aug-05 15:07 
Generaldoes not work on 2005 Pin
Samar Aarkotti9-Mar-05 9:09
memberSamar Aarkotti9-Mar-05 9:09 
GeneralRe: does not work on 2005 Pin
Teo9-Mar-05 10:58
memberTeo9-Mar-05 10:58 
GeneralRe: does not work on 2005 Pin
Eugene Polonsky18-Aug-05 14:06
memberEugene Polonsky18-Aug-05 14:06 
GeneralRe: does not work on 2005 Pin
Eugene Polonsky18-Aug-05 16:34
memberEugene Polonsky18-Aug-05 16:34 
QuestionRe: does not work on 2005 Pin
farawaylace61318-Sep-07 0:16
memberfarawaylace61318-Sep-07 0:16 
GeneralRe: does not work on 2005 Pin
Teo22-Jul-08 16:54
memberTeo22-Jul-08 16:54 
GeneralObject reverence null Pin
DC3Dreamer15-Feb-04 4:47
memberDC3Dreamer15-Feb-04 4:47 
GeneralRe: Object reverence null Pin
Teo15-Feb-04 5:05
memberTeo15-Feb-04 5:05 
Hi DC3Dreamer,

Initially I created this project with .NET 2002. I have just tested it with .NET 2003.
I commented the following lines as you stated:

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

In Form1.cs (Test project).

I ran the app several times from the IDE and as stand alone, debug and release mode, but can not reproduce the error you are reporting.

Can you give me more details on the steps to reproduce the exception?


Thanks for the comments.


Teo

GeneralRe: Object reference null Pin
DC3Dreamer16-Feb-04 12:51
memberDC3Dreamer16-Feb-04 12:51 
GeneralRe: Object reverence null Pin
DC3Dreamer16-Feb-04 12:54
memberDC3Dreamer16-Feb-04 12:54 
GeneralDesign-time adding of pages Pin
CSharpSupreme14-Oct-03 20:23
memberCSharpSupreme14-Oct-03 20:23 
GeneralRe: Design-time adding of pages Pin
Teo29-Oct-03 1:42
memberTeo29-Oct-03 1:42 
GeneralControl Disapears as Dialog Pin
rlujo9-Oct-03 10:11
memberrlujo9-Oct-03 10:11 
GeneralRe: Control Disapears as Dialog Pin
Teo29-Oct-03 1:38
memberTeo29-Oct-03 1:38 
GeneralThe TreeView and Applying the WinXP Style Pin
Heath Stewart18-Aug-03 4:44
editorHeath Stewart18-Aug-03 4:44 
GeneralRe: The TreeView and Applying the WinXP Style Pin
Teo19-Aug-03 3:44
memberTeo19-Aug-03 3:44 
GeneralRe: The TreeView and Applying the WinXP Style Pin
programace3-Jan-04 23:11
memberprogramace3-Jan-04 23:11 
GeneralRe: The TreeView and Applying the WinXP Style Pin
FaxedHead30-Aug-05 19:49
memberFaxedHead30-Aug-05 19:49 
GeneralRe: The TreeView and Applying the WinXP Style Pin
FaxedHead30-Aug-05 21:22
memberFaxedHead30-Aug-05 21:22 
Generalsources Pin
leijtens10-Aug-03 20:49
memberleijtens10-Aug-03 20:49 
GeneralRe: sources Pin
Teo10-Aug-03 21:52
memberTeo10-Aug-03 21:52 
GeneralRe: sources Pin
Teo11-Aug-03 9:10
memberTeo11-Aug-03 9:10 

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 | Terms of Use | Mobile
Web03 | 2.8.150520.1 | Last Updated 7 Aug 2003
Article Copyright 2003 by Teo
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid