Click here to Skip to main content
15,891,136 members
Articles / Desktop Programming / Win32

Visual Studio 2005 ToolBox Clone

Rate me:
Please Sign up or sign in to vote.
4.77/5 (12 votes)
3 May 2008CPOL2 min read 90K   3.4K   85   20
A simple clone of the Visual Studio 2005 toolbox using a standard treeview
Image 1

Introduction

This control is a very simple Visual Studio ToolBox control clone. The control itself is just a owner drawn TreeView. Because it is based on a standard treeview, it supports only one style of the Visual Studio Toolbox - the list style.

Background

Many weeks ago, I needed a simple control that looks like the ToolBox in Visual Studio 2005. There're some controls on CodeProject doing stuff like this. But all these controls are too oversized for me. So I wrote my own one...

To create the look and feel of the toolbox, I have just overridden the OnDrawNode method. Depending on the node level, the OnDrawNode method will call the method for root items or sub items. As you can see, there're only two levels possible in this control. An item on level 0 will be a root item and drawn as the darker header items. All subitems (level > 0) will be drawn on level 1 as sub item.

Adding advanced tool tips to the toolbox was a little tricky, because the standard treeview does not support such tool tips. First I had to disable the standard tool tip functionality of the treeview like this:

C#
private const int TVS_NOTOOLTIPS = 0x80;

/// <summary>
/// Disables the tooltip activity for the treenodes.
/// </summary>
protected override CreateParams CreateParams
{
  get
  {
    CreateParams p = base.CreateParams;
    p.Style = p.Style | TVS_NOTOOLTIPS;
    return p;
  }
}

After that, I have implemented a tool tip control which supports the advanced look and feel of the modern tool tips (also used in the original Visual Studio ToolBox).

Using the Code

The handling of this control is quite easy. If you have ever worked with the .NET TreeView control, you should not have any problems with it. But you have to set some properties at this time to let the control look like the Visual Studio ToolBox:

  • Set the DrawMode to OwnerDrawAll
  • Set the FullRowSelect to true
  • Set the HideSelection to false
  • Set the HotTracking to true
  • Set the ItemHeight to 20
  • Add an ImageList

Adding New Groups

C#
// To support the custom tool tips, we
// have to add an enhanced node type to the toolbox.
ToolBox.VSTreeNode newGroup = new ToolBox.VSTreeNode();

newGroup.Text = String.Format("Sample Node {0}", toolBox1.Nodes.Count + 1);

toolBox1.Nodes.Add(newGroup);

Adding New Items to a Group

C#
ToolBox.VSTreeNode newSubItem = new ToolBox.VSTreeNode();

newSubItem.Text =  String.Format("Sample SubItem {0}",
        toolBox1.SelectedNode.Nodes.Count + 1);

// Assuming, that a image list is set.
newSubItem.ImageIndex     = 0;
newSubItem.ToolTipCaption = "Look atg this!";
newSubItem.ToolTipText    = "This is an example ToolTip.";

// It's also possible to add a context menu to a node (root or subitem)
newSubItem.ContextMenuStrip = cmsExample;

// Add the new subitem to the toolbox.
toolBox1.SelectedNode.Nodes.Add(newSubItem);  

Updates

2008/04/03

  • Fixed bug with editing textbox which was displayed over the left blue border in edit mode
  • Fixed bug with wrong behaviour by clicking on the +/- of a group item
  • Added feature to display an item as disabled

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer
Germany Germany
Nothing to say about me..

Comments and Discussions

 
GeneralNice control - but you might want to make a couple small changes Pin
PRMan!!!8-Feb-10 12:52
PRMan!!!8-Feb-10 12:52 
GeneralRe: Nice control - but you might want to make a couple small changes Pin
Popangler9-Feb-10 5:25
Popangler9-Feb-10 5:25 
QuestionTreeview control with varying item height, Pin
prakash Invent1-Jul-09 0:36
prakash Invent1-Jul-09 0:36 
AnswerRe: Treeview control with varying item height, Pin
Popangler9-Feb-10 5:26
Popangler9-Feb-10 5:26 
Generalvb.net Pin
eallenpjcc21-Jun-09 17:32
eallenpjcc21-Jun-09 17:32 
QuestionHow do i connect the attribute and data of the sql database to tree Pin
MillaniaSnow3-Jun-09 0:50
MillaniaSnow3-Jun-09 0:50 
GeneralToolbox at design time in VS2008 Pin
Angelo DeFusco21-Mar-09 6:33
Angelo DeFusco21-Mar-09 6:33 
AnswerRe: Toolbox at design time in VS2008 Pin
Popangler22-Mar-09 1:48
Popangler22-Mar-09 1:48 
Generalexpanding with reluctance... Pin
Petru6616-Oct-08 4:44
Petru6616-Oct-08 4:44 
GeneralPlease Column more more more Pin
Xess15-Jul-08 2:49
Xess15-Jul-08 2:49 
GeneralMake a group bigger Pin
cakirhal26-Jun-08 19:20
cakirhal26-Jun-08 19:20 
GeneralRe: Make a group bigger Pin
Popangler2-Nov-08 1:06
Popangler2-Nov-08 1:06 
QuestionCan i display a full Tree under each group member? Please help Pin
shagunk6514-Feb-08 3:32
shagunk6514-Feb-08 3:32 
GeneralRe: Can i display a full Tree under each group member? Please help Pin
Popangler14-Feb-08 20:40
Popangler14-Feb-08 20:40 
GeneralRe: Can i display a full Tree under each group member? Please help Pin
shagunk6515-Feb-08 8:06
shagunk6515-Feb-08 8:06 
AnswerRe: Can i display a full Tree under each group member? Please help Pin
Popangler16-Feb-08 1:02
Popangler16-Feb-08 1:02 
Hello shagunk65,

1. Yes, you can. But you have to draw the lines by yourself. Just implement the needed code in the drawItem method.
2. Yes, that's alos possible. Create another fonts (like the mGroupHeaderFont). Make it bold and use this font if you want to draw some text as bold. One way to do this is to parse some kind of bb code within the text (maybe not the best way). E.g

First example:

newSubItem.Text = "Hello [B]world[/B]!";

With simple reguar expression it should be possible to filter these code tags out to use another font for bold text:
(Note: this is not a generic sample!)

<br />
// Assuming the subItem text is "Hello [B]world[/B]!"<br />
<br />
// the bold font<br />
Font boldFont = new Font("Microsoft Sans Serif", 8.25F, FontStyle.Bold, GraphicsUnit.Point, ((byte)(0)));<br />
<br />
<br />
// The regular expression for bold tags:<br />
Regex rgxBold = new Regex("(.*)(\[[bB]\])(.*)(\[/[bB]\])(.*)");<br />
Match mtcBold = rgxBold.Match(subItem.Text);<br />
<br />
Rectangle tmpRect = e.Bounds;<br />
<br />
if (mtcBold.Success)<br />
{<br />
  // Write normal text:<br />
  e.Graphics.DrawString(mtcBold.Groups[1].Value, this.Font, SystemBrushes.ControlText, tmpRect.Location);<br />
<br />
  // Increase tmpRect:<br />
  tmpRect.Left += (int)e.Graphics.MeasureString(mtcBold.Groups[1].Value, this.Font);<br />
<br />
  // now write the bold part of the text:<br />
  e.Graphics.DrawString(mtcBold.Groups[3].Value, boldFont, SystemBrushes.ControlText, tmpRect.Location);<br />
<br />
  // Increase tmpRect:<br />
  tmpRect.Left += (int)e.Graphics.MeasureString(mtcBold.Groups[3].Value, boldFont);<br />
<br />
  // Write normal text again:<br />
  e.Graphics.DrawString(mtcBold.Groups[5].Value, this.Font, SystemBrushes.ControlText, tmpRect.Location);<br />
<br />
  // Increase tmpRect:<br />
  tmpRect.Left += (int)e.Graphics.MeasureString(mtcBold.Groups[5].Value, this.Font);<br />
<br />
  // ...<br />
}<br />
<br />


Note this is just an example and it is not tested. You hve to check for empty group in the Match and it should be bether write a generic method for that. To change the color of some parts in the subnote text, just implement more bb codes e.g. [CBlue]BlueText[/CBlue]] and replace the brushes in the e.graphics.DrawString method with the correct color.

3. Yes you can. At this time i use SystemBrushes.ControlText for that. To change the color, create a private field called Color mRootNodecolor = SystemColors.ControlText; and Brush mRootNodeTextBrush = new SolidBrush(SystemColors.ControlText); in the private field reion of my code. Further create a pubic property like this:

<br />
Public color RootNodeColor<br />
{<br />
  get<br />
  {<br />
    return this.mRootNodeColor;<br />
  }<br />
  set<br />
  {<br />
    this.mRootNodeColor = value;<br />
    this.mRootNodeTextBrush = new SolidBrush(this.mRootNodeColor);<br />
    Invalidate();<br />
  }<br />
}<br />


Now you can change the color of all root items using toolBoxControl.RootNodeColor = Color.Red;

Second Example:

You can improve the VSTreeNode class of the ToolBox. Add some more properties like color, bold-text-parts, ...
In the itemDraw method you can call a custom draw method of the VSTreeNode, so each node will be drawn by itself. This will be much easier to handle stuff like bold or colored text parts.

All these points you wrote will be very well improvments of the control. I think i can implement these features the next few day. (But for now it's over.. i've to go to a bbq ^^)

Best regards popangler
GeneralRe: Can i display a full Tree under each group member? Please help Pin
shagunk6517-Feb-08 20:00
shagunk6517-Feb-08 20:00 
GeneralRe: Can i display a full Tree under each group member? Please help Pin
shagunk6524-Feb-08 17:12
shagunk6524-Feb-08 17:12 
GeneralVery nice... Pin
Paw Jershauge28-Jan-08 20:49
Paw Jershauge28-Jan-08 20:49 
AnswerRe: Very nice... Pin
Popangler29-Jan-08 10:31
Popangler29-Jan-08 10:31 

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.