WPF:带复选框CheckBox的树TreeView

最近要用WPF写一个树,同事给了我一个Demo(不知道是从哪里找来的),我基本上就是参照了这个Demo。

先放一下效果图(3棵树):

这个树索要满足的条件是:

  1. 父节点.Checked=true时,子节点全部选中(反之成立);
  2. 父节点.Checked=false时,子节点全部不选中(反之成立);
  3. 子节点存在部分节点选中,部分节点未选中时,父节点为非全选状态(null)(反之成立);

那么这个树究竟要怎么造出来呢?

由于用WPF,且用MVVM模式,故TreeView的ItemSource及复选框的选中状态IsChecked需要从ViewModel层进行绑定。先看一下树的xaml:

<Window x:Class="MyWpfCheckTreeDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:VM="clr-namespace:MyWpfCheckTreeDemo.AppViewModel"
        xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
        Title="MainWindow" Height="350" Width="525" Loaded="LoadedEvent">
    <Window.Resources>
        <HierarchicalDataTemplate x:Key="MyTreeItemTemplate"
                                  DataType="{x:Type VM:CommonTreeView}"
                                  ItemsSource="{Binding Path=Children,Mode=OneWay}">
            <StackPanel x:Name="My_SP"  Orientation="Horizontal" Margin="2">
                <CheckBox  IsChecked="{Binding Path=IsChecked}" >
                </CheckBox>
                <ContentPresenter  Content="{Binding Path=NodeName,Mode=OneTime}" Margin="2,0"/>
            </StackPanel>
        </HierarchicalDataTemplate>
        <Style x:Key="TreeViewItemStyle" TargetType="{x:Type TreeViewItem}">
            <Setter Property="IsExpanded" Value="True" />
        </Style>
    </Window.Resources>
    <Grid>
       <TreeView Grid.Row="1"  x:Name="tv" ItemsSource="{Binding MyTrees}"
                      ItemContainerStyle="{StaticResource TreeViewItemStyle}"
                      ItemTemplate="{StaticResource MyTreeItemTemplate}">
                </TreeView>
            </Grid>
       </Window>

TreeView.xaml

在xaml中的数据绑定好之后,就是在后台如何实现数据的传递了。

先来看一下每个节点所需要包含的数据:

  • 节点名称:NodeName,
  • 父节点:Parent ,
  • 该父节点的所有孩子:Children,为每一个节点增加创建孩子的方法
  • 每个节点的选中状态:IsChecked,每次子节点的IsChecked变化时,需要去更新Parent节点的IsChecked.

现在将上述数据封装成一个树节点类:

    public  class CommonTreeView : NotifyPropertyBase
    {
      /// <summary>
      /// 父
      /// </summary>
        public CommonTreeView Parent
        {
            get;
            set;
        } 

        /// <summary>
        /// 子
        /// </summary>
        public List<CommonTreeView> Children
        {
            get;
            set;
        } 

        /// <summary>
        /// 节点的名字
        /// </summary>
        public string NodeName
        {
            get;
            set;
        }

        public bool? _isChecked;
        /// <summary>
        /// CheckBox是否选中
        /// </summary>
        public bool? IsChecked
        {
            get
            {
                return _isChecked;
            }
            set
            {
                SetIsChecked(value, true, true);
            }
        }

        public CommonTreeView(string name)
        {
            this.NodeName=name;
            this.Children=new List<CommonTreeView>();
        }
        public CommonTreeView() { }

        private void SetIsChecked(bool? value, bool checkedChildren, bool checkedParent)
        {
            if (_isChecked == value) return;
            _isChecked = value;
            //选中和取消子类
            if (checkedChildren && value.HasValue && Children != null)
                Children.ForEach(ch => ch.SetIsChecked(value, true, false));

            //选中和取消父类
            if (checkedParent && this.Parent != null)
                this.Parent.CheckParentCheckState();

            //通知更改
            this.SetProperty(x => x.IsChecked);
        }

        /// <summary>
        /// 检查父类是否选 中
        /// 如果父类的子类中有一个和第一个子类的状态不一样父类ischecked为null
        /// </summary>
        private void CheckParentCheckState()
        {
             List<CommonTreeView> checkedItems = new List<CommonTreeView>();
             string checkedNames = string.Empty;
            bool? _currentState = this.IsChecked;
            bool? _firstState = null;
            for (int i = 0; i < this.Children.Count(); i++)
            {
                bool? childrenState = this.Children[i].IsChecked;
                if (i == 0)
                {
                    _firstState = childrenState;
                }
                else if (_firstState != childrenState)
                {
                    _firstState = null;
                }
            }
            if (_firstState != null) _currentState = _firstState;
            SetIsChecked(_firstState, false, true);
        }

        /// <summary>
        /// 创建树
        /// </summary>
        /// <param name="children"></param>
        /// <param name="isChecked"></param>

        public void CreateTreeWithChildre( CommonTreeView children,bool? isChecked)
        {
            this.Children.Add(children);
//必须先把孩子加入再为Parent赋值,
//否则当只有一个子节点时Parent的IsChecked状态会出错

            children.Parent = this;
            children.IsChecked = isChecked;
        }
    }

CommonTreeView.cs

节点值变化时对UI进行通知的方法PropertyNotify:

    public class NotifyPropertyBase : INotifyPropertyChanged
    {
        public void OnPropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }
        public event PropertyChangedEventHandler PropertyChanged;
    }

    /// <summary>
    /// 扩展方法
    /// 避免硬编码问题
    /// </summary>
    public static class NotifyPropertyBaseEx
    {
        public static void SetProperty<T, U>(this T tvm, Expression<Func<T, U>> expre) where T : NotifyPropertyBase, new()
        {
            string _pro = CommonFun.GetPropertyName(expre);
            tvm.OnPropertyChanged(_pro);
        }//为什么扩展方法必须是静态的
    }

    public class CommonFun
    {
        /// <summary>
        /// 返回属性名
        /// </summary>
        /// <typeparam name="T"></typeparam>
        /// <typeparam name="U"></typeparam>
        /// <param name="expr"></param>
        /// <returns></returns>
        public static string GetPropertyName<T, U>(Expression<Func<T, U>> expr)
        {
            string _propertyName = "";
            if (expr.Body is MemberExpression)
            {
                _propertyName = (expr.Body as MemberExpression).Member.Name;
            }
            else if (expr.Body is UnaryExpression)
            {
                _propertyName = ((expr.Body as UnaryExpression).Operand as MemberExpression).Member.Name;
            }
            return _propertyName;
        }
    }

INotifyPropertyChanged

到这里基本上这个树就可以投入使用了,现在在ViewModel中给树赋值,并取出选中状态的叶子的节点名称:
这个里面的方法只给出重点部分:

  /// <summary>
        /// 创建树
        /// </summary>
        /// <returns></returns>
        public List<CommonTreeView> MyCreateTree()
        {
            List<CommonTreeView> views = new List<CommonTreeView>();
            //CommonTreeView _myT = new CommonTreeView("合约");
            CommonTreeView _myy = new CommonTreeView("CCP");
            views.Add(_myy);
            CommonTreeView _myy1 = new CommonTreeView("CCP_1");
            _myy.CreateTreeWithChildre(_myy1, true);
            CommonTreeView _myy1_1 = new CommonTreeView("CCP_1.1");
            _myy1.CreateTreeWithChildre(_myy1_1, true);
       }

        /// <summary>
        /// 选中的节点名称保存在_names中
        /// </summary>
        public void SaveC()
        {
            _names = new List<string>();
            //SelectedTree=MyTrees.FindAll(r => r.IsChecked == true);
            foreach (CommonTreeView tree in MyTrees)
            {
                GetCheckedItems(tree);
            }
         }

        /// <summary>
        /// 获取选中项
        /// </summary>
        /// <param name="tree"></param>
        private void GetCheckedItems(CommonTreeView tree)
        {
            if (tree.Parent != null && (tree.Children == null || tree.Children.Count == 0))
            {
                if (tree.IsChecked.HasValue && tree.IsChecked == true)
                    _names.Add(tree.NodeName);
            }
            else if (tree.Children != null && tree.Children.Count > 0)
            {
                foreach (CommonTreeView tv in tree.Children)
                    GetCheckedItems(tv);
            }
          }

TreeViewModel.cs

到这里就结束啦。。。

时间: 2024-10-19 04:50:01

WPF:带复选框CheckBox的树TreeView的相关文章

带复选框的下拉框

效果图: . css: <style type="text/css"> /* 带复选框的下拉框 */ ul li{ list-style: none; padding:0px; margin: 0px; } .select_checkBox{ border:0px solid red; position: relative; display:inline-block; } .chartQuota{ height:23px; float:left; display:inlin

Java中带复选框的微信牛牛房卡开发的实现和应用

在使用Java Swing开发微信牛牛房卡开发(h5.fanshubbs.com)程序时,很有可能会遇到使用带复选框的微信牛牛房卡开发的需求,但是Java Swing并没有提供这个组件,因此如果你有这个需求,你就得自己动身实现带复选框的树.CheckBoxTree与JTree在两个层面上存在差异:[li]在模型层上,CheckBoxTree的每个结点需要一个成员来保存其是否被选中,但是JTree的结点则不需要.[/li][li]在视图层上,CheckBoxTree的每个结点比JTree的结点多显

css3美化复选框checkbox

css3美化复选框checkbox:http://www.helloweba.com/view-blog-295.html

QTableView中嵌入复选框CheckBox 的四种方法总结

搜索了一下,QTableView中嵌入复选框CheckBox方法有四种: 第一种不能之前显示,必须双击/选中后才能显示,不适用. 第二种比较简单,通常用这种方法. 第三种只适合静态显示静态数据用 第四种比较适合扩展,它除了可以嵌入复选框,还可以通过paint()绘制其它控件,图片等自定义风格. 第一种方法是:编辑委托法 这种方法直接利用委托中重载createEditor(),激活QCheckBox,这个缺点是必须双击/选中,才能显示CheckBox控件.一般不满足我们实际中的直接显示的需要.可以

单选按钮RadioGroup与复选框CheckBox

在AndroidApp应用中,单选按钮和复选框也是经常使用的,下面我们一起学习一下.我们需要学习Android中的基本控件:(1)单选按钮RadioGroup.(2)复选框CheckBox. 一.设计登录窗口 打开"res/layout/activity_main.xml"文件.  1.分别从工具栏向activity拖出1个单选按钮列表RadioGroup(注意自动包含3个单选按钮RadioButton).2个复选框CheckBox.1个按钮Button.这3个控件均来自Form Wi

bootstrap-表单控件——复选框checkbox和单选择按钮radio

1.运行效果如图所示 2.实现代码如下 <!DOCTYPE html> <html> <head>     <meta charset="utf-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <title>表单控件--复选框checkbox和单选择按钮radio</title>

jQuery 操作复选框(checkbox) attr checked不起作用

jQuery 更改checkbox的状态,无效 $(this).attr("checked", false).checkboxradio("refresh");     //应该这么写吧,少了$这个东东~~~跟js混淆了 jQuery 操作复选框(checkbox) attr checked不起作用 这 天用到jQuery功能,想实现一个简单的复选框动态全选或全不选,结果测试发现 attr(‘checked’,'checked’);与attr(‘checked’,t

3.Android之单选按钮RadioGroup和复选框Checkbox学习

单选按钮和复选框在实际中经常看到,今天就简单梳理下. 首先,我们在工具中拖进单选按钮RadioGroup和复选框Checkbox,如图: xml对应的源码: <?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="

3种炫酷CSS3复选框checkbox动画特效

这是一款效果非常炫酷的CSS3复选框checkbox动画特效.这组复选框动画特效共3种效果,它们都是在原生checkbox元素的基础上进行了美化,在用户点击复选框的时候制作出非常酷的动画效果. 在线预览   源码下载 使用方法 HTML结构 普通的HTML checkbox复选框控件的样式非常的平淡.在现代网页设计中,我们可以通过CSS3来为它设置更加漂亮的外观和动画特效.通过CSS的@keyframe属性,我们就可以制作出各种神奇的复选框动画特效. 在这些复选框动画的DEMO中,使用的都是无序