Editors

The PropertyGrid comes with standard editors:

• TextEditor: Single line
• ObjectEditor: A generic editor that will show a new inner property grid
• BigTextEditor: Multi lines
• EnumEditor: ComboBox with the values of the enum (Names are decamelized)
• FlagEnumEditor: ComboBox with CheckBox
• BooleanEditor: CheckBox
• NullableBooleanEditor: three states CheckBox
• DateEditor: DatePicker
• DateTimeEditor: DateTimePicker
• GuidEditor: TextBox with button to generate a Guid
• HexaDumpEditor: display the content of a byte[] in hexa
• ProgressEditor: Display a progress bar

The editor is chosen by looking at the property type and attributes.

Setting the editor

If you don't want to use the default editor for a property, you have to decorate the property with the PropertyGridOptionsAttribute:

[PropertyGridOptions(EditorDataTemplateResourceKey = "BigTextEditor")]
public string Description
{
	get { return GetProperty<string>(); }
	set { SetProperty<string>(value); }
}

Note the ObjectEditor can be added in many cases to standard object-type properties, like this:

[PropertyGridOptions(EditorDataTemplateResourceKey = "ObjectEditor")]
public Address SimpleAddress
{
	get { return GetProperty<Address>(); }
	set { SetProperty<string>(Address); }
}

Creating custom editors

To create an editor, you can create a classic WPF DataTemplate and use the current implicit DataContext that will be bound to the current PropertyGridProperty (a class of the SoftFluent PropertyGrid) object. Here's an example to create an editor that shows a slider to edit the value:

<DataTemplate x:Key="PercentEditor">
    <Slider Orientation="Horizontal" IsSnapToTickEnabled="True"
            Value="{Binding Value, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
            Minimum="0"
            Maximum="100"
            Interval="1"
            IsEnabled="{Binding IsReadWrite}"
            Background="{Binding IsDefaultValue, Converter={StaticResource BoolToDefaultValueBackgroundConverter}}" />
</DataTemplate>

As we see, the Slider's Value property is bound to the PropertyGridProperty's Value property. You can check in the source code that the PropertyGridProperty has a number of dependency properties you can bind to.

[PropertyGridOptions(EditorDataTemplateResourceKey = "PercentEditor")]
public double Percentage { get; set; }

Creating an editor with a window

<DataTemplate x:Key="UrlEditor">
	<DockPanel LastChildFill="true" ToolTip="{Binding Value, Mode=OneWay}">
		
		<Button Width="Auto" HorizontalContentAlignment="Center" Content="Preview" DockPanel.Dock="Right"
				Command="{x:Static local:PropertyGrid.BrowseCommand}" CommandParameter="UrlPreviewWindow" />
				<!-- CommandParameter = Name of the ResourceKey to open -->
		
		<TextBox IsReadOnly="{Binding IsReadOnly}" 
				 Background="{Binding IsDefaultValue, Converter={StaticResource BoolToDefaultValueBackgroundConverter}}" 
				 Text="{Binding TextValue, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" 
				 DockPanel.Dock="Left" />
	</DockPanel>
</DataTemplate>

<Window x:Shared="false" x:Key="UrlPreviewWindow" Name="UrlPreviewWindow" Title="Text" Height="400" Width="400">	
	<Grid>
		<WebBrowser samples:Utilities.BindableSource="{Binding Value, Mode=OneWay}" />
	</Grid>
</Window>

The Command PropertyGrid.BrowseCommand is handled by the PropertyGrid. It tries to find a Resource with the name specified in the CommandParameter and if it's a Window the PropertyGrid opens it.