This project has moved. For the latest updates, please go here.

Limit PropertyGrid Control Standard Properties and Use Toolkit ColorPickerEditor

Feb 26, 2014 at 5:59 PM
Hi,

I believe I am attempting to use the propertygrid in a non-standard way, but wanted to reach out to everyone for some advice and guidance. My requirements are as follows:

1) I don't want to show all of the properties of the control (e.g. Ellipse/Rectangle). To do this I've set the SelectedObject to the control I want to modify the properties for. Also I've set AutoGenerateProperties to False to prevent all properties from being shown.
2) For the Fill property (Ellipse/Rectangle) I want to leverage the Toolkit standard ColorPickerEditor to select the color to use.

What I've done so far:

1.) I've added EditorDefinitions to my Xaml for the propertygrid:
                                 <xctk:PropertyGrid.EditorDefinitions>
                                    <xctk:EditorDefinition>
                                        <xctk:EditorDefinition.PropertiesDefinitions>
                                            <xctk:PropertyDefinition Name="Fill" />
                                     </xctk:EditorDefinition.PropertiesDefinitions>
                                      <xctk:EditorDefinition.EditorTemplate>
                                            <DataTemplate>
                                                <xctk:PropertyGridEditorColorPicker SelectedColor="{Binding Value}" DisplayColorAndName="True" DataContext="{Binding BindsDirectlyToSource=True, ValidatesOnExceptions=True, ValidatesOnDataErrors=True}" />
                                            </DataTemplate>
                                      </xctk:EditorDefinition.EditorTemplate>
                                    </xctk:EditorDefinition>
                                </xctk:PropertyGrid.EditorDefinitions>
All of the above works fine and I am able to see and use the Colorpickereditor for the Fill property, but the Colorpickereditor is not properly binding to the initial Fill value when I select the object. Also when I change the color it is not changing the Fill property in the control selected.

I do receive a PropertyValueChanged when the color is changed and I can set the Fill color that was selected manually in my code behind. I realize that the SelectedColor property is a Color and not a Brush as expected by the Fill Property so I do the conversion in my code before setting the control's fill property. Using the standard ColorPicker I am able to bind the SelectedColor to the Fill property by performing a conversion from color to brush using the StaticResource ColorToSolidbrushConverter as follows in the Xaml:

Fill="{Binding Converter={StaticResource ColorToSolidColorBrushConverter1}, ElementName=ColorPicker1, Path=SelectedColor}"

I have the following questions:

1.) Is what I am attempting to do possible?
2.) If using the ColorPickerEditor is possible do I need to do anything else to bind it properly and/or perform the conversion from Color to Brush without needing to handle the property in my code. Is it possible to bind the control's fill property to the PropertyGridEditorColorPicker selected color in the same way?

Thanks in advance to anyone that can provide any input, guidance or example on how to handle these requirements.
Developer
Feb 27, 2014 at 3:56 PM
Hi,

First, "EditorDefinition" is obsolete, you should use "EditorTemplateDefinition". You can bind the PropertyGridEditorColorPicker.SelectedColor to the Value of the EditorTemplateDefinition without code-behind. You only need to use the SolidColorBrushToColorConverter. Here's how to do it :
xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"

 <Window.Resources>
      <xctk:SolidColorBrushToColorConverter x:Key="SolidColorBrushToColorConverter1" />
   </Window.Resources>
    
   <Grid>
      <StackPanel>
         <Ellipse x:Name="_ellipse"
                  Fill="Green"
                  Width="150"
                  Height="150" />
         
         <xctk:PropertyGrid x:Name="_propertyGrid"
                            AutoGenerateProperties="False"
                            SelectedObject="{Binding ElementName=_ellipse}">
            <xctk:PropertyGrid.PropertyDefinitions>
               <xctk:PropertyDefinition TargetProperties="Fill" />
            </xctk:PropertyGrid.PropertyDefinitions>
            
            <xctk:PropertyGrid.EditorDefinitions>
               <xctk:EditorTemplateDefinition TargetProperties="Fill">
                  <xctk:EditorTemplateDefinition.EditingTemplate>
                     <DataTemplate>
                        <xctk:PropertyGridEditorColorPicker SelectedColor="{Binding Value, Converter={StaticResource SolidColorBrushToColorConverter1}}"
                                                            DisplayColorAndName="True"/>
                     </DataTemplate>
                  </xctk:EditorTemplateDefinition.EditingTemplate>
               </xctk:EditorTemplateDefinition>
            </xctk:PropertyGrid.EditorDefinitions>

         </xctk:PropertyGrid>
      </StackPanel>
   </Grid>