TreeViewItem foreground (metro theme)

[Olya]

Hello,

I need to change the foreground color of RadTreeViewItems with the rest of Metro theme settings for RadTreeView still applied. (I  attached a picture to the post).
I have a RadTreeView declaration in Xaml:

<local:CustomTaskTree
           x:Class="AnswerPro.Templates.Silverlight.DefaultTaskTelerik.Tool.TaskTree.TaskTree"
           xmlns:local="clr-namespace:AnswerPro.Templates.Silverlight.DefaultTaskTelerik.Tool.TaskTree"
           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
           xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
           xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
           xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"           
           xmlns:telerikNavigation="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Navigation"    
           xmlns:Commands="clr-namespace:AnswerPro.Templates.Silverlight.Common.Command;assembly=AnswerPro.Templates.Silverlight"
           mc:Ignorable="d"       
           d:DesignWidth="640" d:DesignHeight="480"
           Title="Список задач">

    <Grid x:Name="LayoutRoot">
        <telerikNavigation:RadTreeView
            x:Name="tvTask"
            ItemContainerStyle="{StaticResource YotaItemContainerStyle}"
            VerticalAlignment="Stretch"
            Commands:Commands.CommandEvent="Selected"
            Commands:Commands.CommandParameter = "{ Binding ElementName=tvTask, Path=SelectedItem.Tag }"
            Commands:Commands.Command = "{ Binding ShowTaskCommand.Command }"
            />
    </Grid>
</local:CustomTaskTree>

But TreeViewItems are generated somehow in code-behind so I don't have access to them in xaml :( I tried applying the following ItemContainerStyle to the RadTreeView:

<Style x:Key="YotaItemContainerStyle" TargetType="telerik:RadTreeViewItem">
<Setter Property="Foreground" Value="Red"/>
</Style>

But it didn't work. It seems that metro theme that is declared for the application is somehow overwriting Item property setting that I try to change.

Is there a way to maybe apply some style to the RadTreeView that would change this color and keep the rest of metro theme settings?

[Lancelot]

Hi Olya,

You have the right idea, but you are setting the Foreground property of the wrong element and also you'll need to take advantage of the new implicit theming ability for the controls. You want to aim for the part that contains the text that you want to change the foreground of, just applying a Foreground property to the entire Item template won't work. Especially since you are using the style manger, it will override any set style you prepare.

Go to this link first, and learn about implicit styles. This is what you will need to do if you want to use the metro them, yet only change the foreground on a TreeViewItem. Take your time on this section and learn how to set it up properly, once you do you'll have a great amount of control over the appearance of your application.

Now that you've read up on implicit styles, lets take a look at this link, it will bring you to the RadTreeView template structure. It shows you all of the parts of the control template. That will give you an idea of where to begin when altering the template.

Next, lets look at the TreeViewItemTemplate. Find that at this link. The text is inside a ContentPresenter named Header which is bound to your theme via TemplateBinding to the Header item in your theme. I've attached an image to this post to show you where to look.

Once you do this, any generated items will match your Foreground color in any part of the app you have set your theme to. This is a couple extra steps than you would normally do, but once accomplished provide great flexibility in your application.

Good Luck
Lancelot

[Olya]

Lancelot,

Thank you so much for such detailed reply and lots of advice.