Setting IsExpanded on a WPF TreeViewItem from a DataTrigger

Suzanne Soy picture Suzanne Soy · Aug 23, 2013 · Viewed 17.6k times · Source

I'm trying to set the IsExpanded property of my TreeView items using a conditional template, in the XAML:

<DataTrigger Binding="{Binding MyStatus}" Value="Opened">
    <Setter TargetName="MyTextBlock" Property="Foreground" Value="Green"/>
    <Setter Property="TreeViewItem.IsExpanded" Value="True" />
</DataTrigger>

When I set the MyStatus property from the C# code, the colors are changed (so the DataTrigger works), but the nodes aren't expanded.

_myItems[0].MyStatus = MyStatus.Opened;

How can I set the TreeViewItem.IsExpanded property from a DataTrigger?

When I start the application, the colors are correctly set, but the green node isn't expanded:

Screenshot just after starting the application

And after changing the value of _myItems[0].MyStatus and _myItems[1].MyStatus, the colors are changed accordingly, but the green node still isn't expanded.

Screenshot after clicking the Button1

Full Code (XAML)

The full code is a bit long, but it's 90% boilerplate.

<Window x:Class="WpfApplication6.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="150" Width="250">
    <DockPanel>
        <DockPanel.Resources>
            <HierarchicalDataTemplate ItemsSource="{Binding SubItems}" x:Key="MyTemplate">
                <StackPanel Orientation="Horizontal">
                    <!-- ... -->
                    <TextBlock x:Name="MyTextBlock" Foreground="Green" Text="{Binding Name}" />
                </StackPanel>

                <HierarchicalDataTemplate.Triggers>
                    <DataTrigger Binding="{Binding MyStatus}" Value="Closed">
                        <Setter TargetName="MyTextBlock" Property="Foreground" Value="Red"/>
                        <Setter Property="TreeViewItem.IsExpanded" Value="False" />
                    </DataTrigger>
                    <DataTrigger Binding="{Binding MyStatus}" Value="Opened">
                        <Setter TargetName="MyTextBlock" Property="Foreground" Value="Green"/>
                        <Setter Property="TreeViewItem.IsExpanded" Value="True" />
                    </DataTrigger>
                </HierarchicalDataTemplate.Triggers>
            </HierarchicalDataTemplate>
        </DockPanel.Resources>

        <Button Name="button1" Click="button1_Click" DockPanel.Dock="Top" Content="Button1"/>
        <TreeView Name="treeView1" ItemsSource="{Binding MyItems}" ItemTemplate="{StaticResource MyTemplate}"/>
    </DockPanel>
</Window>

Full Code (C#)

using System;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Windows;

namespace WpfApplication6
{
    public partial class MainWindow : Window
    {
        private ObservableCollection<MyItemCollection> _myItems;

        public MainWindow() {
            InitializeComponent();

            _myItems = new ObservableCollection<MyItemCollection> {
                new MyItemCollection { Name = "Parent1", MyStatus = MyStatus.Closed, SubItems = { new MyItemCollection { Name = "Child1" } } },
                new MyItemCollection { Name = "Parent2", MyStatus = MyStatus.Opened, SubItems = { new MyItemCollection { Name = "Child2" } } }
            };

            DataContext = new {
                MyItems = _myItems
            };
        }

        private void button1_Click(object sender, RoutedEventArgs e) {
            _myItems[0].MyStatus = MyStatus.Opened;
            _myItems[1].MyStatus = MyStatus.Closed;
        }
    }

    public enum MyStatus
    {
        Closed,
        Opened
    }

    public class MyItemCollection : INotifyPropertyChanged
    {
        public MyItemCollection() {
            SubItems = new ObservableCollection<MyItemCollection>();
            _myStatus = MyStatus.Closed;
        }

        public string Name { get; set; }

        public ObservableCollection<MyItemCollection> SubItems { get; set; }

        private MyStatus _myStatus;
        public MyStatus MyStatus {
            get { return _myStatus; }
            set { _myStatus = value; NotifyPropertyChanged("MyStatus"); }
        }

        public event PropertyChangedEventHandler PropertyChanged;
        private void NotifyPropertyChanged(String propertyName) {
            PropertyChangedEventHandler handler = PropertyChanged;
            if (handler != null) {
                handler(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    }
}

Answer

Abe Heidebrecht picture Abe Heidebrecht · Aug 23, 2013

There are a few things wrong here. The first is that you are setting the property TreeViewItem.IsSelected on a HierarchicalDataTemplate. This won't work. Instead, you're going to need to set an ItemContainerStyle on the TreeView:

<TreeView>
    <TreeView.ItemContainerStyle>
        <Style TargetType="{x:Type TreeViewItem}">
        <!-- put logic for handling expansion here -->
        </Style>
    </TreeView.ItemContainerStyle>
</TreeView>

You can't just put the Trigger in here, however. Because of DependencyProperty value precedence, if your user clicks on the nodes to expand or collapse them, your triggers won't be #1 on the precedence list (that is a local value). Therefore, your'e best bet is to create a new IValueConverter to convert from MyStatus to a bool. And then setup a TwoWay binding in a Setter in the Style:

<Style TargetType="{x:Type TreeViewItem}">
    <Setter Property="IsExpanded" 
            Value="{Binding MyStatus, Converter={StaticResource statusToBool}}" />
</Style>

And your converter:

public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
    return ((MyStatus)value) == MyStatus.Opened;
}

public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
    return ((bool)value) ? MyStatus.Opened : MyStatus.Closed;
}