【我们一起写框架】MVVM的WPF框架(三)—数据控件
这世上,没人能一次性写出完美无缺的框架;因为,任何一个框架都需要项目的淬炼,然后才能升华,趋近完美。
所以,框架是个反复修改的东西,最终形成的东西。
如果你学了一点技术,觉得自己可以写出框架了,觉得自己有架构师的能力,然而自己总是怀才不遇——那一定是你的错觉。
因为,你框架没有经过项目淬炼;而淬炼过框架的人都了解,设计的再好的框架,最终会被业务需求打的细碎,然后被开发人员搅和再一起。
所以细节决定成败,没有细节的框架就是扯淡。
DataControl—数据控件
上文我们已经编写出来了WPF的MVVM基础框架,但为了让他更加强壮,为了让他多坚持一阵子再粉碎,我们要让ViewModel更强壮,所以我们要编写[数据控件]。
数据控件其实很好理解,它就是把UI控件中存储的数据提取出来,好让ViewModel可以通过修改数据来控制UI变化;当然,为了更好的控制UI变化,数据控件里还得包含一点管理UI的属性。
因为WPF里的控件大多继承自Control,所以我们先创建Control的数据控件。
public class Control<T> : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged; public T _DataContent ;
public T DataContent { get { return _DataContent; } set { _DataContent = value; OnPropertyChanged(); } } public Visibility _Visibility;
public Visibility Visibility { get { return _Visibility; } set { _Visibility = value; OnPropertyChanged(); } } public bool _IsReadOnly;
public bool IsReadOnly { get { return _IsReadOnly; } set { _IsReadOnly = value; OnPropertyChanged(); } } public bool _IsEnabled;
public bool IsEnabled { get { return _IsEnabled; } set { _IsEnabled = value; OnPropertyChanged(); } } protected void OnPropertyChanged([CallerMemberName]string propertyName = "")
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
}
如上代码所示,我们创建了Control的数据控件。
可以看到,处理存贮数据的DataContent属性之外,还创建了一些管理UI的属性IsEnabled、IsReadOnly、Visibility。
父类数据控件创建完成后,我们开始创建子类的数据控件。[如果子类要管理的UI属性不在父类内,我们就需要额外创建一些]
TextBlock和TextBox
我们先创建最基础的,最常用的TextBlock和TextBox。
TextBlock代码如下:
public class TextBlock<T> : Control<T>
{
public T _Text;
public T Text
{
get { return _Text; }
set
{
_Text = value;
OnPropertyChanged();
}
}
}
TextBox代码如下:
public class TextBox<T> : Control<T>
{
public Action<T> TextChangeCallBack = null; public T _Text;
public T Text {
get { return _Text; }
set
{
_Text = value;
if (TextChangeCallBack != null)
{
TextChangeCallBack(_Text);
}
OnPropertyChanged();
}
}
}
可以看到TextBlock和TextBox都继承了Control,而他们的区别只是TextBox多了一个TextChangeCallBack。
有人会想到,那完全可以用TextBox替代TextBlock。
理论上,TextBlock是可以被替换,但为了程序清晰,还是区别开来更好。
控件定义好了,我们现在看一下如何应用。
TextBox应用
xaml页面代码
<TextBox Text="{Binding ChangeTextBox.Text,Mode=TwoWay}" Margin="5" FontSize="12"></TextBox>
----------------------------------
ViewModel页面代码
public TextBox<string> ChangeTextBox { get; set; }
public VM_PageTextBox()
{ ChangeTextBox = new TextBox<string>();
ChangeTextBox.TextChangeCallBack = (text) => { MessageBox(text); };//声明TextChange
}
如代码所示,我们在ViewModel中定义了ChangeTextBox属性,然后再Xaml中绑定了ChangeTextBox属性的Text到UI控件TextBox的Text属性上,这样我们就实现了数据联动。
并且代码中实例化了TextChangeCallBack委托,那么当Text数据变化时,该委托就会触发。
注意:TextChangeCallBack委托与TextChanged事件不同,并不是每次修改文字都会触发,而是当TextBox的Text内容真正被修改时,才会触发;我们可以简单的理解为TextBox失去焦点时才会触发。
这里只介绍TextBox应用,TextBlock应用就不介绍了,因为使用方式和TextBox一样。
如果想了解更多数据控件的应用,请去GitHub下载源码。
ComboBox
ComboBox稍微复杂一点,因为他多了一个ItemSource属性。
我们先看ComboBox的数据控件代码:
public class ComboBox<T> : Control<T>
{
public Action<T> SelectCallBack = null;
public ComboBox()
{ }
public ObservableCollection<T> _ItemsSource;
public ObservableCollection<T> ItemsSource
{
get
{
return _ItemsSource;
}
set
{
_ItemsSource = value;
if (_ItemsSource != null && _ItemsSource.Count > 0 && SelectedItem == null)
{
SelectedItem = _ItemsSource.First();
}
OnPropertyChanged();
}
}
public T _SelectedItem;
public T SelectedItem
{
get { return _SelectedItem; }
set
{
_SelectedItem = value;
if (SelectCallBack != null)
{
SelectCallBack(_SelectedItem);
}
OnPropertyChanged();
}
}
private ICollectionView _ItemsSourceView;
public ICollectionView ItemsSourceView
{
get
{
_ItemsSourceView = CollectionViewSource.GetDefaultView(_ItemsSource);
return _ItemsSourceView;
}
set
{
_ItemsSourceView = value;
OnPropertyChanged();
}
}
public void SetItemsSource(List<T> itemSource)
{
ItemsSource = new ObservableCollection<T>(itemSource);
}
}
代码相对简单,SelectedItem和ItemsSource用来绑定UI控件ComboBox的同名属性。
ItemsSourceView:ItemsSourceView属性可能有些难理解,这里我们简单介绍一下。
因为WPF的UI控件被创建以后,要被添加到视觉树中,所以最终会被显示在屏幕上的是包裹着控件的视觉树;其中视觉树与控件是可以分离的;比如控件中绑定的数据是10行,而视觉树可以显示3行。
为了管理视觉树,我们创建了ItemsSourceView属性。
因为ItemsSourceView是ICollectionView类型,所以ItemsSourceView可以处理排序、筛选和分组。[有兴趣的同学可以自行了解下ICollectionView类型]
感觉这样描述还是很难理解,让我们一起在应用中慢慢理解吧。
ObservableCollection:我们可以看到ItemsSource是类型是ObservableCollection,而不是List。为什么要用ObservableCollection呢?
很简单,因为ObservableCollection继承了INotifyCollectionChanged,即,数据控件进行[行]的增删,也会让UI进行[行]的增删。
ComboBox应用
在应用之前,我们先在Proxy建立一个获取数据是代理。
创建获取数据的方法如下:
public List<User> GetComboBoxData()
{
List<User> userList = new List<User>();
User user1 = new User() { Id = 1, Name = "张三", Age = 11 };
userList.Add(user1);
return userList;
}
Xaml页面代码如下:
<ComboBox Margin="5" Width="200" FontSize="12" ItemsSource="{Binding TestComboBox.ItemsSource}" DisplayMemberPath="Name" SelectedValuePath="Id" SelectedItem="{Binding TestComboBox.SelectedItem}" ></ComboBox>
ViewModel代码如下:
public ComboBox<User> TestComboBox { get; set; }
TestDataProxy proxy = new TestDataProxy();
public VM_PageComboBox()
{
TestComboBox = new ComboBox<User>();
TestComboBox.SetItemsSource(proxy.GetComboBoxData());
TestComboBox.SelectCallBack = (user) => {
MessageBox(user.Name);
};
}
如上所示,我们已经实行了在ViewModel中管理ComboBox。
----------------------------------------------------------------------------------------------------
本篇文章就先讲到这了,下一篇文章我们将一起为框架编写DataGrid数据控件。
因为DataGrid数据控件是所有数据控件中最复杂的,而且代码量特别多;所以,我决定,单拿出一篇来介绍DataGrid。
框架代码已经传到Github上了,并且会持续更新。
相关文章:
To be continued——DataGrid
Github地址:https://github.com/kiba518/KibaFramework
----------------------------------------------------------------------------------------------------
注:此文章为原创,任何形式的转载都请联系作者获得授权并注明出处!
若您觉得这篇文章还不错,请点击下方的【推荐】,非常感谢!
【我们一起写框架】MVVM的WPF框架(三)—数据控件的更多相关文章
- CYQ.Data 支持WPF相关的数据控件绑定.Net获取iis版本
CYQ.Data 支持WPF相关的数据控件绑定(2013-08-09) 事件的结果 经过多天的思考及忙碌的开发及测试,CYQ.Data 终于在UI上全面支持WPF,至此,CYQ.Data 已经可以方便 ...
- CYQ.Data 支持WPF相关的数据控件绑定(2013-08-09)
事件的结果 经过多天的思考及忙碌的开发及测试,CYQ.Data 终于在UI上全面支持WPF,至此,CYQ.Data 已经可以方便支持wpf的开发,同时,框架仍保留最低.net framework2.0 ...
- Jquery如何序列化form表单数据为JSON对象 C# ADO.NET中设置Like模糊查询的参数 从客户端出现小于等于公式符号引发检测到有潜在危险的Request.Form 值 jquery调用iframe里面的方法 Js根据Ip地址自动判断是哪个城市 【我们一起写框架】MVVM的WPF框架(三)—数据控件 设计模式之简单工厂模式(C#语言描述)
jquery提供的serialize方法能够实现. $("#searchForm").serialize();但是,观察输出的信息,发现serialize()方法做的是将表单中的数 ...
- 【我们一起写框架】MVVM的WPF框架(五)—完结篇
前言 这篇文章是WPF框架系列的最后一篇,在这里我想阐述一下我对框架设计的理解. 我对框架设计的理解是这样的: 框架设计不应该局限于任何一种设计模式,我们在设计框架时,应该将设计模式揉碎,再重组:这样 ...
- 【我们一起写框架】MVVM的WPF框架(一)—序篇
前言 我想,有一部分程序员应该是在二三线城市的,虽然不知道占比,但想来应该不在少数. 我是这部分人群中的一份子. 我们这群人,面对的客户,大多是国内中小企业,或者政府的小部门.这类客户的特点是,资金有 ...
- 【我们一起写框架】MVVM的WPF框架(二)—绑定
MVVM的特点之一是实现数据同步,即,前台页面修改了数据,后台的数据会同步更新. 上一篇我们已经一起编写了框架的基础结构,并且实现了ViewModel反向控制Xaml窗体. 那么现在就要开始实现数据同 ...
- 【我们一起写框架】MVVM的WPF框架(四)—DataGrid
前言 这个框架写到这里,应该有很多同学发现,框架很多地方的细节,其实是违背了MVVM的设计逻辑的. 没错,它的确是违背了. 但为什么明知道违背设计逻辑,还要这样编写框架呢? 那是因为,我们编写的是框架 ...
- 在DWZ框架中整合kindeditor复文本框控件
今天上午在DWZ框架中整合kindeditor复文本框控件,发现上传图片是老是提示 “上传中,请稍候...”,上网查看别人说可能是文件路径问题,在想以前在其他项目中用这个控件一直没问题,到这里怎么会出 ...
- 【案例分享】在 React 框架中使用 SpreadJS 纯前端表格控件
[案例分享]在 React 框架中使用 SpreadJS 纯前端表格控件 本期葡萄城公开课,将由国电联合动力技术有限公司,资深前端开发工程师——李林慧女士,与大家在线分享“在 React 框架中使用 ...
随机推荐
- java面试题总结
一.http://blog.csdn.net/moneyshi/article/details/50786786 二.http://blog.csdn.net/moneyshi/article/det ...
- 查看Linux下系统资源占用常用命令(top、free、uptime)
本文介绍下,在linux中查看系统资源占用的三个命令:top.free.uptime,通过实例学习下它们的用法,有需要的朋友参考下 一,top命令 1.作用top命令用来显示执行中的程序进程,使用权限 ...
- openoffice excel word 转换pdf 支持本地调用和远程调用
OpenOffice.org 是一套跨平台的办公室软件套件,能在Windows.Linux.MacOS X (X11)和 Solaris 等操作系统上执行.它与各个主要的办公室软件套件兼容.OpenO ...
- Postman----支持markdown可自动生成接口文档
1.postman支持markdown作为集合中的请求,对集合和文件夹进行文字描述的方式,您可以嵌入屏幕截图和其他图像已获得更多描述性的介绍. 2.已markdown语法为准,填写自己想要展示的内容 ...
- selenium 元素(class_name、link_text、css_selector)定位方法
通过元素的定位,使用firebug查找元素 1.示例一,class_name与link_text定位
- koa+mysql+vue+socket.io全栈开发之前端篇
React 与 Vue 之间的对比,是前端的一大热门话题. vue 简易上手的脚手架,以及官方提供必备的基础组件,比如 vuex,vue-router,对新手真的比较友好:react 则把这些都交给社 ...
- mip-link 组件功能升级说明
背景描述 某个页面被多少页面引用(在其他页面上有指向这个页面的 a 标签),是搜索引擎判断这个页面价值的其中一个因子.这里的搜索引擎不只是指百度,还包括国内外其他的搜索引擎. MIP 在最初设计 MI ...
- 你真的了解ASP.NET Core 部署模型吗?
---------------------------- 以下内容针对 ASP.NET Core2.1,2.2出现IIS进程内寄宿 暂不展开讨论-------------------------- ...
- asp.net core系列 58 IS4 基于浏览器的JavaScript客户端应用程序
一. 概述 本篇探讨使用"基于浏览器的JavaScript客户端应用程序".与上篇实现功能一样,只不过这篇使用JavaScript作为客户端程序,而非core mvc的后台代码Ht ...
- 我的秋招经验分享(已拿BAT头条网易滴滴)
微信公众号[程序员江湖] 作者黄小斜,斜杠青年,某985硕士,阿里 Java 研发工程师,于 2018 年秋招拿到 BAT 头条.网易.滴滴等 8 个大厂 offer,目前致力于分享这几年的学习经验. ...