This project has moved and is read-only. For the latest updates, please go here.

PropertyGrid DataTemplate breaks binding

May 1 at 10:52 PM
Edited May 1 at 10:54 PM
When I create a DataTemplate to customize a built-in editor it breaks the data binding.
Given:
class Fluid : ObservableObject //INotifyProperty implementation
{
    [Category("Display")]
    [DisplayName("Fill Color")]
    [Editor(typeof(ColorEditor), typeof(ColorEditor))]
    public Color Fill { 
        get { return _fill; } 
        set { Set(ref _fill, value); }
    }
}
and the following XAML:
<xctk:PropertyGrid.EditorDefinitions>
    <xctk:EditorTemplateDefinition> <!-- TargetProperties="Fill,Border"> -->
        <xctk:EditorTemplateDefinition.TargetProperties>
            <xctk:TargetPropertyType Type="{x:Type m:Color}" />
        </xctk:EditorTemplateDefinition.TargetProperties>
        <xctk:EditorTemplateDefinition.EditingTemplate>
            <DataTemplate>
                <xctk:PropertyGridEditorColorPicker DisplayColorAndName="False"/>
            </DataTemplate>
        </xctk:EditorTemplateDefinition.EditingTemplate>
    </xctk:EditorTemplateDefinition>
</xctk:PropertyGrid.EditorDefinitions>
where m is the System.Windows.Media namespace.

If I add the EditorAttribute to the Fill property the binding works, but the xaml DataTemplate is ignored. If I remove the EditorAttribute the binding is broken, but the DataTemplate is used.

As you can see, in the DataTemplate I have tried both the Color type target as well as the Fill property target, with the same results.

I must be missing something simple.
Thanks, John
May 2 at 8:03 PM
So, the key to this is this sentence in the Custom Editors with DataTemplates section of the documentation:
Be sure to bind your custom editor to the bound property item's Value property.
It took me a while to decipher what that meant, but here is the added code that make the binding work with a ColorEditor in a DataTemplate:
<DataTemplate>
    <xctk:PropertyGridEditorColorPicker DisplayColorAndName="False" SelectedColor="{Binding Value}"/>
</DataTemplate>