Treeview分别有两个数据模板HierarchicalDataTemplate(层级数据模板)和DataTemplate(数据模板),分别应用于生成子数据项和普通数据项。

在使用过程中,如果对两个模板的DataType设置为同一类型,运行时会直接报错。

大概原因是添加了俩个相同Key的资源(因为HierarchicalDataTemplateDataTemplate都是定义在<TreeView.Resources>标签中)。

代码:

public class TypeTreeModel :TypeModel
{
public ObservableCollection<TypeTreeModel> ChildList { get; set; }
= new ObservableCollection<TypeTreeModel>();
}
public class TypeModel
{
public int Id { get; set; }
public string Name { get; set; }
} <TreeView x:Name="treeView" ItemsSource="{Binding TypeList}" MinWidth="200" MaxHeight="200" >
<TreeView.Resources>
<HierarchicalDataTemplate DataType="{x:Type vm:TypeTreeModel}" ItemsSource="{Binding ChildList}">
<TextBlock Text="{Binding Name}" Margin="3 2"/>
</HierarchicalDataTemplate>
<DataTemplate DataType="{x:Type vm:TypeModel}">
<TextBlock Text="{Binding Name}" ToolTip="{Binding Id}" Margin="3 2"></TextBlock>
</DataTemplate>
</TreeView.Resources>
</TreeView>

效果图:

TypeList一般都是数据库取出来的数据处理嵌套后的结果。有时候会遇到需求,对于不同的分类有不同的类型。根据双向绑定的规则,我们只需要修改ViewModelTypeList的内容就可以了。



注意: ObservableCollection只有在列表项发生变化时才会触发页面刷新,即新增或删除时才会反应到页面上。若采用直接赋值的写法,不会触发页面刷新。



推荐更新数据时候的写法:

 //清空原先的列表
TypeList.Clear();
list.ForEach(d =>
{
TypeList.Add(d);
});

TreeView.SelectedItem双向绑定

TreeView.SelectedItemReadOnly的,所以不能通过简单的绑定方法去获取选中项

最终还是要通过绑定TreeviewSelectedItemChanged事件,来修改ViewModel中的数据

1.直接绑定事件

<TreeView ItemsSource="{Binding TypeList}" SelectedItemChanged="TreeView_OnSelectedItemChanged" />

private void TreeView_OnSelectedItemChanged(object sender, RoutedPropertyChangedEventArgs<object> e)
{
vm.SelectItem = (Cluster)e.NewValue;
}

2.通过Command绑定事件

  • 在项目中引用 System.Windows.Interactivity.WPF(简单来说该插件可以将页面控件的Event转为ViewModel中的Command)
  • 在窗体中添加引用
xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
  • 绑定CommandSelectedItemChanged事件
<TreeView x:Name="treeView" ItemsSource="{Binding TypeList}">
<i:Interaction.Triggers>
<i:EventTrigger EventName="SelectedItemChanged">
<i:InvokeCommandAction Command="{Binding SelectItemChangeCommand}"
CommandParameter="{Binding ElementName=treeView,Path=SelectedItem}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</TreeView>

ViewModel:

public class TreeViewModel : ViewModelBase
{
public ObservableCollection<TypeTreeModel> TypeList; private TypeModel selectItem;
public TypeModel SelectItem
{
get { return selectItem; }
set { this.MutateVerbose(ref selectItem, value, RaisePropertyChanged()); }
}
public TreeViewModel()
{
TypeList = GetData();
} public ICommand SelectItemChangeCommand
{
get
{
return new CommandBase((param) =>
{
if(param != null)
SelectItem = (TypeModel)param;
});
}
}
}

效果图:

ViewModelBaseCommandBase是自己封装的基类,就是为了写WPF的双向绑定简单点,有兴趣的可以评论向我要。

Demo地址: https://github.com/fxhui/TreeViewDemo

WPF之Treeview实现MVVM双向绑定的更多相关文章

  1. WPF之AvalonEdit实现MVVM双向绑定

    AvalonEdit简介 AvalonEdit是基于WPF开发的代码显示控件,默认支持多种不同语言的关键词高亮,并且可以自定义高亮配置.所以通过AvalonEdit可以快速开发出自己想要的代码编辑器. ...

  2. 【.NET6+WPF】WPF使用prism框架+Unity IOC容器实现MVVM双向绑定和依赖注入

    前言:在C/S架构上,WPF无疑已经是"桌面一霸"了.在.NET生态环境中,很多小伙伴还在使用Winform开发C/S架构的桌面应用.但是WPF也有很多年的历史了,并且基于MVVM ...

  3. 【Maui正式版】创建可跨平台的Maui程序,以及有关依赖注入、MVVM双向绑定的实现和演示

    前言:Maui终于在昨天(2022年8月9日)推送出来了.今儿就迫不及待来把玩一下先. A.我本地已有VS2022,不过版本比较老,此处选择更新.工具 -> 获取功能和更新里面,可以获取到新版本 ...

  4. C#使用Xamarin开发可移植移动应用(3.进阶篇MVVM双向绑定和命令绑定)附源码

    前言 系列目录 C#使用Xamarin开发可移植移动应用目录 源码地址:https://github.com/l2999019/DemoApp 可以Star一下,随意 - - 说点什么.. 嗯..前面 ...

  5. C#使用Xamarin开发可移植移动应用(4.进阶篇MVVM双向绑定和命令绑定)附源码

    前言 系列目录 C#使用Xamarin开发可移植移动应用目录 源码地址:https://github.com/l2999019/DemoApp 可以Star一下,随意 - - 说点什么.. 嗯..前面 ...

  6. 仿vue实现简易版mvvm双向绑定

    项目地址:https://github.com/pangyongsheng/mvvm 1. 指令 vm-bind 单选数据绑定- 将数据显示到标签视图 vm-model : 双向数据绑定 vm-sho ...

  7. mvvm双向绑定机制的原理和代码实现

    mvvm框架的双向绑定,即当对象改变时,自动改变相关的dom元素的值,反之,当dom元素改变时,能自动更新对象的值,当然dom元素一般是指可输出的input元素. 1. 首先实现单向绑定,在指定对象的 ...

  8. MVVM双向绑定实现之Object.defineProperty

    随着web应用的发展,直接操作dom的应用已渐行渐远,取而代之的是时下越来越流行的MVVM框架,dom操作几乎绝迹,这里面自然是框架底层封装的结果.MVVM框架的双向数据绑定使开发效率大大提高:然后在 ...

  9. 【WPF】WPF开发用户控件、用户控件属性依赖DependencyProperty实现双向绑定、以及自定义实现Command双向绑定功能演示

    前言: Wpf开发过程中,最经常使用的功能之一,就是用户控件(UserControl)了.用户控件可以用于开发用户自己的控件进行使用,甚至可以用于打造一套属于自己的UI框架.依赖属性(Dependen ...

随机推荐

  1. paramiko-ssh-sftp实例

    import paramiko transport = paramiko.Transport(('192.168.71.136', 22)) transport.connect(username='r ...

  2. 6-Perl 标量

    1.Perl 标量标量是一个简单的数据单元.标量可以是一个整数,浮点数,字符,字符串,段落或者一个完整的网页.以下实例演示了标量的简单应用:实例#!/usr/bin/perl$age = 20; # ...

  3. git的常用指令(一)

    1. 查看git远程的所有分支 git branch -a 2.查看本地已有的分支 git branch 3.本地检出一个新的分支并推送到远程仓库 一).创建本地分支 git checkout -b ...

  4. js gridview中checkbox的全选与全不选

    1.html: <asp:GridView runat="server" ID="gvAddBySR" AutoGenerateColumns=" ...

  5. sql循环(WITH AS短语也叫做子查询部分)

    --表结构 SELECT id,position,Parentid FROM op_client_sales_structure WITH TEST_CTE AS ( SELECT id,positi ...

  6. Linux Permission denied 问题

    Linux Permission denied 问题 来源  https://www.cnblogs.com/sparkdev/p/10287164.html 如果当前用户没有某个文件的写权限,又要通 ...

  7. 查找和杀掉占用GPU显存的进程

    用只有2个G的显卡跑数据就需要在训练之前先把无关进程杀掉,防止跑到一半显存满了 nvidia-smi:显示当前GPU中的线程 kill -9 PID:输入PID以结束线程

  8. VS调试 启动vs报错--未启动IIS

    VS调试 启动程序报错——未启动IIS Express Web服务 解决办法: 1.关闭VS. 2.删出项目文件下的".vs"文件. 3.重新启动解决方案. 4.编译,运行OK. ...

  9. Nginx作为静态资源web服务之跨域访问

    Nginx作为静态资源web服务之跨域访问 首先了解一下什么是跨域 跨域,指的是浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的,是浏览器施加的安全限制. 所谓同源是指,域名,协议,端口均相 ...

  10. python 列表字典按照字典中某个valu属性进行排序

    对用户名进行排序 1. 直接上代码 base_dn_list = [ {', 'tenant': 'HAD', 'role': {'roleID': 'project', 'roleName': '项 ...