采用MVVM方式实现WPF的TreeView

至于什么是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)附图实现样式



评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值