WPF之TreeView操作实战

2017-01-06 19:40:21来源:CSDN作者:tiana0人点击

1、绑定层级数据源
绘制名称为TreeView_NodeList的TreeView控件,使用HierarchicalDataTemplate类将具有层级结构的数据源绑定至TreeView控件。

<TreeView Name="TreeView_NodeList">            <TreeView.Resources>                <HierarchicalDataTemplate  DataType="{x:Type local:Node}" ItemsSource="{Binding Nodes,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}">                    <StackPanel Orientation="Horizontal" Margin="0,2,0,2">                        <TextBlock Text="{Binding NodeName,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" ToolTip="{Binding NodeName,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"/>                    </StackPanel>                </HierarchicalDataTemplate>            </TreeView.Resources></TreeView>

其中Node类的定义如下所示。Node对象使用NodeId作为主键进行区分,NodeId为32位的GUID。Node的属性Nodes保存节点的子节点集合。属性IsDeleted 标记节点是否被删除。

    public class Node    {        public Node()        {            this.NodeId = Guid.NewGuid().ToString();            this.IsDeleted = false;            this.Nodes = new List<Node>();        }        /// <summary>        /// 节点ID        /// </summary>        public string NodeId { get; set; }        /// <summary>        ///  节点名称        /// </summary>        public string NodeName { get; set; }        /// <summary>        /// 节点携带的内容        /// </summary>        public string NodeContent { get; set; }        /// <summary>        /// 被删除        /// </summary>        public bool IsDeleted { get; set; }        /// <summary>        /// 节点类型        /// </summary>        public NodeType NodeType { get; set; }        /// <summary>        /// 子节点集合        /// </summary>        public List<Node> Nodes { get; set; }    }

枚举类型的NodeType属性表示节点的类型,节点具有根节点、叶子节点和结构节点三种类别。叶子节点不支持增加节点操作、非叶子结点不支持删除节点的操作。

    public enum NodeType    {        RootNode,//根节点        LeafNode,//叶子节点        StructureNode//结构节点,仅起到组织配置文件结构的作用,不参与修改    }

下面的方法生成TreeView使用到的示例数据。生产环境中往往通过解析xml或者ini等文件或者访问数据库得到层级数据源。

        private List<Node> GetNodeList()        {            Node leafOneNode = new Node();            leafOneNode.NodeName = "叶子节点一";            leafOneNode.NodeContent = "我是叶子节点一";            leafOneNode.NodeType = NodeType.LeafNode;            leafOneNode.Nodes = new List<Node>();            Node leafTwoNode = new Node();            leafTwoNode.NodeName = "叶子节点二";            leafTwoNode.NodeContent = "我是叶子节点二";            leafTwoNode.NodeType = NodeType.LeafNode;            leafTwoNode.Nodes = new List<Node>();            Node leafThreeNode = new Node();            leafThreeNode.NodeName = "叶子节点三";            leafThreeNode.NodeContent = "我是叶子节点三";            leafThreeNode.NodeType = NodeType.LeafNode;            leafThreeNode.Nodes = new List<Node>();            Node secondLevelNode = new Node();            secondLevelNode.NodeName = "二级节点";            secondLevelNode.NodeContent = "我是二级节点";            secondLevelNode.NodeType = NodeType.StructureNode;            secondLevelNode.Nodes = new List<Node>() { leafOneNode, leafTwoNode, leafThreeNode };            Node firstLevelNode = new Node();            firstLevelNode.NodeName = "一级节点";            firstLevelNode.NodeContent = "我是一级节点";            firstLevelNode.NodeType = NodeType.StructureNode;            firstLevelNode.Nodes = new List<Node>() { secondLevelNode };            return new List<Node>()             {                new Node(){NodeName="根节点",NodeContent="我是根节点",NodeType=NodeType.RootNode,Nodes=new List<Node>(){firstLevelNode}}            };        }

程序使用nodeList接收返回的测试数据,并在页面的Loaded事件中进行数据绑定。

 public List<Node> nodeList { get; set; } private void Window_Loaded(object sender, RoutedEventArgs e) {    nodeList = GetNodeList();    this.TreeView_NodeList.ItemsSource = nodeList;    ExpandTree(); }

2、展开所有节点
其中使用到的ExpandTree()方法实现展开TreeView的所有节点。

        private void ExpandTree()        {            if (this.TreeView_NodeList.Items != null && this.TreeView_NodeList.Items.Count > 0)            {                foreach (var item in this.TreeView_NodeList.Items)                {                    DependencyObject dependencyObject = this.TreeView_NodeList.ItemContainerGenerator.ContainerFromItem(item);                    if (dependencyObject != null)//第一次打开程序,dependencyObject为null,会出错                    {                        ((TreeViewItem)dependencyObject).ExpandSubtree();                    }                }            }        }

执行程序,可以得到下面的执行结果。
这里写图片描述

3、增加和删除节点
下面给TreeView增加右键弹出菜单,实现“增加节点”和“删除节点”的操作。
画面代码中设置TreeView的ContextMenu属性,增加弹出菜单项。

            <TreeView.ContextMenu>                <ContextMenu x:Name="ContextMenu_EditNode">                    <MenuItem Header="新增节点" Name="MenuItem_AddNode" Click="MenuItem_AddNode_Click"/>                    <MenuItem Header="删除节点" Name="MenuItem_DeleteNode" Click="MenuItem_DeleteNode_Click"/>                </ContextMenu>            </TreeView.ContextMenu>

下面是增加节点和删除节点的具体逻辑代码。

        /// <summary>        /// 新增节点        /// </summary>        /// <param></param>        /// <param></param>        private void MenuItem_AddNode_Click(object sender, RoutedEventArgs e)        {            var currentNode = FindTheNode(nodeList, selectedNode.NodeId);            if (currentNode != null)            {                if (currentNode.NodeType == NodeType.LeafNode)                {                    MessageBox.Show("叶子节点不支持新增节点操作!");                }                else                {                    MessageBox.Show("开始新增节点操作!");                }            }        }        /// <summary>        /// 删除节点        /// </summary>        /// <param></param>        /// <param></param>        private void MenuItem_DeleteNode_Click(object sender, RoutedEventArgs e)        {            var currentNode = FindTheNode(nodeList, selectedNode.NodeId);            if (currentNode != null)            {                if (currentNode.NodeType != NodeType.LeafNode)                {                    MessageBox.Show("非叶子节点不支持删除操作!");                }                else                {                    MessageBoxResult dr = MessageBox.Show("确定要删除这个节点吗?", "提示", MessageBoxButton.OKCancel);                    if (dr == MessageBoxResult.OK)                    {                        DeleteTheNode(nodeList, currentNode);                        MessageBox.Show("成功删除节点!");                    }                    else                    {                        return;                    }                }            }        }

其中删除节点需要使用下面的DeleteTheNode()方法,该方法使用递归思想实现删除指定节点的逻辑。

        private void DeleteTheNode(List<Node> nodeList, Node deleteNode)        {            foreach (Node node in nodeList)            {                if (node.Nodes != null && node.Nodes.Count > 0)                {                    DeleteTheNode(node.Nodes, deleteNode);                }                if (node == deleteNode)                {                    node.IsDeleted = true;                }            }        }

不管是删除节点还是新增节点,都需要获取当前选中的节点,使用FindTheNode()方法实现。

        private Node FindTheNode(List<Node> nodeList, string nodeId)        {            Node findedNode = null;            foreach (Node node in nodeList)            {                if (node.Nodes != null && node.Nodes.Count > 0)                {                    if ((findedNode = FindTheNode(node.Nodes, nodeId)) != null)                    {                        return findedNode;                    }                }                if (node.NodeId == nodeId)                {                    return node;                }            }            return findedNode;        }

4、处理PreviewMouseRightButtonDown事件
因为叶子节点不支持增加节点操作,非叶子结点不支持删除节点操作,所以在点击鼠标右键时,需要检测选中节点的类型并进行控制。
为了实现这个功能,可以为TreeView绑定事件PreviewMouseRightButtonDown,在事件处理器中进行相应的控制即可。

     <TreeView.ItemContainerStyle>                <Style TargetType="{x:Type TreeViewItem}">                    <EventSetter Event="TreeViewItem.PreviewMouseRightButtonDown" Handler="TreeViewItem_PreviewMouseRightButtonDown"/>                </Style>     </TreeView.ItemContainerStyle>

下面是PreviewMouseRightButtonDown事件的事件处理器代码。

        private void TreeViewItem_PreviewMouseRightButtonDown(object sender, MouseButtonEventArgs e)        {            var treeViewItem = VisualUpwardSearch<TreeViewItem>(e.OriginalSource as DependencyObject) as TreeViewItem;            if (treeViewItem != null)            {                Node currentNode = treeViewItem.Header as Node;                if (currentNode.NodeType != NodeType.LeafNode)                {                    MenuItem_AddNode.IsEnabled = true;                    MenuItem_DeleteNode.IsEnabled = false;                }                else                {                    MenuItem_AddNode.IsEnabled = false;                    MenuItem_DeleteNode.IsEnabled = true;                }                treeViewItem.Focus();                e.Handled = true;            }        }

代码中使用到VisualUpwardSearch()方法,该方法用于寻找控件的最外层父控件。

        private DependencyObject VisualUpwardSearch<T>(DependencyObject source)        {            while (source != null && source.GetType() != typeof(T))            {                source = VisualTreeHelper.GetParent(source);            }            return source;        }

5、查找下一个节点
有时候,还需要实现循环“查找下一个”的功能,在画面中增加输入框和按钮。

<TextBox x:Name="TextBox_FindNextNode" Grid.Column="1" HorizontalAlignment="Left" Height="23" Margin="49,20,-160,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="120" LostFocus="TextBox_FindNextNode_LostFocus"/><Button x:Name="Button_FindNextNode" Content="查找下一个" Grid.Column="1" HorizontalAlignment="Left" Margin="188,20,-254,0" VerticalAlignment="Top" Width="75" Click="Button_FindNextNode_Click"/>

为了实现循环“查找下一个”,定义了下面两个对象。

private int nextSearchedNodeIndex = -1;public List<Node> searchedNodeList { get; set; }

searchedNodeList 记录根据关键字查找到的所有匹配的节点,nextSearchedNodeIndex 记录当前查看节点的位置。
搜索框失去焦点时,查找匹配的节点并保存至searchedNodeList ,同时将索引置为-1。

        private void TextBox_FindNextNode_LostFocus(object sender, RoutedEventArgs e)        {            if (!string.IsNullOrEmpty(this.TextBox_FindNextNode.Text.Trim()))            {                nextSearchedNodeIndex = -1;                searchedNodeList = FindMatchedNodes(nodeList, this.TextBox_FindNextNode.Text.Trim());            }        }

点击“查找下一个”按钮,新增nextSearchedNodeIndex ,再使用nextSearchedNodeIndex 从searchedNodeList拿到当前展示的节点。这里需要注意的是一轮循环结束后,nextSearchedNodeIndex 再次置为-1,循环重新开始。

        private void Button_FindNextNode_Click(object sender, RoutedEventArgs e)        {            if (string.IsNullOrEmpty(this.TextBox_FindNextNode.Text.Trim()))            {                MessageBox.Show("请输入查找条件!");                return;            }            if (searchedNodeList != null && searchedNodeList.Count > 0)            {                //循环查找下一个                if (nextSearchedNodeIndex >= searchedNodeList.Count - 1)                {                    nextSearchedNodeIndex = -1;                }                nextSearchedNodeIndex += 1;                selectedNode = searchedNodeList[nextSearchedNodeIndex];                SelectTheCurrentNode();            }            else            {                MessageBox.Show("没有找到满足条件的节点");            }        }

其中,查找匹配节点的逻辑由FindMatchedNodes()方法完成,该方法同样使用递归思想来实现。

        private List<Node> FindMatchedNodes(List<Node> srcNodeList, string filterString)        {            List<Node> destNodeList = new List<Node>();            foreach (Node node in srcNodeList)            {                if (node.NodeName.Contains(filterString))                {                    destNodeList.Add(node);                }                if (node.Nodes != null && node.Nodes.Count > 0)                {                    destNodeList.AddRange(FindMatchedNodes(node.Nodes, filterString));                }            }            return destNodeList;        }

其中,SelectTheCurrentNode()方法实现选中当前节点,并将焦点置于当前选中节点。这里同样离不开递归的功劳。

        private void SelectTheCurrentNode()        {            if (this.TreeView_NodeList.Items != null && this.TreeView_NodeList.Items.Count > 0)            {                foreach (var item in this.TreeView_NodeList.Items)                {                    DependencyObject dependencyObject = this.TreeView_NodeList.ItemContainerGenerator.ContainerFromItem(item);                    if (dependencyObject != null)//第一次打开程序,dependencyObject为null,会出错                    {                        TreeViewItem tvi = (TreeViewItem)dependencyObject;                        if ((tvi.Header as Node).NodeId == selectedNode.NodeId)                        {                            tvi.IsSelected = true;                            tvi.Focus();                        }                          else                        {                            SetNodeSelected(tvi);                        }                    }                }            }        }        private void SetNodeSelected(TreeViewItem Item)        {            foreach (var item in Item.Items)            {                DependencyObject dependencyObject = Item.ItemContainerGenerator.ContainerFromItem(item);                if (dependencyObject != null)                {                    TreeViewItem treeViewItem = (TreeViewItem)dependencyObject;                    if ((treeViewItem.Header as Node).NodeId == selectedNode.NodeId)                    {                        treeViewItem.IsSelected = true;                        treeViewItem.Focus();                    }                    else                    {                        treeViewItem.IsSelected = false;                        if (treeViewItem.HasItems)                        {                            SetNodeSelected(treeViewItem);                        }                    }                }            }        }

6、处理SelectedItemChanged事件
操作TreeView,不然会选中节点,触发SelectedItemChanged事件,下面是SelectedItemChanged事件的处理代码。

        private void TreeView_NodeList_SelectedItemChanged(object sender, RoutedPropertyChangedEventArgs<object> e)        {            Node node = this.TreeView_NodeList.SelectedItem as Node;            if (node != null)            {                selectedNode = node;                MessageBox.Show("当前选中的节点是:" + selectedNode.NodeName);            }        }

本文结合shil介绍了TreeView层级数据源的绑定,选中事件的处理,展开节点、新增节点、删除节点、查找节点等常见操作。
普遍使用到递归思想,是学习递归的完美练兵场。

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台