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

TreeViewItem foreground (metro theme)

2 Answers 187 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Olya
Top achievements
Rank 1
Olya asked on 19 Jun 2012, 03:07 PM
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?

2 Answers, 1 is accepted

Sort by
0
Accepted
Lancelot
Top achievements
Rank 1
answered on 21 Jun 2012, 09:10 PM
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
0
Olya
Top achievements
Rank 1
answered on 22 Jun 2012, 07:37 AM
Lancelot,

Thank you so much for such detailed reply and lots of advice.
Tags
TreeView
Asked by
Olya
Top achievements
Rank 1
Answers by
Lancelot
Top achievements
Rank 1
Olya
Top achievements
Rank 1
Share this question
or