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

Changing the look and feel of the propertygrid

, 11 May 2006
Rate this:
Please Sign up or sign in to vote.
Make the propertygrid control look like the one provided in the VS 2005 IDE

Introduction

Download sourcecode

Download demo project

One of my favorite controls shipped with .Net, is the property grid. It is extremely powerful, but raises a few challenges when it comes to customizing it.

I recently finished an application that used the propertygrid to manage a rather complex configuration.

Using the propertygrid along with XML serialization is a very simple, yet effective way to implement complex configuration scenarios.

Just as the application was set to be kicked out the door, I noticed that my property grid did not look as cool as the one in the Visual Studio IDE.

So I spent I few hours trying to get it right.

First of all is the little toolbar at the top displaying icons for sorting and so on.

Why can't I have that nice gradient toolbar in my propertygrid?

Another thing I noticed was that there was no way to make the collection editor display the property description at the bottom as the the propertygrid do.

And the last thing I wanted to fix was the Toolstrip. I wanted that one to have the VS2005 look as well

I wanted to have something like this.

Sample screenshot

Changing the colors

As for the colors used on the propertygrid toolbar and the toolstrip, the solution was really simple. As I thought maybe I had to do my own painting, all I did was replacing the colortable used by the control's renderer.

Like this

<FONT color=#0000ff size=2><P>public</FONT><FONT size=2> </FONT><FONT color=#0000ff size=2>class</FONT><FONT size=2> </FONT><FONT color=#008080 size=2>CustomPropertyGrid</FONT><FONT size=2> : </FONT><FONT color=#008080 size=2>PropertyGrid</P></FONT><FONT size=2><P>{</P><BLOCKQUOTE dir=ltr style="MARGIN-RIGHT: 0px"><P></FONT><FONT color=#0000ff size=2>public</FONT><FONT size=2> CustomPropertyGrid()</P><P>{ </P><BLOCKQUOTE dir=ltr style="MARGIN-RIGHT: 0px"><P></FONT><FONT color=#0000ff size=2>this</FONT><FONT size=2>.ToolStripRenderer = </FONT><FONT color=#0000ff size=2>new</FONT><FONT size=2> </FONT><FONT color=#008080 size=2>ToolStripProfessionalRenderer</FONT><FONT size=2>(</FONT><FONT color=#0000ff size=2>new</FONT><FONT size=2> </FONT><FONT color=#008080 size=2>CustomColorTable</FONT><FONT size=2>());</P></BLOCKQUOTE><P>} </P></BLOCKQUOTE><P>}</P></FONT>

The Custom Colortable is inherited from the ToolStripProfessionalRenderer and just overrides
the properties describing the colors used in each element of the ex Toolstrip.

Displaying the property description in the collection editor.

This is how the collection editor is displayed when used "out of the box"

Sample screenshot

This is the result after doing some tweaks

Sample screenshot

The code

The solution to this problem was to do a little reflection to get a reference to the collection editor's form and propertygrid.

protected override CollectionForm CreateCollectionForm()
        {

            //Get a reference top new collection form
            CollectionEditor.CollectionForm form = base.CreateCollectionForm();
            
            //Center the form 
            form.StartPosition = FormStartPosition.CenterParent;
         
            //Get the forms type
            Type formType = form.GetType();

            //Get a reference to the private fieldtype propertyBrowser
            //This is the propertgrid inside the collectionform
            FieldInfo fieldInfo = formType.GetField("propertyBrowser", BindingFlags.NonPublic | BindingFlags.Instance);

            if (fieldInfo != null)
            {

                //get a reference to the propertygrid instance located on the form
                PropertyGrid propertyGrid = (PropertyGrid)fieldInfo.GetValue(form);
                
                if (propertyGrid != null)
                {

                    //Make the tool bar visible
                    propertyGrid.ToolbarVisible = true;

                    //Make the help/description visible
                    propertyGrid.HelpVisible = true;

                    //Get the property grid's type.
                    //Note that this is a vsPropertyGrid located in System.Windows.Forms.Design
                    Type propertyGridType = propertyGrid.GetType();

                    //Get a reference to the non-public property ToolStripRenderer
                    PropertyInfo propertyInfo = propertyGridType.GetProperty("ToolStripRenderer",BindingFlags.NonPublic | BindingFlags.Instance);
                    
                    if (propertyInfo != null)
                    {
                        //Assign a ToolStripProfessionalRenderer with our custom color table
                        propertyInfo.SetValue(propertyGrid,new ToolStripProfessionalRenderer(new CustomColorTable()),null);
                    }
                }
            }

            //Return the form
            return form;
        }

As you may notice the custom renderer is also applied to the collection editor's propertygrid.

Using the custom collection editor

        [Editor(typeof(CustomCollectionEditor), typeof(System.Drawing.Design.UITypeEditor))]
        public List<Employee> Employees
        {
            get { return mEmployees; }
            set { mEmployees = value; }
        } 

 Now my application looks like it should and everybody is happy, including me.

 

 

 

 

 

 

 

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

seesharper
Software Developer
Norway Norway
I'm a 39 year old software developer living in Norway.
I'm currently working for a software company making software for the retail industry.
Follow on   Twitter

Comments and Discussions

 
QuestionHow can I attach event to CustomCollectionEditor? Pinmemberconnectpalm20-Dec-07 0:16 
QuestionHow I can make it? [modified] Pinmemberagorby30-Oct-07 2:00 
AnswerRe: How I can make it? PinmemberGuillaume Leparmentier30-Nov-07 4:22 
GeneralRe: How I can make it? Pinmemberagorby30-Nov-07 4:56 
GeneralAlmost! Pinmemberthany.org7-Sep-07 4:32 
GeneralReadOnly Collection Pinmemberkembo11-Jun-07 5:38 
GeneralRe: ReadOnly Collection PinmemberGuillaume Leparmentier30-Nov-07 4:26 
GeneralExample does not use CustomCollectionEditor PinmemberSteveC1-May-07 1:04 
GeneralNice Pinmemberchris17516-Jan-07 7:51 
QuestionCool -- Is it OK to use VS2005Components? PinmemberStephen Lamb14-Sep-06 19:20 
AnswerRe: Cool -- Is it OK to use VS2005Components? Pinmemberseesharper28-Sep-06 12:01 
QuestionVery good. Now Could you? PinmemberPink Floyd22-May-06 6:45 
GeneralThanx! PinmemberNice Life15-May-06 23:12 

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
Web01 | 2.8.140721.1 | Last Updated 11 May 2006
Article Copyright 2006 by seesharper
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid