Foreground color of TreeViewItem with custom header

[Christoph]

Hello,

we're currently updating our application to use Telerik components in order to make use of implicit styling.
I'm making good progress so far but am stuck at this one.

We're currently using the Office2019 theme in the Light color variation.
The problem I'm facing is with the selection of a TreeViewItem and the involved change of the Foreground color that goes along with it.

For TreeViewItems that use a string as a header this works just fine. The item i selected, the Background changes to blue and the Foreground to white. Perfetly readable.

However if I use a grid (containing a TextBlock) as the Header the foreground of the TextBlock remains black and does not change to white.

I tried binding the Foreground color of the TextBlock to the Foreground color of the parent TreeViewItem like so:

Binding binding = new Binding("Foreground");
binding.RelativeSource = new RelativeSource(RelativeSourceMode.FindAncestor, typeof(RadTreeViewItem), 1);
tb.SetBinding(TextBlock.ForegroundProperty, binding);

 

However this does not work. Possible because the Foreground property of the TreeViewItem is never changed, but only the Foreground property of the header:

<!-- IsSelected general setters -->
<Trigger Property="IsSelected" Value="True">
    <Setter TargetName="Header" Property="Foreground" Value="{telerik1:Office2019Resource ResourceKey=CheckedForegroundBrush}"/>
    <Setter TargetName="BorderVisual" Property="Background" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(helpers:ThemeHelper.CheckedBrush)}"/>
</Trigger>

 

I tried to add another setter to this trigger and set the Foreground property of the TreeViewItem. This kind of works, but unfortunately propagates through all child items of a TreeViewItem.

Any suggestions on how my desired behaviour could be implemented?

[Vladimir Stoyanov]

Hello Christoph,

Thank you for the shared information and code snippet. 

Can you try the HeaderTemplate property when you want to customize the header visually? Here is what I have in mind:

 <telerik:RadTreeViewItem >
                <telerik:RadTreeViewItem.HeaderTemplate>
                    <DataTemplate>
                        <Grid>
                            <TextBlock Text="Item 1" />
                        </Grid>
                    </DataTemplate>
                </telerik:RadTreeViewItem.HeaderTemplate>
 </telerik:RadTreeViewItem>

With this approach the foreground should be changed as intended. Do give it a try and let me know, if it helps.

Regards,
Vladimir Stoyanov
Progress Telerik