Change PropertyGridDataAccessorItem for Categories

Grids for WPF Forum

Posted 8 years ago by pgenfer
Version: 10.2.0532
Avatar
Hi,

I use a PropertyGrid with nested categories (as the objects we show via the grid often have hierarchical references to other objects).
As this structures can be sometimes confusing for the user, I would like to use different colors for the category background depending on the level of depth.

I found some sample code in the forum which changes the background color of items with "Property" as DataAccessorType and tried to use this code for categories:

<Style TargetType="{x:Type propgrid:PropertyGridDataAccessorItem}">
 <Style.Triggers>
    <DataTrigger Binding="{Binding DataAccessorType,
                 RelativeSource={RelativeSource Self}}"
                 Value="Category">
       <Setter Property="Background" Value="Pink"/>
    </DataTrigger>
 </Style.Triggers>
</Style>
Unfortunately, this does not change the background of category items (but the same code works for Background of property items and the Foreground color of category items, so I suppose changing the background color of a category item like this is not possible?).

Is there a way I can change the background color of a category item without defining a complete new style for PropertyGridDataAccessorItem? And can I also change the indent of items in the same way?

Any help would be appreciated.

Thanks,
Patric

Comments (9)

Posted 8 years ago by Actipro Software Support - Cleveland, OH, USA
Avatar
Hi Patric,

The background of the category items is mostly (if not completely) covered up by other elements, such as the header row or sub-properties. You can make the header row's background transparent though, so the background will show through like so:
xmlns:themes="http://schemas.actiprosoftware.com/winfx/xaml/themes"
...
<SolidColorBrush x:Key="{x:Static themes:PropertyGridCommonDictionary.CategoryHeaderBackgroundBrushKey}" Color="Transparent" />

<Style TargetType="{x:Type propgrid:PropertyGridDataAccessorItem}">
    <Style.Triggers>
        <DataTrigger Binding="{Binding DataAccessorType, RelativeSource={RelativeSource Self}}" Value="Category">
            <Setter Property="Background" Value="Pink" />
        </DataTrigger>
    </Style.Triggers>
</Style>
You can get the depth of an item using the PropertyGridDataAccessorItem.Depth or CategoryDepth properties. Also, you can change the indentation using the PropertyGridDataAccessorItem.IndentationIncrement property.


Actipro Software Support

Posted 8 years ago by pgenfer
Avatar
Hi,

This was exactly what I was looking for!

Thanks again for your fast and comprehensive help.

Greetings,

Patric
Posted 7 years ago by Dariusz Wasacz
Avatar
Is this method still valid on the current release (Version 2011.2 build 0551)?
When I enter the above, the designer gives me the error: "Type 'themes:PropertyGridCommonDictionary' was not found."
Posted 7 years ago by Actipro Software Support - Cleveland, OH, USA
Avatar
Hi Dariusz,

No, as described in our help file, we have consolidated our brush assests across all our products to simplify our themes, making it easier to provide a consistent look (as well as easier to build customize themes). That specific resource was replaced by:
themes:AssetResourceKeys.ContainerMediumBackgroundNormalBrushKey


Actipro Software Support

Posted 7 years ago by Dariusz Wasacz
Avatar
Thank you for the answer. :-)

When set color of a category, only the row with the category itself is changed. Is there any way to change the color of the indentation of properties? It is grey, and I wanted it to be the same as category color.
Posted 7 years ago by Actipro Software Support - Cleveland, OH, USA
Avatar
Hi Dariusz,

For that you would need to set the TreeListViewToggleButton.CategoryBackground property for the various toggle buttons used by the property items. Something like this will change all the indentation borders to Red:
<Style x:Key="{x:Type propgrid:TreeListViewToggleButton}" TargetType="{x:Type propgrid:TreeListViewToggleButton}">
    <Setter Property="CategoryBackground" Value="Red" />
</Style>
If you wanted to have the TreeListViewToggleButton.CategoryBackground match the parent category, then you'd have to use a custom attached/inherited dependency property, say MyProperties.CategoryBackgroundProperty. Then set that property on the category, instead of Background, and bind things like:
<Style TargetType="{x:Type propgrid:PropertyGridDataAccessorItem}">
    <Style.Triggers>
        <DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=DataAccessorType}" Value="Category">
            <Setter Property="local:MyProperties.CategoryBackground" Value="Pink" />
            <Setter Property="Background" Value="{Binding RelativeSource={RelativeSource Self}, Path=(local:MyProperties.CategoryBackground)}" />
        </DataTrigger>
    </Style.Triggers>
</Style>

<Style x:Key="{x:Type propgrid:TreeListViewToggleButton}" TargetType="{x:Type propgrid:TreeListViewToggleButton}">
    <Setter Property="CategoryBackground" Value="{Binding RelativeSource={RelativeSource Self}, Path=(local:MyProperties.CategoryBackground)}" />
</Style>


Actipro Software Support

Posted 7 years ago by Dariusz Wasacz
Avatar
Can't get it working :-(

I defined the attached property like this:
   public static class CategoryBackgroundProvider
   {
      public static Brush GetCategoryBackground(DependencyObject obj)
      {
         return (Brush)obj.GetValue(CategoryBackgroundProperty);
      }

      public static void SetCategoryBackground(DependencyObject obj, Brush value)
      {
         obj.SetValue(CategoryBackgroundProperty, value);
      }

      public static readonly DependencyProperty CategoryBackgroundProperty =
          DependencyProperty.RegisterAttached("CategoryBackground", typeof(Brush), typeof(CategoryBackgroundProvider));

   }
and the xaml is (according to your previous post):
        <Style TargetType="{x:Type propgrid:PropertyGridDataAccessorItem}">
            <Style.Triggers>
                <DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=DataAccessorType}"
                             Value="Category">
                    <Setter Property="local:CategoryBackgroundProvider.CategoryBackground"
                            Value="Pink" />
                    <Setter Property="Background"
                            Value="{Binding RelativeSource={RelativeSource Self}, Path=(local:CategoryBackgroundProvider.CategoryBackground)}" />
                </DataTrigger>
            </Style.Triggers>
        </Style>

        <Style x:Key="{x:Type propgrid:TreeListViewToggleButton}"
               TargetType="{x:Type propgrid:TreeListViewToggleButton}">
            <Setter Property="CategoryBackground"
                    Value="{Binding RelativeSource={RelativeSource Self}, Path=(local:CategoryBackgroundProvider.CategoryBackground)}" />
        </Style>
Now the category caption is pink, but the indent area is white (blank).
Posted 7 years ago by Actipro Software Support - Cleveland, OH, USA
Avatar
Hi Dariusz,

Your attached property is not defined as inherited, you'd need to use something like:
public static readonly DependencyProperty CategoryBackgroundProperty =
          DependencyProperty.RegisterAttached("CategoryBackground", typeof(Brush), typeof(CategoryBackgroundProvider),
          new FrameworkPropertyMetadata(Brushes.White, FrameworkPropertyMetadataOptions.Inherits));
Because you didn't specify the inherited option, the Brush set on the category would not be passed down the to the toggle buttons.


Actipro Software Support

Posted 7 years ago by Dariusz Wasacz
Avatar
Now it works perfect! Thank you :-)
The latest build of this product (v2018.1 build 0675) was released 15 days ago, which was after the last post in this thread.

Add Comment

Please log in to a validated account to post comments.