This project has moved. For the latest updates, please go here.

How to bind custom editor (User Control, PropertyGrid) in XAML code?

Jan 29, 2012 at 5:11 PM

Let's see a sample code in documentation after words "Using a UserControl:". I just copied this code, create the custom editor UserControl1. Now I try to bind this editor in MainWindow XAML file.

<extToolkit:PropertyGrid x:Name="grid" DockPanel.Dock="Top" VerticalAlignment="Stretch" IsEnabled="True" AutoGenerateProperties="False">
        <extToolkit:EditorDefinition>
            <extToolkit:EditorDefinition.PropertiesDefinitions>
                <extToolkit:PropertyDefinition Name="LastName" />
            </extToolkit:EditorDefinition.PropertiesDefinitions>
            <extToolkit:EditorDefinition.EditorTemplate>
                <DataTemplate>
                    <wcl:UserControl1 Value="{Binding Value}"/>
                </DataTemplate>
            </extToolkit:EditorDefinition.EditorTemplate>
        </extToolkit:EditorDefinition>
    </extToolkit:PropertyGrid.EditorDefinitions>
</extToolkit:PropertyGrid>
It's didn't work (no binding, button not work). How to bind this editor in a xaml code?

Jan 31, 2012 at 3:38 PM

If you read closely, your UserControl MUST implement the ITypeEditor interface.

Jan 31, 2012 at 3:40 PM

Sorry, just realized you weren't using attributes.  What are you expecting to happen?  I do not know how you built your user control, but there must be something wrong with it.  Does it work with a normal TextBox?  Please double check your UserControl for proper construction.

Jan 31, 2012 at 4:25 PM

Yes, I don't use attributes. TextBox is working properly. <TextBox Text="{Binding Value}"/>

I just copied samle code for UserControl from documentation:

<UserControl x:Class="WpfControlLibrary1.UserControl1"
             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:d="http://schemas.microsoft.com/expression/blend/2008" mc:Ignorable="d" d:DesignHeight="46" d:DesignWidth="37">
  <StackPanel>
    <TextBox x:Name="yellowbox" Text="{Binding Value, ElementName=_uc}" Background="YellowGreen"  />
    <Button Click="Button_Click">Clear</Button>
  </StackPanel>
</UserControl>
public partial class UserControl1 : UserControl, ITypeEditor
{
  public UserControl1()
  {
    InitializeComponent();
  }

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

  private void Button_Click(object sender, RoutedEventArgs e)
  {
    Value = string.Empty;
  }

  public FrameworkElement ResolveEditor(Microsoft.Windows.Controls.PropertyGrid.PropertyItem propertyItem)
  {
    Binding binding = new Binding("Value");
    binding.Source = propertyItem;
    binding.Mode = propertyItem.IsReadOnly ? BindingMode.OneWay : BindingMode.TwoWay;
    BindingOperations.SetBinding(this, UserControl1.ValueProperty, binding);
    return this;
  }
}
Thanks for your help.

Feb 1, 2012 at 5:49 AM

Code:

<TextBox Text="{Binding Value, ElementName=_uc}" Background="YellowGreen"  />

Change to:

<TextBox Text="{Binding Value}" Background="YellowGreen"  />
It's working ;)
Feb 1, 2012 at 8:08 PM

Ahh, yes I see where your UserConrtrol wasn't named accordingly.  Glad it was fixed.