Category Editor

Hi,

Is it possible to implement something like a "Category Editor" in the data grid? The idea is to provide one custom control that binds to the DeclaringObject on the node and can edit a number of things together in a category. The idea is similar to what is used in the Expression Blend application. What is required is full customization of the entire area of the category area and not just the editor of the properties on that category.

Any ideas?

Thanks!

Pablo

You cannot do this directly.  But you may be able to fake it by setting up an editor for one property whose DataTemplate binds not to Value but to named properties of the UnderlyingObject e.g.

<ms:PropertyEditor PropertyName="RangeLow">
  <ms:PropertyEditor.EditorTemplate>
    <DataTemplate>
      <ms:DualSlider RangeStart="{Binding UnderlyingObject.RangeLow}"
                               RangeEnd="{Binding UnderlyingObject.RangeHigh}" />

where RangeLow and RangeHigh are the properties you want to bundle together and RangeLow is the one you have picked as the bearer of the editor.  Note that for this to look right you will need to mark RangeLow with DisplayName("Range") and RangeHigh with Browsable(false).

I haven't tested this approach so I can't guarantee it will work.

A better approach if it fits with your model is to create aggregate types e.g. instead of having RangeLow and RangeHigh properties of type Double, create a Range type with Low and High properties, and have a single property of Range type.  Then you can use a TypeEditor to create a UI that works on the Range object as a whole.  See the PhoneNumber editor in the samples for an example.

If this is not appropriate to your model you might still be able to use the TypeEditor trick by using a TypeConverter (override GetProperties) or custom type descriptor to hide the RangeLow and RangeHigh properties from the grid and replace them with a 'fake' property of Range type that backs onto the real properties.  Again haven't tried this approach myself.

Thanks Ivan, I think the underlyingObjcet idea will work.

What about making the editor use the entire width of the property grid, and not showing the property name (ie, show only the category name?)

Thanks again!
Pablo

I don't think that's possible.  Again, it might be possible to kludge it by putting a negative left margin on your editor, and binding that in such a way that it tracked the width of the left column of the property grid.  (Best place to start experimenting: RelativeSource AncestorType={x:Type ms:TreeListView} and Path=Columns[0].)  There is however still a potential issue with mouse activity over the grid's resize line being interpreted as resize activity even though there is a control on top -- I am not sure if there is a way around this...

Ah -- it looks like you can work around the mouse activity resize hijack by handling MouseEnter and MouseLeave on the root control of your editor, and calling:

TreeListView.SetAllowColumnResizing(pg, false);

on the MouseEnter (where pg is the containing property grid), and similarly but passing true on MouseLeave.  Not very elegant, but seems to be working for me -- combined with the margin trick I think this could get you what you want!

Ivan, thanks! I'll try it out.

Ivan, Wouldn't be easier to set the ItemContainerStyleSelector of the TreeListView on the template of the property grid and set a control template for the TreeListViewItem containing a ContentPresenter rather than the GridRowPresenter. It seems to work well without even needing to highjack any of the mouse down handling the TreeListView is doing ...

It works, but I want to know if I'm missing something that might put me in trouble later!

Thanks again,

Pablo

Oh, that's a much better solution than mine (assuming you don't mind jumping into the template!).  I believe that should work fine -- at least, I can't think of anything that would break...  Thanks for suggesting it!