Change the colour of the particular element in Treeview WPF

Question

I have a Treeview in my WPF application. On the fly, in run time, If the element of the Tree meets certain condition, It should change its Font color from Black To Red.!

XAML

<TreeView Grid.Column="0" Grid.Row="0"  HorizontalAlignment="Stretch" Name="treeView1" 
                      VerticalAlignment="Stretch"
                      SelectedItemChanged="treeView1_SelectedItemChanged" HorizontalContentAlignment="Stretch" 
                      VerticalContentAlignment="Top" BorderThickness="0,0,0,1" BorderBrush="LightGray">

    <TreeViewItem Header="Head Tree" ItemsSource="{Binding MainComps}">
        <TreeViewItem.ItemContainerStyle>
            <Style TargetType="{x:Type TreeViewItem}">
                <Setter Property="IsExpanded" Value="{Binding IsExpanded, Mode=TwoWay}" />
            <Setter Property="IsSelected" Value="{Binding IsSelected, Mode=TwoWay}" />
            <Setter Property="FontWeight" Value="Normal" />

            <Style.Triggers>
                <Trigger Property="IsSelected" Value="True">
                    <Setter Property="FontWeight" Value="Bold" />
                </Trigger>

                <DataTrigger Binding="{Binding IsSelected}" Value="True">
                        <Setter Property="Foreground" Value="RED" />
                </DataTrigger>
            </Style.Triggers>                                 
        </Style>
    </TreeViewItem.ItemContainerStyle>

    <TreeViewItem.Resources>
        <HierarchicalDataTemplate  DataType="{x:Type TextBlock}" ItemsSource="{Binding Children}">
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="Head Tree" />
            </StackPanel>
        </HierarchicalDataTemplate>

        <HierarchicalDataTemplate DataType="{x:Type local:MainCompViewModel}" ItemsSource="{Binding Children}">
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding Maincompname}" />
            </StackPanel>
        </HierarchicalDataTemplate>

        <HierarchicalDataTemplate DataType="{x:Type local:FeatureViewModel}" ItemsSource="{Binding Children}">
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding FeatureName}" />
            </StackPanel>
        </HierarchicalDataTemplate>

        <DataTemplate DataType="{x:Type local:CompViewModel}">
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding Component}" />
            </StackPanel>
        </DataTemplate>                               
    </TreeViewItem.Resources>
    </TreeViewItem>
</TreeView>

Code behind

private void treeView1_SelectedItemChanged(object sender, RoutedPropertyChangedEventArgs<object> e)
{
    if(selected Item meets certain condition)
    {
         //Change color of tree node
    }
}

How can I change the color of particular Node and leave it in the same color SO that when expanded again It should be in RED. Any help would be appreciated.

Solution 1

You could create a boolean property in the model which is true when the elements meets the condition. Then you bind the Foreground like so:

                       <TreeView.ItemContainerStyle>
                            <Style TargetType="{x:Type TreeViewItem}">
                                <Style.Triggers>
                                    <DataTrigger Binding="{Binding Path=BoolProp}" Value="False">
                                        <Setter Property="Foreground" Value="Blue"></Setter>
                                    </DataTrigger>
                                    <DataTrigger Binding="{Binding Path=BoolProp}" Value="True">
                                        <Setter Property="Foreground" Value="Red"></Setter>
                                    </DataTrigger>
                                </Style.Triggers>
                            </Style>
                        </TreeView.ItemContainerStyle>

or with converter:

                       <TreeView.ItemContainerStyle>
                            <Style TargetType="{x:Type TreeViewItem}">
                                <Setter Property="Foreground" Value="{Binding Path=BoolProp, Converter={StaticResource ResourceKey=TheKey}}"/>
                            </Style>
                        </TreeView.ItemContainerStyle>

Solution 2

Just change the Foreground:

TreeViewItem ti = (TreeViewItem)treeView1.SelectedItem;
ti.Foreground = Brushes.Red;

Comments

[BinaryMee]

AM Getting this error. 'System.Windows.Controls.TreeView' does not contain a definition for 'SelectedNode' and no extension method 'SelectedNode' accepting a first argument of type 'System.Windows.Controls.TreeView' could be found (are you missing a using directive or an assembly reference?)

[Florian Gl]

I think its SelectedItem, not SelectedNode.

[MedMik]

Yes, SelectedItem seems to be the way to go in WPF (was using forms). But that returns an Object. Try something like: TreeViewItem ti =(TreeViewItem)treeView1.SelectedItem; ti.Foreground = Color.Red;

[BinaryMee]

Instead of particular element all child below the selected node becomes red.

[MedMik]

Edited again, hope it helps: try Brushes.Red instead of Color.Red.

[Pratik]

@BinaryMee How did you solve the issue of all children becoming red?