Click here to Skip to main content
11,641,971 members (62,397 online)
Click here to Skip to main content

Changing the look and feel of the propertygrid

, 11 May 2006 78K 1.6K 56
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

Share

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.

You may also be interested in...

Comments and Discussions

 
QuestionHow can I attach event to CustomCollectionEditor? Pin
connectpalm20-Dec-07 0:16
memberconnectpalm20-Dec-07 0:16 
QuestionHow I can make it? [modified] Pin
agorby30-Oct-07 2:00
memberagorby30-Oct-07 2:00 
AnswerRe: How I can make it? Pin
Guillaume Leparmentier30-Nov-07 4:22
memberGuillaume Leparmentier30-Nov-07 4:22 
GeneralRe: How I can make it? Pin
agorby30-Nov-07 4:56
memberagorby30-Nov-07 4:56 
GeneralAlmost! Pin
thany.org7-Sep-07 4:32
memberthany.org7-Sep-07 4:32 
GeneralReadOnly Collection Pin
kembo11-Jun-07 5:38
memberkembo11-Jun-07 5:38 
GeneralRe: ReadOnly Collection Pin
Guillaume Leparmentier30-Nov-07 4:26
memberGuillaume Leparmentier30-Nov-07 4:26 
GeneralExample does not use CustomCollectionEditor Pin
SteveC1-May-07 1:04
memberSteveC1-May-07 1:04 
GeneralNice Pin
chris17516-Jan-07 7:51
memberchris17516-Jan-07 7:51 
QuestionCool -- Is it OK to use VS2005Components? Pin
Stephen Lamb14-Sep-06 19:20
memberStephen Lamb14-Sep-06 19:20 
AnswerRe: Cool -- Is it OK to use VS2005Components? Pin
seesharper28-Sep-06 12:01
memberseesharper28-Sep-06 12:01 
QuestionVery good. Now Could you? Pin
Pink Floyd22-May-06 6:45
memberPink Floyd22-May-06 6:45 
GeneralThanx! Pin
Nice Life15-May-06 23:12
memberNice 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 | Terms of Use | Mobile
Web02 | 2.8.150731.1 | Last Updated 11 May 2006
Article Copyright 2006 by seesharper
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid