datagrid其中某列需要动态隐藏或显示的mvvm绑定方式,也可以用在其他表格类型控件上
版权归原作者所有。
[WPF] HOW TO BIND TO DATA WHEN THE DATACONTEXT IS NOT INHERITED
The DataContext property in WPF is extremely handy, because it is automatically inherited by all children of the element where you assign it; therefore you don’t need to set it again on each element you want to bind. However, in some cases the DataContext is not accessible: it happens for elements that are not part of the visual or logical tree. It can be very difficult then to bind a property on those elements…
Let’s illustrate with a simple example: we want to display a list of products in a DataGrid. In the grid, we want to be able to show or hide the Price column, based on the value of a ShowPriceproperty exposed by the ViewModel. The obvious approach is to bind the Visibility of the column to the ShowPrice property:
<DataGridTextColumn Header="Price" Binding="{Binding Price}" IsReadOnly="False"
Visibility="{Binding ShowPrice,
Converter={StaticResource visibilityConverter}}"/>
Unfortunately, changing the value of ShowPrice has no effect, and the column is always visible… why? If we look at the Output window in Visual Studio, we notice the following line:
System.Windows.Data Error: 2 : Cannot find governing FrameworkElement or FrameworkContentElement for target element. BindingExpression:Path=ShowPrice; DataItem=null; target element is ‘DataGridTextColumn’ (HashCode=32685253); target property is ‘Visibility’ (type ‘Visibility’)
The message is rather cryptic, but the meaning is actually quite simple: WPF doesn’t know which FrameworkElement to use to get the DataContext, because the column doesn’t belong to the visual or logical tree of the DataGrid.
We can try to tweak the binding to get the desired result, for instance by setting the RelativeSource to the DataGrid itself:
<DataGridTextColumn Header="Price" Binding="{Binding Price}" IsReadOnly="False"
Visibility="{Binding DataContext.ShowPrice,
Converter={StaticResource visibilityConverter},
RelativeSource={RelativeSource FindAncestor, AncestorType=DataGrid}}"/>
Or we can add a CheckBox bound to ShowPrice, and try to bind the column visibility to the IsChecked property by specifying the element name:
<DataGridTextColumn Header="Price" Binding="{Binding Price}" IsReadOnly="False"
Visibility="{Binding IsChecked,
Converter={StaticResource visibilityConverter},
ElementName=chkShowPrice}"/>
But none of these workarounds seems to work, we always get the same result…
At this point, it seems that the only viable approach would be to change the column visibility in code-behind, which we usually prefer to avoid when using the MVVM pattern… But I’m not going to give up so soon, at least not while there are other options to consider
The solution to our problem is actually quite simple, and takes advantage of the Freezable class. The primary purpose of this class is to define objects that have a modifiable and a read-only state, but the interesting feature in our case is that Freezable objects can inherit the DataContext even when they’re not in the visual or logical tree. I don’t know the exact mechanism that enables this behavior, but we’re going to take advantage of it to make our binding work…
The idea is to create a class (I called it BindingProxy for reasons that should become obvious very soon) that inherits Freezable and declares a Data dependency property:
public class BindingProxy : Freezable
{
#region Overrides of Freezable protected override Freezable CreateInstanceCore()
{
return new BindingProxy();
} #endregion public object Data
{
get { return (object)GetValue(DataProperty); }
set { SetValue(DataProperty, value); }
} // Using a DependencyProperty as the backing store for Data. This enables animation, styling, binding, etc...
public static readonly DependencyProperty DataProperty =
DependencyProperty.Register("Data", typeof(object), typeof(BindingProxy), new UIPropertyMetadata(null));
}
We can then declare an instance of this class in the resources of the DataGrid, and bind the Data property to the current DataContext:
<DataGrid.Resources>
<local:BindingProxy x:Key="proxy" Data="{Binding}" />
</DataGrid.Resources>
The last step is to specify this BindingProxy object (easily accessible with StaticResource) as the Source for the binding:
<DataGridTextColumn Header="Price" Binding="{Binding Price}" IsReadOnly="False"
Visibility="{Binding Data.ShowPrice,
Converter={StaticResource visibilityConverter},
Source={StaticResource proxy}}"/>
Note that the binding path has been prefixed with “Data”, since the path is now relative to the BindingProxy object.
The binding now works correctly, and the column is properly shown or hidden based on the ShowPrice property.
datagrid其中某列需要动态隐藏或显示的mvvm绑定方式,也可以用在其他表格类型控件上的更多相关文章
- C#控件——批量化隐藏或显示同类型控件
当一个页面中添加了许多同类型控件,当需要控制这些控件进行显示或隐藏的时候,需要一个个的将Visible属性设置为false,十分不方便, 后通过论坛受一位大神(至于叫什么忘了)的启发,通过建立控件数组 ...
- 表格树控件QtTreePropertyBrowser编译成动态库(设计师插件)
目录 一.回顾 二.动态库编译 1.命令行编译动态库和测试程序 2.vs工具编译动态库和测试程序 3.安装文档 4.测试文档 三.设计师插件编译 1.重写QDesignerCustomWidgetIn ...
- iOS UITableView动态隐藏或显示Item
通过改变要隐藏的item的高度实现隐藏和显示item 1.创建UITableView #import "ViewController.h" @interface ViewContr ...
- 动态创建的文本框想要加上jQuery的datepicker功能变成日期选择控件该怎么办?
通常页面输入控件想得到日期选择功能,借助jQuery是这样实现的: 1.载入css和js <script src="jqueryui/jquery-ui.js" type=& ...
- JQuery动态隐藏和显示DIV
<head> <script language="javascript"> function HideWeekMonth() { $("#tt1& ...
- react中如何实现一个按钮的动态隐藏和显示(有效和失效)
初始准备工作 constructor(props) { super(props); /* * 构建导出数据的初始参数,结合用户下拉选择后动态设置参数值 * */ this.state = { btnS ...
- 关于使用MVVM模式在WPF的DataGrid控件中实现ComboBox编辑列
最近在做一个组态软件的项目,有一个需求需要在建立IO设备变量的时候选择变量的类型等. 建立IO变量的界面是一个DataGrid实现的,可以一行一行的新建变量,如下如所示: 这里需要使用带有ComboB ...
- DevExpres表格控件运行时动态设置表格列
本文是系列文章,陆续发表于电脑编程技巧与维护杂志. DevExpres产品是全球享有极高声誉的一流控件套包产品!国内典型用户包括:用友.金蝶.神州数码.工信部.中国石化.汉王科技等众多大中型科技型企业 ...
- GridView绑定数据与隐藏指定控件(模板列)
1.1. GridView绑定数据 1) 可以配置SqlDataSource数据源,修改select语句生成框架(不想手动绑定) 2) 删除DataSourceID属性和 ...
随机推荐
- Ant Design Pro实现导出Excel
react Ant Design ProUI框架导出Excel(只能导出当前列表数据) 插件安装 npm install js-export-excel 安装完成之后开始引入 import Expor ...
- Mongodb 学习笔记(二) :索引
Mongodb 是基于集合建立索引 (Index),索引的作用类似于传统关系型数据库,目的是为了提高查询速度 . 如果没有建立索引, Mongodb 在读取数据时必须扫描集合中的 所有文档记录. 这 ...
- Qt QListWidget
以下代码是 List Widget 添加数据项的代码,一般放在构造函数即可. /*********************添加数据项*********************/ QIcon icon1 ...
- mtd设备操作、jffs2
安装mtd相关命令 手动安装mtd-utils,根据系统自行选择 mtd交叉编译:https://blog.csdn.net/zhangxuechao_/article/details/5212442 ...
- iPhone 移植到 iPad:
来源:http://www.wapera.cn/ipadkaifa/71354.html iPhone移植到iPad: 方法一修改设备目标设置(普通模式:一套代码及XIB界面文件,代码分if和else ...
- javascript_19-DOM初体验
DOM DOM: 文档对象模型(Document Object Model),又称为文档树模型.是一套操作HTML和XML文档的API. DOM可以把HTML和XML描述为一个文档树.树上的每一个分支 ...
- docker发展历程
docker发展历程 docker本身不是容器,它只是一个更加易用的前端管理器. 最早期的容器技术概念是用chroot来实现隔离,但是chroot只是提供了对进程文件目录虚拟化的功能,不能防止进程恶意 ...
- Python_Class
1.创建类的关键字:class 2.构造函数__init__(),自动初始化属性值 class Cup: #构造函数,初始化属性值 def __init__(self,capacity,color): ...
- k8s集群之上运行etcd集群
一.知识点: 1.headless services NOTE:: 我们在k8s上运行etcd集群,集群间通告身份是使用dns,不能使用pod ip,因为如果pod被重构了ip会变,在这种场景中不能直 ...
- vue之获取原生的dom的方式
1.获取原生的DOM的方式 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...