Changing Foreground of a TreeViewItem upon selection

Question

In my program I have a TreeView in which the user will select different items from. There are a few items in my TreeView that are customized upon creation in my c# code-behind.

Like so:

public static TreeViewItem newItem = new TreeViewItem() //Child Node
{
       Header = new StackPanel //ICON
       {
           Orientation = Orientation.Horizontal,
           Children =
           {
               new Border {
                   Width = 12,
                   Height = 14,

                   Background = Brushes.Blue,
                   BorderThickness = new Thickness(1.0),
                   BorderBrush = Brushes.Black
              },
              new Label {
                  Content = "Node1"
              }
           }
      }
};

I would like these items to display WHITE foregrounds when they are selected (just like the default node behavior).

This is what I have tried so far in XAML. It is a style template that I have set for TreeViewItems. I receive no compiler errors, but for some reason when I run the program my TreeView is not visible.

<Style TargetType="{x:Type TreeViewItem}" >
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TreeViewItem}">
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsSelected" Value="True" >
                                <Setter Property="Foreground" Value="White" />
                            </Trigger>
                            <Trigger Property="IsSelected" Value="False" >
                                <Setter Property="Foreground" Value="Black" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
</Style>

How can I fix this so that all of my TreeView nodes display white foregrounds when selected?

Answer 1

This is because you completely rewrite the template, and you do not write anything instead. Just to set the triggers, not necessarily to do them in the template, you can just set them in Style. Template is typically set to change the elements in the visual tree. Try this example:

<Window.Resources>
    <Style TargetType="{x:Type TreeViewItem}">
        <Style.Resources>
            <!-- Set Highlight Background color -->
            <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Black" />
        </Style.Resources>

        <Style.Triggers>
            <Trigger Property="IsSelected" Value="True">
                <!-- Set Foreground color -->
                <Setter Property="Foreground" Value="White" />
            </Trigger>
        </Style.Triggers>
    </Style>
</Window.Resources>

<Grid>
    <TreeView>
        <TreeViewItem Header="Root">
            <TreeViewItem Header="Child1" />
            <TreeViewItem Header="Child2" />
            <TreeViewItem Header="Child3" />
            <TreeViewItem Header="Child4" />
        </TreeViewItem>
    </TreeView>
</Grid>

For more information, please see:

Styling and Templating on MSDN

Example of TreeView Style/Template on MSDN

EDIT

Try this:

public TreeViewItem newItem = new TreeViewItem() //Child Node
{
    Header = new StackPanel 
    {
        Orientation = Orientation.Horizontal,

        Children =
        {
            new Border 
            {
                Width = 12,
                Height = 14,

                Background = Brushes.Blue,
                BorderThickness = new Thickness(1.0),
                BorderBrush = Brushes.Black
            },

            new Label 
            {
                Content = "Node1",
                Foreground = Brushes.Black,
            }
        }
    }
};

private void AddItem_Click(object sender, RoutedEventArgs e)
{
    // Set Selected handler on Selected event
    newItem.Selected += new RoutedEventHandler(newItem_Selected);

    // Set Unselected handler on Unselected event
    newItem.Unselected += new RoutedEventHandler(newItem_Unselected);

    // Add your item
    MyTreeView.Items.Add(newItem);
}

// Set the black color for foreground
private void newItem_Unselected(object sender, RoutedEventArgs e) 
{
    TreeViewItem MyTreeViewItem = sender as TreeViewItem;
    StackPanel MyStackPanel = MyTreeViewItem.Header as StackPanel;
    Label MyLabel = MyStackPanel.Children[1] as Label;

    MyLabel.Foreground = Brushes.Black;
}

// Set the white color for foreground
private void newItem_Selected(object sender, RoutedEventArgs e)
{
    TreeViewItem MyTreeViewItem = sender as TreeViewItem;
    StackPanel MyStackPanel = MyTreeViewItem.Header as StackPanel;
    Label MyLabel = MyStackPanel.Children[1] as Label;

    MyLabel.Foreground = Brushes.White;         
}

Note: This code can be shortened and made easier if you use a template for TreeViewItem.