Taking the grid out of the WPF Property Grid

The default appearance of the WPF Property Grid is very much like the Windows Forms property grid. This keeps it consistent with the default appearance of the built-in WPF controls, so that an application built without any style overrides will be visually consistent.

The WPF control model, however, enforces a strict separation of control behaviour from control appearance. So I want to put the “property grid” appearance aside for a moment and talk about the underlying behaviour of the WPF Property Grid.

The two basic features of the control are that it breaks an object down into its properties, and that it associates an editor with each property. These two features are actually independent: really, the control associates an editor with each node or row, and breaking an object down into its properties is one of the ways we can define what the nodes are. (The others are the ItemsSource property and the AddNode methods.)

Nothing about these features mandates a grid-type display. The control is really a WPF Object Editor; it just happens that its default appearance is a WinForms-style property grid. So you can use the control in any context where you want users to be able to edit property values without you having to create and bind a control for each individual property, even if you don’t want it to look anything like a grid.

Here’s a trivial example. In this design, the user sees only one property at a time, and chooses which one from a drop-down box. You might use this kind of design if you wanted to conserve screen space and if the user was likely to repeatedly adjust one value before going on to another.

You can implement this using the WPF Property Grid using the following style:

<Style x:Key="MicroGrid" TargetType="ms:PropertyGrid">
  <Setter Property="DefaultMargin" Value="0" />
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="ms:PropertyGrid">
 
        <Grid>
 
          <Grid.ColumnDefinitions>
            <ColumnDefinition Width="120" />
            <ColumnDefinition Width="6" />
            <ColumnDefinition Width="120" />
          </Grid.ColumnDefinitions>
 
          <ComboBox ItemsSource="{TemplateBinding BindingView}" x:Name="PropertySelector" 
                    DisplayMemberPath="Node.HumanName" IsSynchronizedWithCurrentItem="True" />
          <ContentControl Grid.Column="2" Content="{Binding ElementName=PropertySelector, Path=SelectedItem}" 
                          ContentTemplateSelector="{Binding EditorSelector, RelativeSource={RelativeSource TemplatedParent}}" />
 
        </Grid>
 
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

By replacing the grid-like template with a combo box and a ContentControl that uses the WPF Property Grid’s editor selector, this completely replaces the default grid-like appearance.

Here are two more examples, the first inspired by Josh Smith’s “organisation chart” TreeView template, and the second showing a dialog-box-like style:

The templates for these, although not complicated, are too long to post here — download the trial edition if you’re interested.

Of course, there are limits to what you can do with restyling the WPF Property Grid. It would be very hard, for example, to create a template that supported non-regular layouts. Still, there’s a lot more than just grids to the WPF Property Grid.

• By Ivan Towlson
• On 29 January 2008

No Comments »

Tagged as WPF, WPF Property Grid