This is a migrated thread and some comments may be shown as answers.

Foreground color of TreeViewItem with custom header

1 Answer 49 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Christoph
Top achievements
Rank 1
Veteran
Christoph asked on 03 Dec 2020, 02:52 PM

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?

1 Answer, 1 is accepted

Sort by
0
Vladimir Stoyanov
Telerik team
answered on 08 Dec 2020, 08:01 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
TreeView
Asked by
Christoph
Top achievements
Rank 1
Veteran
Answers by
Vladimir Stoyanov
Telerik team
Share this question
or