Skip to content

It can automatically generate a matching editor collection for the attributes in the model object.

cs
[TemplatePart(Name = ElementItemsControl, Type = typeof(ItemsControl))]
[TemplatePart(Name = ElementSearchBar, Type = typeof(SearchBar))]
public class PropertyGrid : Control

Attributes

PropertyDescriptionDefault ValueRemarks
PropertyResolverProperty Resolvernew PropertyResolver
SelectedObjectModel Object
DescriptionDescription
MaxTitleWidthMax Title Width0
MinTitleWidthMinimum title width0

Bring your own editor

NameDescription
DatePropertyEditorDate Editor
DateTimePropertyEditorDate Time Editor
EnumPropertyEditorEnumeration Editor
HorizontalAlignmentPropertyEditorHorizontal Alignment Editor
ImagePropertyEditorImage Editor
NumberPropertyEditorNumber Editor
PlainTextPropertyEditorPlain Text Editor
ReadOnlyTextPropertyEditorRead-only text editor
SwitchPropertyEditorBoolean editor (switch style)
TimePropertyEditorTime Editor
VerticalAlignmentPropertyEditorVertical Alignment Editor

Events

NameDescription
SelectedObjectChangedTriggered when the model object changes

Case

Basic usage

cs
public class PropertyGridDemoModel
{
    [Category("Category1")]
    public string String { get; set; }
    [Category("Category2")]
    public int Integer { get; set; }
    [Category("Category2")]
    public bool Boolean { get; set; }
    [Category("Category1")]
    public Gender Enum { get; set; }
    public HorizontalAlignment HorizontalAlignment { get; set; }
    public VerticalAlignment VerticalAlignment { get; set; }
    public ImageSource ImageSource { get; set; }
}
public enum Gender
{
    Male,
    Female
}
cs
DemoModel = new PropertyGridDemoModel
{
    String = "TestString",
    Enum = Gender.Female,
    Boolean = true,
    Integer = 98,
    VerticalAlignment = VerticalAlignment.Stretch
};
xml
<hc:PropertyGrid Width="500" SelectedObject="{Binding DemoModel}"/>

PropertyGrid

Custom editor

Let's take PlainTextPropertyEditor as an example. When we need to customize the editor, we can inherit from PropertyEditorBase and override some methods. The definitions of these methods are shown in the following table:

Methods

NameDescriptionRemarks
CreateElementCreate specific operation controlsMust be rewritten
CreateBindingCreate data binding for specific operation controls
GetDependencyPropertyGet the dependency property that needs to be bound in the specific operation controlMust be rewritten
GetBindingModeGet binding mode
GetUpdateSourceTriggerGet the trigger mode of updating the data source
GetConverterGet the converter to be used when binding

The specific operation control of the plain text editor can be TextBox:

cs
public override FrameworkElement CreateElement(PropertyItem propertyItem) => new System.Windows.Controls.TextBox
{
    IsReadOnly = propertyItem.IsReadOnly
};

The dependency property that needs to be bound should be TextProperty:

cs
public override DependencyProperty GetDependencyProperty() => System.Windows.Controls.TextBox.TextProperty;

The final overall code is as follows:

cs
public class PlainTextPropertyEditor : PropertyEditorBase
{
    public override FrameworkElement CreateElement(PropertyItem propertyItem) => new System.Windows.Controls.TextBox
    {
        IsReadOnly = propertyItem.IsReadOnly
    };
    public override DependencyProperty GetDependencyProperty() => System.Windows.Controls.TextBox.TextProperty;
}

Released under the MIT License.