WPF Extended Toolkit Property Grid - Edit ExpandableObject title

Question

I'm using the WPF Extended Toolkit Property Grid. I'm using an editor user control to display a list of objects, it looks like this:

My user wants to be able to change the number in the "Elements" description, and have the code adjust the number of elements in the list.

{ removed incomplete code, see answer below for working code }

Is there some way to put my own control to replace the label that says "3 elements" with a TextBox so I can process changes to the text and change my arrays?

Thanks, David

Answer 1

Ok, sorry for the delay, but here is the working code for my question...I hope it helps someone.

As a recap, what I wanted to do, was produce a PropertyGrid Entry that looks like this:

In summary, what you need to do is create two User Control property Grid Editors, one for the summary line (the spin box and element label above), and another for the data list. All of the associated code is below:

So, to start, here is the Element class:

public class Element 
{
    public Element(int number, double wtf)
    {
        Number = number;
        WTF = wtf;
    }

    public int Number { get; set; }

    public double WTF { get; set; }
}

I also have a View Model for the Element:

public class ElementViewModel : XTRRABase
{
    public Element _element;

    public ElementViewModel(Element element)
    {
        _element = element;
    }

    public int Number
    {
        get { return _element.Number; }
        set { _element.Number = value; NotifyPropertyChanged(); }
    }

    public double WTF
    {
        get { return _element.WTF; }
        set { _element.WTF = value; NotifyPropertyChanged(); }
    }

    public String ElementInfo
    {
        get { return XTRRAApp.Application.AtomicElementList.GetElements()[Number]; }
        set { }
    }
}

The ElementInfo property returns the element name (like "6 (Carbon)" in the example).

In the parent view model (the object containing the Elements property), the property looks like this:

    ElementListViewModel _elements;
    [PropertyOrder(4), DisplayName("Elements")]
    [ExpandableObject]
    [Editor(typeof(ElementHeaderUCEditor), typeof(ElementHeaderUCEditor))]
    public ElementListViewModel Elements
    {

        get { return (_elements = new ElementListViewModel(_material.Elements) ); }
        set {}
    }

Note that this object is both ExpandableObject and has a defined editor ElementHeaderUCEditor

The ElementHeaderUCEditor defines the IntegerUpDown spin box and the 'elements' label. It's XAML looks like this:

<UserControl x:Class="XTRRAApp.View.Editors.ElementHeaderUCEditor"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit">
    <StackPanel Orientation="Horizontal" Background="White">
        <xctk:IntegerUpDown Text="{Binding Value.Count,UpdateSourceTrigger=PropertyChanged}" Width="100" Margin="2,2,2,2" ParsingNumberStyle="Integer"/>
        <Label Content="Elements" Width="Auto" Margin="2,2,2,2"/>
    </StackPanel>
</UserControl>

and the code-behind:

public partial class ElementHeaderUCEditor : UserControl, ITypeEditor
{
    public ElementHeaderUCEditor()
    {
        InitializeComponent();
    }

    public static readonly DependencyProperty ValueProperty = DependencyProperty.Register("Value", typeof(ElementListViewModel), typeof(ElementHeaderUCEditor),
                                                                    new FrameworkPropertyMetadata(null, FrameworkPropertyMetadataOptions.BindsTwoWayByDefault));
    public ElementListViewModel Value
    {
        get { return (ElementListViewModel)GetValue(ValueProperty); }
        set { SetValue(ValueProperty, value); }
    }

    public FrameworkElement ResolveEditor(Xceed.Wpf.Toolkit.PropertyGrid.PropertyItem propertyItem)
    {
        Binding binding = new Binding("Value");
        binding.Source = propertyItem;
        binding.Mode = propertyItem.IsReadOnly ? BindingMode.OneWay : BindingMode.TwoWay;
        BindingOperations.SetBinding(this, ElementHeaderUCEditor.ValueProperty, binding);
        return this;
    }
}

Next, here is the ElementListViewModel which provides the data for the List:

[DisplayName("Elements")]
public class ElementListViewModel : XTRRABase
{
    protected List<Element> _elements;

    public ElementListViewModel(List<Element> elements)
    {
        _elements = elements;
    }

    [Browsable(false)]
    public int Count
    {
        get { return _elements.Count; }
        set 
        { 
            while(value < _elements.Count)
            {
                _elements.RemoveAt(_elements.Count - 1);
            }
            while(value > _elements.Count)
            {
                _elements.Add(new Element(0,0));
            }
            NotifyPropertyChanged();
            NotifyPropertyChanged("Elements");
        }
    }

    [PropertyOrder(1), DisplayName("Elements")]
    [Editor(typeof(ElementUCEditor), typeof(ElementUCEditor))]
    public ObservableCollection<ElementViewModel> Elements
    {
        get
        {
            ObservableCollection<ElementViewModel> list = new ObservableCollection<ElementViewModel>();

            foreach(Element element in _elements)
            {
                list.Add(new ElementViewModel(element));
            }
            return list;
        }
        set { }
    }
}

XTRRABase is just a common base class I use to avoid duplicating the notification code:

public abstract class XTRRABase : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    public void NotifyPropertyChanged([CallerMemberName] String propertyName = "")
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

The Elements, as you can see are displayed using another User Control `ElementUCEditor' it's XAML looks like this:

and the code-behind for it:

public partial class ElementUCEditor : UserControl, ITypeEditor
{
    public ElementUCEditor()
    {
        InitializeComponent();
    }

    public static readonly DependencyProperty ValueProperty = DependencyProperty.Register("Value", typeof(ElementListViewModel), typeof(ElementUCEditor),
                                                                                    new FrameworkPropertyMetadata(null, FrameworkPropertyMetadataOptions.BindsTwoWayByDefault));
    public ElementListViewModel Value
    {
        get { return (ElementListViewModel)GetValue(ValueProperty); }
        set { SetValue(ValueProperty, value); }
    }

    public FrameworkElement ResolveEditor(Xceed.Wpf.Toolkit.PropertyGrid.PropertyItem propertyItem)
    {
        Binding binding = new Binding("Value");
        binding.Source = propertyItem;
        binding.Mode = propertyItem.IsReadOnly ? BindingMode.OneWay : BindingMode.TwoWay;
        BindingOperations.SetBinding(this, ElementUCEditor.ValueProperty, binding);
        return this;
    }

}