Custom Editor showing a Dialog

Feb 23, 2011 at 7:47 PM


I would like to implement an editor to edit multi-line strings (i.e. strings with return). I would like this editor to be a Dialog constructed as a WPF Window in my application (so with the look and feel of my application) and the TextBox in the Property Editor would show a button with '...' that would show the dialog when clicked.

In the demo application I can see Custom editors but they all are "in place" editors. In the library, I can see the detailed implementation for FilePicker which uses a kind of Control to bridge between the PropertyEditor and the external dialog which is not my scenario neither.

Is there a way to implement what I want using the library without the need to change the library ? How would I do that ?

Thank you

Feb 25, 2011 at 9:35 AM

hi Giko, 

I think this is a feature that can be added to the issue list - to support some kind of "UITypeEditor".

It is possible to do it with a custom PropertyViewModel and a template, but I agree it should be easier to do.

I'll add it to the issue tracker !

Feb 25, 2011 at 11:57 AM

Hello Objo,

The solution I came with, inspired by the demo and the library, was done within my application that is, without modifying the library

First I defined a control which encapsulates the dialog window , like this

    public class PropertyStringEditor : Control

            public static readonly DependencyProperty StringToEditProperty =
                DependencyProperty.Register("StringToEdit", typeof(string), typeof(PropertyStringEditor),
                                            new FrameworkPropertyMetadata(null,

            static PropertyStringEditor()
                                                         new FrameworkPropertyMetadata(typeof(PropertyStringEditor)));

            public PropertyStringEditor()
                BrowseCommand = new DelegateCommand(Browse);

            public string StringToEdit
                get { return (string)GetValue(StringToEditProperty); }
                set { SetValue(StringToEditProperty, value); }

            public ICommand BrowseCommand { get; set; }

            private void Browse()

                var d = new StringEditorDialog();
                d.StringToEdit = StringToEdit;

                if (true == d.ShowDialog())
                    StringToEdit = d.StringToEdit;

Then I defined the following template and style

 <DataTemplate x:Key="EditMultilineString">
        <local:PropertyStringEditor StringToEdit="{Binding Value, ValidatesOnDataErrors=True}" />

    <Style TargetType="{x:Type local:PropertyStringEditor}">
        <Setter Property="MinWidth" Value="30" />
        <Setter Property="Template">
                <ControlTemplate TargetType="{x:Type local:PropertyStringEditor}">
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="Auto" />
                        <TextBox Height="20" Text="{Binding StringToEdit,RelativeSource={RelativeSource TemplatedParent}}" />
                        <Button Height="20" Grid.Column="1" MinWidth="40" Content="..." Command="{Binding BrowseCommand,RelativeSource={RelativeSource TemplatedParent}}" Margin="0 0 0 0" />

And last I defined the new Editor in the PropertyEditor


        <wpt:PropertyEditor Name="pe" DataContext="{Binding Source={x:Static mod:StateManager.Instance}}"   
                            SelectedObject="{Binding SelectedObject}"
                <wpt:TypeEditor EditedType="{x:Type System:String}" EditorTemplate="{StaticResource EditMultilineString}"/>






Feb 25, 2011 at 5:49 PM

Nice solution! Nothing is better than no changes in the library :)

There should still be a general way to define some properties to have a "Browse" button and an action connected to it - I think a new attribute and a "BrowsablePropertyViewModel" could solve this.