How to use Relative Source binding to get the Parent class?

Question

I have a TreeView with a HierarchicalDataTemplate like this:

<TreeView ItemsSource="{Binding Situation.TopLevelSituationList}">
    <TreeView.Resources>
        <HierarchicalDataTemplate DataType="{x:Type local:GroupSubGroup}" ItemsSource="{Binding SubGroups}"/>
        <HierarchicalDataTemplate DataType="{x:Type local:GroupDecision}" ItemsSource="{Binding Decisions}">
            <HierarchicalDataTemplate.ItemTemplate>
                <DataTemplate>
                    <TextBlock Style="{StaticResource TextBlockBaseStyling}" Text="{Binding}"/>
                </DataTemplate>
            </HierarchicalDataTemplate.ItemTemplate>
        </HierarchicalDataTemplate>
    </TreeView.Resources>

In my base, abstract class, it is set up like this:

public abstract class Group
{
    private bool isSelected;
    public bool IsSelected
    {
        get
        {
            return this.isSelected;
        }
        set
        {
            this.isSelected = value;
            OnPropertyChanged("IsSelected");
        }
    }

The two classes that derive from this class are references in my TreeView, each with their own HierarchicalDataTemplate (GroupSubGroup, GroupDecision).

This is my problem:

<HierarchicalDataTemplate DataType="{x:Type local:GroupDecision}" ItemsSource="{Binding Decisions}">

This ItemsSource is a collection of Strings. I know I need to use RelativeBinding to reference other properties in the GroupDecision class.

My TreeView is something like this: GroupSubGroups' ItemsSource is a Collection of type Group so I will always have a reference to the IsSelected property directly.

For a visual aid, this is what my TreeView and TreeView Items look like:

 ------------------------------------
| This row is a GroupDecision       |
| --------------------------------  |
| This row is a Decision (str)      |
| This row is also a Decision (str) |
|                                   |
-------------------------------------

When I select the top row, the GroupDecision row, I am able to fire a PropertyChange on the IsSelected property. However, if I were to select a Decision row, I do not get the same firing because it is actually a String.

The whole purpose of this is to make the border of the TreeViewItem thicker when it is selected but I can only do that if I select the top row but I want to have the same functionality if I select a Decision string since it is contained within as well..

I hope that was clear. Please let me know if I can further explain.

Edit: I applied a style to the Border but it does not increase the size of the border thickness when clicking a String row:

<Border.Style>
    <Style TargetType="Border">
        <Setter Property="BorderBrush" Value="{Binding GroupColor}"/>
        <Setter Property="Grid.Column" Value="1"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Style.Triggers>
            <DataTrigger Binding="{Binding IsSelected, UpdateSourceTrigger=PropertyChanged}" Value="True">
                <Setter Property="BorderThickness" Value="3"/>
            </DataTrigger>
        </Style.Triggers>
    </Style>
</Border.Style>

You're selecting the treeviewitem. You could use relativesource to find the parent tvi in a datatrigger. Or you could define a style for treviewitem that sets a style targeting border and increases border width. Put a border in your templates and I think the style would apply to that (them). — Andy
@Andy I used your second recommendation but the border does not stay at a thickness of value 3 when clicking a String row, it stays at 1. — JetsYanks08

Andy Andy · Accepted Answer · 2018-04-17T14:16:19

Since you need to define a border in each of the templates anyhow, it's fairly simple to explicitly give it a style you define as a resource.

Define the style in TreeView.Resources:

   <TreeView.Resources>
        <Style TargetType="Border" x:Key="ExpandingBorder">
            <Setter Property="BorderBrush" Value="Black"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Style.Triggers>
                <DataTrigger Binding="{Binding IsSelected
, RelativeSource={RelativeSource AncestorType=TreeViewItem}}" 
  Value="True">
                    <Setter Property="BorderThickness" Value="3"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>

You can then use that on any borders in your templates. For example:

<HierarchicalDataTemplate DataType="{x:Type local:Family}" ItemsSource="{Binding Members}">
    <Border Style="{StaticResource ExpandingBorder}">
        <StackPanel Orientation="Horizontal"
                    Height="32"
                    >
            <Label VerticalAlignment="Center" FontFamily="WingDings" Content="1"/>
            <TextBlock Text="{Binding Name}" />
        </StackPanel>
    </Border>
</HierarchicalDataTemplate>

How to use Relative Source binding to get the Parent class?

1 Answers