採用MVVM方式實現WPF的TreeView

原文鏈接：https://blog.csdn.net/chifuqi/article/details/8544721

至於什麼是MVVM，其優勢是什麼，不在此介紹，直接說明實現：

1）後臺代碼

分爲三個類：

（1）MainWindow，裏面只有兩行代碼，關鍵實現是對DataContext賦值，那麼所賦的值是什麼呢？這便是第二個類：

（2）PropertyNodeItemViewModel，該類繼承於NotificationObject；而NotificationObject爲通知類，當屬性更改時自動提交更改通知；該類主要模擬樹節點；當屬性PropertyNodeItems變化時會實現自動提交；該類屬於ViewModel

（3）PropertyNodeItem，樹節點組成元素，屬於Model；
 

namespace EquipmentManagement
{
    /// <summary>
    /// MainWindow.xaml 的交互邏輯
    /// </summary>
    public partial class MainWindow : Window
    {
 
        public MainWindow()
        {
            InitializeComponent();
 
            this.DataContext = new PropertyNodeItemViewModel();
        }
 
    }
 
    internal class PropertyNodeItemViewModel : TaianSUCCEED.Practices.ViewModels.NotificationObject
    {
        private readonly string FOLDER_ICON = @"C:\Users\Pictures\png\TrayMenuPlay.png";
        private readonly string TAG_ICON = @"C:\Users\Pictures\png\TrayMenuPaused.png";
        private readonly string EDITABLE_ICON = @"C:\Users\Pictures\png\TrayMenuLogin.png";
 
        private List<PropertyNodeItem> _propertyNodeItems;
 
        public List<PropertyNodeItem> PropertyNodeItems
        {
            get { return _propertyNodeItems; }
            set
            {
                _propertyNodeItems = value;
                this.RaisePropertyChanged("PropertyNodeItems");
            }
        }
 
        public PropertyNodeItemViewModel()
        {
            PropertyNodeItems = ShowTreeView();
        }
 
 
        private List<PropertyNodeItem> ShowTreeView()
        {
            List<PropertyNodeItem> itemList = new List<PropertyNodeItem>();
 
            PropertyNodeItem node1 = new PropertyNodeItem()
            {
 
                DisplayName = "Node No.1",
 
                Name = "This is the discription of Node1. This is a folder.",
 
                Icon = FOLDER_ICON,
 
            };
 
 
 
            PropertyNodeItem node1tag1 = new PropertyNodeItem()
 
            {
 
                DisplayName = "Tag No.1",
 
                Name = "This is the discription of Tag 1. This is a tag.",
 
                Icon = TAG_ICON,
 
                EditIcon = EDITABLE_ICON
 
            };
 
            node1.Children.Add(node1tag1);
 
 
 
            PropertyNodeItem node1tag2 = new PropertyNodeItem()
 
            {
 
                DisplayName = "Tag No.2",
 
                Name = "This is the discription of Tag 2. This is a tag.",
 
                Icon = TAG_ICON,
 
                EditIcon = EDITABLE_ICON
 
            };
 
            node1.Children.Add(node1tag2);
 
            itemList.Add(node1);
 
 
 
            PropertyNodeItem node2 = new PropertyNodeItem()
 
            {
 
                DisplayName = "Node No.2",
 
                Name = "This is the discription of Node 2. This is a folder.",
 
                Icon = FOLDER_ICON,
 
            };
 
 
 
            PropertyNodeItem node2tag3 = new PropertyNodeItem()
 
            {
 
                DisplayName = "Tag No.3",
 
                Name = "This is the discription of Tag 3. This is a tag.",
 
                Icon = TAG_ICON,
 
                EditIcon = EDITABLE_ICON
 
            };
 
            node2.Children.Add(node2tag3);
 
 
 
            PropertyNodeItem node2tag4 = new PropertyNodeItem()
 
            {
 
                DisplayName = "Tag No.4",
 
                Name = "This is the discription of Tag 4. This is a tag.",
 
                Icon = TAG_ICON,
 
                EditIcon = EDITABLE_ICON
 
            };
 
            node2.Children.Add(node2tag4);
 
            itemList.Add(node2);
 
            return itemList;
 
            //this._tvProerties.ItemsSource = itemList;
 
        }
    }
 
    internal class PropertyNodeItem
    {
 
        public string Icon{get;set;}
 
        public string EditIcon { get; set; }
 
        public string DisplayName { get; set; }
 
        public string Name { get; set; }
 
        public List<PropertyNodeItem> Children { get; set; }
 
        public PropertyNodeItem()
        {
            Children = new List<PropertyNodeItem>();
        }
    }
}

類NotificationObject：

public abstract class NotificationObject: INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;
 
        protected virtual void RaisePropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
            {
                this.PropertyChanged.Invoke(this, new PropertyChangedEventArgs(propertyName));
            }
        }
 
   。。。。
    }

2）前臺View實現

 

這裏特別注意的是採用模板方式，其中TreeView的ItemsSource綁定的屬性PropertyNodeItems，而HierarchicalDataTemplate的ItemsSource綁定的Children

<Window x:Class="EquipmentManagement.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:EquipmentManagement"
        Title="MainWindow" Height="350" Width="260">
    <Border BorderBrush="Orange" BorderThickness="3" CornerRadius="6" Background="LightYellow">
        <TreeView Name="_tvProerties" Width="250" Padding="0" Margin="3" BorderThickness="1" 
                  ItemsSource="{Binding PropertyNodeItems}">
            <TreeView.ItemTemplate>
                <HierarchicalDataTemplate DataType="{x:Type local:PropertyNodeItem}" ItemsSource="{Binding Path=Children}">
                    <StackPanel Orientation="Horizontal">
                        <Image VerticalAlignment="Center" Source="{Binding Icon}" Width="16" Height="16" Margin="0,0,2,2"></Image>
                        <TextBlock VerticalAlignment="Center" Text="{Binding DisplayName}"/>
                        <Image VerticalAlignment="Center" Source="{Binding EditIcon}" Margin="2, 0, 0, 0"/>
                        <StackPanel.ToolTip>
                            <TextBlock VerticalAlignment="Center" Text="{Binding Name}" TextWrapping="Wrap" MaxWidth="200"/>
                        </StackPanel.ToolTip>
                    </StackPanel>
                </HierarchicalDataTemplate>
            </TreeView.ItemTemplate>
        </TreeView>
    </Border>
</Window>

3）附圖實現樣式