WPF TreeView數據綁定詳解

一、綁定方式

在使用WPF TreeView進行數據綁定的時候，常見的幾種方式有以下幾種。

1. 使用靜態數據源

    <TreeView>
        <TreeViewItem Header="節點1">
            <TreeViewItem Header="節點1子節點1" />
            <TreeViewItem Header="節點1子節點2" />
        </TreeViewItem>
        <TreeViewItem Header="節點2">
            <TreeViewItem Header="節點2子節點1" />
            <TreeViewItem Header="節點2子節點2" />
        </TreeViewItem>
    </TreeView>

2. 使用Binding綁定動態數據源

    public class TreeNode
    {
        public string Header { get; set; }
        public ObservableCollection<TreeNode> Children { get; set; }
    }
    
    public class TreeViewModel
    {
        public ObservableCollection<TreeNode> RootNodes { get; set; }
    }
    
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            DataContext = new TreeViewModel() { RootNodes = /*your observable collection here*/ };
        }
    }
    
    <Window>
        <TreeView ItemsSource="{Binding RootNodes}">
            <TreeView.ItemTemplate>
                <HierarchicalDataTemplate ItemsSource="{Binding Children}">
                    <TextBlock Text="{Binding Header}" />
                </HierarchicalDataTemplate>
            </TreeView.ItemTemplate>
        </TreeView>
    </Window>

二、綁定到TreeViewItem

有時候，需要將數據綁定到TreeViewItem本身，並使用該數據去匹配TreeViewItem的模板。可以使用DataTemplate。

    <Window.Resources>
        <DataTemplate DataType="{x:Type local:TreeNode}">
            <TextBlock Text="{Binding Header}" />
        </DataTemplate>
    </Window.Resources>
    
    <Window>
        <TreeView ItemsSource="{Binding RootNodes}">
            <TreeView.ItemContainerStyle>
                <Style TargetType="{x:Type TreeViewItem}">
                    <Setter Property="IsExpanded" Value="True" />
                    <Setter Property="Header" Value="{Binding}" />
                </Style>
            </TreeView.ItemContainerStyle>
        </TreeView>
    </Window>

三、綁定到TreeViewItem的Header

另外一種常見的Treeview數據綁定方式，是將數據綁定到TreeViewItem的Header屬性，方法同樣是使用DataTemplate。這種方式可以在TreeView顯示多種風格和數據類型的節點。

    <Window>
        <Window.Resources>
            <DataTemplate DataType="{x:Type local:TreeNode}">
                <StackPanel Orientation="Horizontal">
                    <Image Source="{Binding ImageUri}" Width="16" Height="16" />
                    <TextBlock Margin="5,0,0,0" Text="{Binding Header}" />
                </StackPanel>
            </DataTemplate>
        </Window.Resources>

        <TreeView ItemsSource="{Binding RootNodes}">
            <TreeView.ItemContainerStyle>
                <Style TargetType="{x:Type TreeViewItem}">
                    <Setter Property="IsExpanded" Value="True" />
                </Style>
            </TreeView.ItemContainerStyle>
        </TreeView>
    </Window>

四、MVVM綁定

在MVVM模式中，ViewModel是數據的源頭，View則是呈現數據的界面，二者通過數據綁定實現解耦。使用MVVM模式實現WPF TreeView數據綁定是非常常見的，以下是一個簡單的示例。

    public class TreeNodeViewModel
    {
        public string Header { get; set; }
        public ObservableCollection<TreeNodeViewModel> Children { get; set; }
    }
    
    public class TreeViewViewModel : INotifyPropertyChanged
    {
        public ObservableCollection<TreeNodeViewModel> RootNodes { get; set; }
    
        private TreeNodeViewModel _selectedNode;
        public TreeNodeViewModel SelectedNode
        {
            get { return _selectedNode; }
            set
            {
                _selectedNode = value;
                OnPropertyChanged("SelectedNode");
            }
        }
    
        public event PropertyChangedEventHandler PropertyChanged;
        private void OnPropertyChanged(string propertyName)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }
    
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            DataContext = new TreeViewViewModel() { RootNodes = /*your observable collection here*/ };
        }
    }
    
    <Window>
        <TreeView ItemsSource="{Binding RootNodes}" SelectedItem="{Binding SelectedNode}">
            <TreeView.ItemTemplate>
                <HierarchicalDataTemplate ItemsSource="{Binding Children}">
                    <TextBlock Text="{Binding Header}" />
                </HierarchicalDataTemplate>
            </TreeView.ItemTemplate>
        </TreeView>
    </Window>

五、數據排序

WPF TreeView提供了對節點的默認排序，可以按字母順序排序、降序排序等。此外，也可以實現自定義排序。

    public class TreeNode : IComparable
    {
        public string Header { get; set; }
        public ObservableCollection<TreeNode> Children { get; set; }
    
        public int CompareTo(object obj)
        {
            TreeNode other = obj as TreeNode;
            if (other == null) return 0;
            return Header.CompareTo(other.Header);
        }
    }
    
    <Window>
        <TreeView ItemsSource="{Binding RootNodes}">
            <TreeView.ItemTemplate>
                <HierarchicalDataTemplate ItemsSource="{Binding Children}">
                    <TextBlock Text="{Binding Header}" />
                </HierarchicalDataTemplate>
            </TreeView.ItemTemplate>
            <TreeView.ItemContainerStyle>
                <Style TargetType="{x:Type TreeViewItem}">
                    <Setter Property="IsExpanded" Value="True" />
                </Style>
            </TreeView.ItemContainerStyle>
            <TreeView.Items.SortDescriptions>
                <scm:SortDescription PropertyName="Header" Direction="Ascending" />
            </TreeView.Items.SortDescriptions>
        </TreeView>
    </Window>