Changing the look and feel of the propertygrid






3.65/5 (17 votes)
May 11, 2006
2 min read

100479

1965
Make the propertygrid control look like the one provided in the VS 2005 IDE
Introduction
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.
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
public
class CustomPropertyGrid : PropertyGrid{
public CustomPropertyGrid(){
this.ToolStripRenderer = new ToolStripProfessionalRenderer(new CustomColorTable());}
}
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"
This is the result after doing some tweaks
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.