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:

Stirring

What was wrong with the styles that you tried (the "I've tried some manual poking in the XAML with limited success"). Did it not work? Did it overwrite other things? – Shithead

The screenshot above shows what happened after I tried to create the style. The entire control collapsed to just a bar, as if the Items collection was empty. I have since found I should manually include the generic.xaml but it didn't help my situation. I still cannot style this PropertyGrid. – Stirring

What version of VS are you using? In VS Professional 2015 with Update 1 creating a copy of a default template worked for both ways you described (either with "Edit Template" and "Edit Additional Templates") without breaking UI. I'm using the same toolkit v2.6 but without nuget (just downloaded and referenced libraries). But notice - for this tests I just created empty PropertyGrid. I can share generated templates if you need. – Lactam

Answer 1

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.

Sikes

Answer 2

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.

Lactam