ComboBoxTree - CodeProject

Download source and compiled demo - 26.6 Kb

Sample Image

Introduction

The ComboBoxTree control expands on Gevik Babakhani's DropDown Treeview control. Nearly 85% of the code has been rewritten. This updated control provides the following enhancements:

Treeview can be sized beyond the width of its parents and the form.
The sizing grip functionality is more consistent with standard Windows sizing grips.
Node selection populates the box when it is a root node, the SelectionSeparator property assigns the separator (i.e. a SelectionSeperator that is a period '.' would generate something like: Node0.subnode1.subnode2.rootnode).
Better design-time support including the standard treeview WYSIWYG editor.
The selected node box is editable and accessible as a property - however there is no validation on this value when set manually.
Simplified, by using regions and less method calls.

Please feel free to post comments, questions or criticism. This is my first Windows control, so feedback is appreciated.

Background

I needed a control for a project that required multiple treeviews but had very limited form space. When I found Gevik's DropDown TreeView, I was relieved to find what I was looking for but soon ran into problems that required attention and hours of code updating.

Originally, I didn't intend to redistribute the updated control, but I wanted to give back as a way of saying thanks. Thanks goes out to The Code Project and the original author - thanks Gevik Babakhani ;-)

To use the control, simply add the ComboBoxTree.dll file to your toolbox and drop the control onto your form. The control should provide most of the treeview functionality you require.

Points of Interest

I was able to get around the "sizing beyond parent" problem by adding the treeview to its own borderless form. My next problem involved making the sizing grip work correctly. I was able to get this going by calculating the offset of the mouse within the sizing grip along with the absolute mouse position and the location of the form containing the treeview. My final big problem was the sizing grip when scroll bars showed. Disabling scroll bars wasn't a solution so my only alternative was to add a margin of space on the bottom and right-hand side. A bit different but definitely functional!

History

01/26/04 Version 1.0 submitted.
02/02/04 Version 1.2 submitted, changes include:
- Text property is now overridden.
- AbsoluteChildrenSelectableOnly property option now available, users can now select end nodes only or all nodes.
- Public ValidateText method now available to validate manually entered text.
- SelectionSeparator now called BranchSeparater.
- Minor toolbox category changes.

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

About the Author

Gabe Anguiano

United States

Member

Article Top

Poor

Excellent

Add a reason or comment to your vote: x
Votes of 3 or less require a comment

Comments and Discussions

You must Sign In to use this message board. (secure sign-in)

Search this forum
	Profile popups Noise Layout Per page

How to show image of the selected tree item in combobox

Rui Frazao

6:07 9 Jun '10

Any suggestion to show image of the selected tree item in combobox? Thanks & Regards,
Sign In·View Thread·Permalink

Checkbox With Every Node

Farid_Bilal

20:58 26 Feb '09

Hi gabe First Of All Great Great Article..
I am new to This One .. I am using ur control with little bit modification and conversion in vb.net . now i want a checkbox with every node (parents/childs) so the selected text coe with only the nodes with checked checkboxes . i treid alot but didnt got any solution coz there is no checkboxes property available with the control as the normal window contrl treeview components contains .. could u please give any suggestion,solution or any idea ???

Thanks In Advance

MBilal

How to populate tree with data from datatable ?

loverboy23

3:49 12 Jul '08

Hi, first of all i want to thank you for this nice control and i was wondering if its possible to populate the treeview from datatable or smth.
Sign In·View Thread·Permalink	1.00/5 (1 vote)

How can i get DropDownStyle like combobox?

Member 1376600

3:07 10 Apr '08

I want the user to only select from tree.He should not be allowed to type in(A functionality similar to ComboBoxStyle.DropDownList). How can i do this.
Sign In·View Thread·Permalink	1.00/5 (1 vote)

BranchSeparator as String, DropDownHeight, ...

fraveu

9:53 27 Sep '07

Hi there,

I did some fix to this great control.

I changed the BranchSeparator to String. Now we can use " :: " as BranchSeparator.

I also used a property called DropDownHeight to set the size of the dropdown box (treeview).

I did some work on the minimum Height and Width of the dropdownbox and fixed a 2 pixels paint problem. Now the ComboBox Button is shown as it should be.

I this thats it. Source on the reply.

Re: BranchSeparator as String, DropDownHeight, ...

fraveu

9:55 27 Sep '07

using System;

using System.ComponentModel;

using System.Drawing;

using System.Resources;

using System.Text.RegularExpressions;

using System.Windows.Forms;

 

namespace Verlinea.ComboBoxTree {

    public delegate void NodeSelectEventHandler();

    /// 

    /// ComboBoxTree control is a treeview that drops down much like a combobox

    /// 


    public class ComboBoxTree : UserControl {

        #region Private Fields

        private Panel pnlBack;

        private Panel pnlTree;

        private TextBox tbSelectedValue;

        private ButtonEx btnSelect;

        private TreeView tvTreeView;

        private LabelEx lblSizingGrip;

        private Form frmTreeView;

 

        private string _branchSeparator;

        private bool _absoluteChildrenSelectableOnly;

        private int _dropDownHeight;

        private System.Drawing.Point DragOffset;

        #endregion

        #region Public Properties

        [Browsable(true), Description("Gets the TreeView Nodes collection"), Category("TreeView"), DesignerSerializationVisibility(DesignerSerializationVisibility.Content), Editor(typeof(TreeNodeCollection), typeof(TreeNodeCollection))]

        public TreeNodeCollection Nodes {

            get {

                return this.tvTreeView.Nodes;

            }

        }

 

        [Browsable(true), Description("Gets or sets the TreeView's Selected Node"), Category("TreeView")]

        public TreeNode SelectedNode {

            set {

                this.tvTreeView.SelectedNode = value;

            }

        }

 

        [Browsable(true), Description("Gets or sets the TreeView's Selected Node"), Category("TreeView")]

        public ImageList Imagelist {

            get { return this.tvTreeView.ImageList; }

            set { this.tvTreeView.ImageList = value; }

        }

 

        [Browsable(true), Description("The text in the ComboBoxTree control"), Category("Appearance")]

        public override string Text {

            get { return this.tbSelectedValue.Text; }

            set { this.tbSelectedValue.Text = value; }

        }

 

        [Browsable(true), Description("Gets or sets the separator for the selected node's value"), Category("Appearance")]

        public string BranchSeparator {

            get { return this._branchSeparator; }

            set {

                if (value.Length > 0)

                    this._branchSeparator = value/*.Substring(0,1)*/;

            }

        }

 

        [Browsable(true), Description("Gets or sets the separator for the selected node's value"), Category("Behavior")]

        public bool AbsoluteChildrenSelectableOnly {

            get { return this._absoluteChildrenSelectableOnly; }

            set { this._absoluteChildrenSelectableOnly = value; }

        }

 

        [Browsable(true), Description("The heigth, in pixels, of the treeview in a combobox."), Category("Behavior")]

        public int DropDownHeight {

            get { return this._dropDownHeight; }

            set { this._dropDownHeight = value; }

        }

        #endregion

 

        public ComboBoxTree() {

            this.InitializeComponent();

 

            // Initializing Controls

            this.pnlBack = new Panel();

            this.pnlBack.BorderStyle = BorderStyle.Fixed3D;

            this.pnlBack.BackColor = Color.White;

            this.pnlBack.AutoScroll = false;

 

            this.tbSelectedValue = new TextBox();

            this.tbSelectedValue.BorderStyle = System.Windows.Forms.BorderStyle.None;

 

            this.btnSelect = new ButtonEx();

            this.btnSelect.Click += new EventHandler(ToggleTreeView);

            this.btnSelect.FlatStyle = FlatStyle.Flat;

 

            this.lblSizingGrip = new LabelEx();

            this.lblSizingGrip.Size = new Size(9, 9);

            this.lblSizingGrip.BackColor = Color.Transparent;

            this.lblSizingGrip.Cursor = Cursors.SizeNWSE;

            this.lblSizingGrip.MouseMove += new MouseEventHandler(SizingGripMouseMove);

            this.lblSizingGrip.MouseDown += new MouseEventHandler(SizingGripMouseDown);

 

            this.tvTreeView = new TreeView();

            this.tvTreeView.BorderStyle = BorderStyle.None;

            this.tvTreeView.DoubleClick += new EventHandler(TreeViewNodeSelect);

            this.tvTreeView.Location = new Point(0, 0);

            this.tvTreeView.LostFocus += new EventHandler(TreeViewLostFocus);

            //this.tvTreeView.Scrollable = false;

 

            this.frmTreeView = new Form();

            this.frmTreeView.FormBorderStyle = FormBorderStyle.None;

            this.frmTreeView.StartPosition = FormStartPosition.Manual;

            this.frmTreeView.ShowInTaskbar = false;

            this.frmTreeView.BackColor = System.Drawing.SystemColors.Control;

 

            this.pnlTree = new Panel();

            this.pnlTree.BorderStyle = BorderStyle.FixedSingle;

            this.pnlTree.BackColor = Color.White;

 

            SetStyle(ControlStyles.DoubleBuffer, true);

            SetStyle(ControlStyles.ResizeRedraw, true);

 

            // Adding Controls to UserControl

            this.pnlTree.Controls.Add(this.lblSizingGrip);

            this.pnlTree.Controls.Add(this.tvTreeView);

            this.frmTreeView.Controls.Add(this.pnlTree);

            this.pnlBack.Controls.AddRange(new Control[] { btnSelect, tbSelectedValue });

            this.Controls.Add(this.pnlBack);

        }

 

        private void RelocateGrip() {

            this.lblSizingGrip.Top = this.frmTreeView.Height - lblSizingGrip.Height - 1;

            this.lblSizingGrip.Left = this.frmTreeView.Width - lblSizingGrip.Width - 1;

        }

 

        private void ToggleTreeView(object sender, EventArgs e) {

            if (!this.frmTreeView.Visible) {

                Rectangle CBRect = this.RectangleToScreen(this.ClientRectangle);

                this.frmTreeView.Location = new System.Drawing.Point(CBRect.X, CBRect.Y + this.pnlBack.Height);

 

                this.frmTreeView.Show();

                this.frmTreeView.BringToFront();

 

                this.RelocateGrip();

                //this.tbSelectedValue.Text = "";

            } else {

                this.frmTreeView.Hide();

            }

        }

 

        public bool ValidateText() {

            const char splitChar = '&';

            string ValidatorText = this.Text.Replace(this._branchSeparator, splitChar.ToString());

            TreeNodeCollection TNC = this.tvTreeView.Nodes;

 

            for (int i = 0; i < ValidatorText.Split(splitChar/*this._branchSeparator.ToCharArray()[0]*/).Length; i++) {

                bool NodeFound = false;

                string NodeToFind = ValidatorText.Split(splitChar/*this._branchSeparator.ToCharArray()[0]*/)[i];

                for (int j = 0; j < TNC.Count; j++) {

                    if (TNC[j].Text == NodeToFind) {

                        NodeFound = true;

                        TNC = TNC[j].Nodes;

                        break;

                    }

                }

 

                if (!NodeFound)

                    return false;

            }

 

            return true;

        }

 

        #region Events

        private void SizingGripMouseMove(object sender, MouseEventArgs e) {

            if (e.Button == MouseButtons.Left) {

                int TvWidth, TvHeight;

                TvWidth = Cursor.Position.X - this.frmTreeView.Location.X;

                TvWidth = TvWidth + this.DragOffset.X;

                TvHeight = Cursor.Position.Y - this.frmTreeView.Location.Y;

                TvHeight = TvHeight + this.DragOffset.Y;

 

                if (TvWidth < this.Width)

                    TvWidth = this.Width;

                if (TvHeight < this._dropDownHeight)

                    TvHeight = this._dropDownHeight;

 

                this.frmTreeView.Size = new System.Drawing.Size(TvWidth, TvHeight);

                this.pnlTree.Size = this.frmTreeView.Size;

                this.tvTreeView.Size = new System.Drawing.Size(this.frmTreeView.Size.Width - this.lblSizingGrip.Width, this.frmTreeView.Size.Height - this.lblSizingGrip.Width); ;

                RelocateGrip();

            }

        }

 

        private void SizingGripMouseDown(object sender, MouseEventArgs e) {

            if (e.Button == MouseButtons.Left) {

                int OffsetX = System.Math.Abs(Cursor.Position.X - this.frmTreeView.RectangleToScreen(this.frmTreeView.ClientRectangle).Right);

                int OffsetY = System.Math.Abs(Cursor.Position.Y - this.frmTreeView.RectangleToScreen(this.frmTreeView.ClientRectangle).Bottom);

 

                this.DragOffset = new Point(OffsetX, OffsetY);

            }

        }

 

        private void TreeViewLostFocus(object sender, EventArgs e) {

            if (!this.btnSelect.RectangleToScreen(this.btnSelect.ClientRectangle).Contains(Cursor.Position))

                this.frmTreeView.Hide();

        }

 

        private void TreeViewNodeSelect(object sender, EventArgs e) {

            if (this._absoluteChildrenSelectableOnly) {

                if (this.tvTreeView.SelectedNode.Nodes.Count == 0) {

                    tbSelectedValue.Text = this.tvTreeView.SelectedNode.FullPath.Replace(@"\", this._branchSeparator);

                    this.ToggleTreeView(sender, null);

                }

            } else {

                tbSelectedValue.Text = this.tvTreeView.SelectedNode.FullPath.Replace(@"\", this._branchSeparator);

                this.ToggleTreeView(sender, null);

            }

        }

 

        private void InitializeComponent() {

            // 

            // ComboBoxTree

            // 

            this.Name = "ComboBoxTree";

            this._absoluteChildrenSelectableOnly = true;

            this._dropDownHeight = 106;

            this._branchSeparator = "-";

            this.Layout += new System.Windows.Forms.LayoutEventHandler(this.ComboBoxTree_Layout);

        }

 

        private void ComboBoxTree_Layout(object sender, System.Windows.Forms.LayoutEventArgs e) {

            this.Height = this.tbSelectedValue.Height + 10;

            this.pnlBack.Size = new Size(this.Width, this.Height - 2);

 

            this.btnSelect.Size = new Size(16, this.Height - 6);

            this.btnSelect.Location = new Point(this.Width - this.btnSelect.Width - 4, 0);

 

            this.tbSelectedValue.Location = new Point(2, 2);

            this.tbSelectedValue.Width = this.Width - this.btnSelect.Width - 4;

 

            this.tvTreeView.Height = this._dropDownHeight;

            this.frmTreeView.Size = new Size(this.Width, this.tvTreeView.Height);

            this.pnlTree.Size = this.frmTreeView.Size;

            this.tvTreeView.Width = this.frmTreeView.Width - this.lblSizingGrip.Width;

            this.tvTreeView.Height = this.frmTreeView.Height - this.lblSizingGrip.Width;

            this.RelocateGrip();

        }

        #endregion

 

        #region LabelEx

        private class LabelEx : Label {

            /// 

            /// 

            /// 


            public LabelEx() {

                this.SetStyle(ControlStyles.UserPaint, true);

                this.SetStyle(ControlStyles.DoubleBuffer, true);

                this.SetStyle(ControlStyles.AllPaintingInWmPaint, true);

            }

 

            /// 

            /// 

            /// 


            /// 

            protected override void OnPaint(PaintEventArgs e) {

                base.OnPaint(e);

                System.Windows.Forms.ControlPaint.DrawSizeGrip(e.Graphics, System.Drawing.Color.Black, 1, 0, this.Size.Width, this.Size.Height);

            }

        }

        #endregion

 

        #region ButtonEx

        private class ButtonEx : Button {

            ButtonState state;

 

            /// 

            /// 

            /// 


            public ButtonEx() {

                this.SetStyle(ControlStyles.UserPaint, true);

                this.SetStyle(ControlStyles.DoubleBuffer, true);

                this.SetStyle(ControlStyles.AllPaintingInWmPaint, true);

 

            }

            /// 

            /// 

            /// 


            /// 

            protected override void OnMouseDown(MouseEventArgs e) {

                state = ButtonState.Pushed;

                base.OnMouseDown(e);

            }

 

            /// 

            /// 

            /// 


            /// 

            protected override void OnMouseUp(MouseEventArgs e) {

                state = ButtonState.Normal;

                base.OnMouseUp(e);

            }

 

            /// 

            /// 

            /// 


            /// 

            protected override void OnPaint(PaintEventArgs e) {

                base.OnPaint(e);

                System.Windows.Forms.ControlPaint.DrawComboButton(e.Graphics, 0, 0, this.Width, this.Height, state);

            }

        }

        #endregion

    }

}

FlatStyle System

jake072

10:30 23 Aug '07

Is there any way to set the FlatStyle to System so that it looks like a normal combobox in Windows XP with themes enabled? Thanks, Jake
Sign In·View Thread·Permalink

Re: FlatStyle System

LAcike@sk

23:40 30 Jun '08

Hi, sure, just make some changed in ButtonEx: 1, replace System.Windows.Forms.ControlPaint.DrawComboButton with new special class System.Windows.Forms.ComboBoxRenderer.DrawDropDownButton 2, and change ButtonState state; to ComboBoxState state; Br, Ladislav Lencucha
Sign In·View Thread·Permalink	5.00/5 (1 vote)

AfterSelect event

mayank_max10

6:50 4 Jun '07

First off, awesome work!!! How can I consume AfterSelect event. I am not able to do that. What I want to do is execute a function when a node is selected. Something like SelectedIndexChanged event of a dropdownlist. Can you please help me whith this?
Sign In·View Thread·Permalink	2.00/5 (1 vote)

Re: AfterSelect event

mayank_max

9:07 4 Jun '07

Never mind. Got it. Added an event AfterSelect to the source code.
Sign In·View Thread·Permalink	5.00/5 (1 vote)

Re: AfterSelect event

mayank_max

9:13 4 Jun '07

If anyone is looking for it, heres how I did it.

Declare a delegate for AfterSelect event. This should come bofore the class definition starts:

public delegate void AfterSelectHandler(object sender, EventArgs e);
public class ComboBoxTree : UserControl
{
public event AfterSelectHandler AfterSelect;
protected virtual void OnAfterSelect(EventArgs e)
{
AfterSelect(this, e);
}
...
private void TreeViewLostFocus(object sender, EventArgs e)
{
//Excute the event handler on some event. I called /in TreeViewLostFocus
OnAfterSelect(e);

if (!this.btnSelect.RectangleToScreen (this.btnSelect.ClientRectangle).Contains(Cursor.Position))
this.frmTreeView.Hide();
}
}

Re: AfterSelect event

JossGP

23:41 11 Oct '07

Hi,
thanks for this control. I was jus looking for it.

I have the same problem as mayank_max10. I want to trigger an event that returns a node. I tried the code above but I don't understand some code.

1. Why do not use a TreeViewEventArgs over EventArgs e. EventArgs doesn't return a node.
the standard method used in treeView for Afterselect has TreeViewEventArgs as parm.

2. Why do I have to put a call to a OnAfterSelect(e) in TreeViewLostFocus? I want to call OnAfterSelect whan I select an Item , not when the control lost focus.

3. Could you help me to do this job the right way. I want to expand the nodes diynamically when the user click on a item that doesn't have children inside.

4. last question. if you decleare " protected virtual void OnAfterSelect" the keyword virtual does it means that the control overload the default method and than it is called when the user do what ???. Am I wrong ?

Thank for help.

Giorgio

How to sort the ComboBoxTree

satisht

20:18 23 May '07

I have added unsorted nodes in ComboboxTree, How should i sort the nodes of ComboboxTree?
Sign In·View Thread·Permalink	1.00/5 (1 vote)

Need this in VB.net [modified] - no longer needed

Vortran

10:51 9 Oct '06

Subject says it all.   I can't C# my way out of a wet paper bag with a hole in it.

Thanks!

Please respond to mikesyd<at>cybermike<dot><net>

-- modified at 10:19 Tuesday 28th November, 2006

ok.. I bit the bullet and leaped into the C# code.   I added properties to set the size of the treeview control at design time.   I'd be happy to upload my work somewhere - but where.

In conclusion, I will say that this is a very nice piece of code because of the way it is packaged (a .DLL file) making it easily portable.   I would love to have the technology to add the Intellisense info for properties and methods, but don't know how to do that.   The one thing I dislike about this is that it gives focus to a hidden form, and your application window loses focus as a result.   It would be just as well for those inclined to do some fancy UI coding to put the controls and events directly into your application form.   What is being done here is simple UI and event manipulation of existing controls.

Bug Deteced !!

H1berto Ferreira

1:44 3 Jan '06

Hi, I have found a bug in comboboxtree.cs file line 66 (if(value.Length > 0)) . Sometimes "value" is null. Modify the code and try this: if(value != null && value.Length > 0) Thats all Operator -- modified at 7:45 Tuesday 3rd January, 2006
Sign In·View Thread·Permalink	2.00/5 (1 vote)

form lostfocus problem

TurboWang

14:50 10 Mar '04

when dropdown ,the from lost focus, I do not want to be like this...
Sign In·View Thread·Permalink

Re: form lostfocus problem

Gabe Anguiano

9:59 12 Mar '04

Wang, the only way to allow drawing the treeview outside the bounds of the form is to use its own form. I don't think two forms can be focused at one time so I don't think this is possible.
Sign In·View Thread·Permalink	5.00/5 (1 vote)

Excellent !

BillWoodruff

15:52 10 Feb '04

Very nice work, and I look forward to its evolution. Thanks ! best, Bill Woodruff dotScience Chiang Mai, Thailand "The greater the social and cultural distances between people, the more magical the light that can spring from their contact." Milan Kundera in Testaments Trahis
Sign In·View Thread·Permalink

Button on title bar

sylvain2222

3:05 3 Feb '04

Hi! I saw a small button on your Windows title bar. I'm interrested to use one like it. Do you have stuff or tricks to put a button there ? Thanks
Sign In·View Thread·Permalink

Re: Button on title bar

asm43

7:10 3 Feb '04

It's part of the nView desktop manager available on nVidia graphics cards. I'm not sure how they put it there (it's probably not very documented, as I think that it violates Microsoft's UI design guidelines), if you're asking about putting one up yourself. The nView stuff allows you to make windows always-on-top, transparent, etc.
Sign In·View Thread·Permalink

Re: Button on title bar

Gabe Anguiano

11:46 3 Feb '04

Thanks for explaining asm43. Sylvain, a good place to start: GOOGLE GROUPS: dotnet "title bar" button Best regards, Gabe
Sign In·View Thread·Permalink

You can find many useful ideas in my control too :)

Alex Kucherenko

21:51 2 Feb '04

This is link to article published on this site long time ago, in it you can find solution to some aspects of combos with TreeView controls. I think this can help us to make both my and yours controls better. http://www.codeproject.com/cs/miscctrl/customcombos.asp[^] Good Luck Alex Kucherenko
Sign In·View Thread·Permalink

Re: You can find many useful ideas in my control too :)

Gabe Anguiano

11:40 3 Feb '04

Nice controls Alex. I've always intended on giving the control the option of the "flat appearance" and would love to be able show the selected item's image as well. I'll take a look at your code a bit further when I get the time Gabe
Sign In·View Thread·Permalink

nice functionality except you have to select end node

Ashley van Gerven

21:47 28 Jan '04

It looks like you have to choose a node that has no child nodes (ie end node)... in which case it might be an idea to expand all nodes?
Sign In·View Thread·Permalink

Re: nice functionality except you have to select end node

Gabe Anguiano (obsidience)

7:23 29 Jan '04

Thanks for the kind words Ashley. Based on your suggestion and a few of my own thoughts I'll be adding the following code to the control this weekend:

* attempt to expose more/all of the standard treeview methods/properties/events (ie. ExpandAll())
* implement public property bool AbsoluteChildrenSelectableOnly
* implement a NodeText validation algorithm to validate typed values

Best regards,

Gabe (obsidience)