How can I use Blend or VS Designer to Edit Default Style Template for WPF PropertyGrid

Question

I am using the Extended WPF Toolkit Community Edition v2.6 from NuGet in my project, but I don't know if there is something more I should be doing to allow me to theme or customize a control template.

After asking Designer/Blend to create a Copy of the Existing default Template for the PropertyGrid control, the UI is broken. The Template looks correct but no longer functions at Design-Time or Run-Time.

After choosing to copy the default template into a new a Style:

Is there an easy way to edit the built-in styles for this control? I am really just trying to override the foreground/background colors of the Editors/Labels of the PropertyGrid.

I've tried some manual poking in the XAML with limited success:

<Style TargetType="{x:Type xctk:DropDownButton}">
  <Setter Property="Background" Value="Black"/>
  <Setter Property="Foreground" Value="White"/>
</Style>
<Style TargetType="{x:Type xctk:CustomPropertyItem}">
  <Setter Property="Background" Value="Black"/>
  <Setter Property="Foreground" Value="White"/>
</Style>
<Style TargetType="{x:Type xctk:PropertyGridEditorCollectionControl}">
  <Setter Property="Background" Value="Black"/>
  <Setter Property="Foreground" Value="White"/>
</Style>

When trying to create a Property Container style, by copying the default, I get the "Copy Style failed." error from within the VS Designer or Blend.

Results in this:

I have tried manually including the generic.xaml from the Xceed Toolkit assembly but it hasn't fixed the problem.

I tried two ways of referencing the resource:

<ResourceDictionary Source="/Xceed.Wpf.Toolkit;component/themes/generic.xaml" />

<ResourceDictionary Source="pack://application:,,,/Xceed.Wpf.Toolkit;component/Themes/generic.xaml">

Here is the stack trace from the Designer when I try to set the PropertyContainerStyle:

Answer 1

To get the complete PropertyGrid's contol template directly from Xceed.Wpf.Toolkit.dll you can try to use this code in any WPF application (note that you need to have <Grid x:Name="RootGrid" /> anywhere in your xaml for this example to work):

        var type = Assembly.LoadFile(@"C:\path\to\file\Xceed.Wpf.Toolkit.dll")
            .GetType("Xceed.Wpf.Toolkit.PropertyGrid.PropertyGrid");

        // Instantiate the type.
        var info = type.GetConstructor(Type.EmptyTypes);
        var control = (Control)info.Invoke(null);

        // Add it to the grid (but keep it hidden).
        control.Visibility = Visibility.Collapsed;
        this.RootGrid.Children.Add(control);

        // Get the template.
        var template = control.Template;

        // Get the XAML for the template.
        var settings = new XmlWriterSettings();
        settings.Indent = true;
        var sb = new StringBuilder();
        var writer = XmlWriter.Create(sb, settings);
        XamlWriter.Save(template, writer);

        // Display the template any appropriate way.
        Trace.Write(sb.ToString());

After getting control template xaml with sb.ToString() you can copy/paste it for using in your PropertyGrid and edit any colors you need.

Answer 2

The "Edit a Copy" option in Blend is not always accurate. You can't see the PropertyItems in the PropertyGrid when using the copied template because an ItemsSource was not copied.

Have a look at "PART_PropertyItemsControl" in the style targeting "PropertyGrid" : There is no ItemsSource. Set it to : ItemsSource="{Binding Properties, RelativeSource={RelativeSource TemplatedParent}}" and you will see the PropertyItems.