Custom Editor showing a Dialog

Feb 23, 2011 at 7:47 PM

Hello,

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

Coordinator
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,
                                                                          FrameworkPropertyMetadataOptions.
                                                                              BindsTwoWayByDefault));

            static PropertyStringEditor()
            {
                DefaultStyleKeyProperty.OverrideMetadata(typeof(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}" />
    </DataTemplate>

    <Style TargetType="{x:Type local:PropertyStringEditor}">
        <Setter Property="MinWidth" Value="30" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:PropertyStringEditor}">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>
                        <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" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

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}"
                            VerticalAlignment="Stretch"
                             ShowTabs="False"
                            ShowCategoriesAs="Expander"
                             
                            >
            <wpt:PropertyEditor.Editors>
                <wpt:TypeEditor EditedType="{x:Type System:String}" EditorTemplate="{StaticResource EditMultilineString}"/>

            </wpt:PropertyEditor.Editors>

        </wpt:PropertyEditor>

Voila

 

 

Coordinator
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.