MVVM的WPF框架（三）—数据控件

这世上，没人能一次性写出完美无缺的框架；因为，任何一个框架都需要项目的淬炼，然后才能升华，趋近完美。

所以，框架是个反复修改的东西，最终形成的东西。

如果你学了一点技术，觉得自己可以写出框架了，觉得自己有架构师的能力，然而自己总是怀才不遇——那一定是你的错觉。

因为，你框架没有经过项目淬炼；而淬炼过框架的人都了解，设计的再好的框架，最终会被业务需求打的细碎，然后被开发人员搅和再一起。

所以细节决定成败，没有细节的框架就是扯淡。

DataControl—数据控件
上文我们已经编写出来了WPF的MVVM基础框架，但为了让他更加强壮，为了让他多坚持一阵子再粉碎，我们要让ViewModel更强壮，所以我们要编写[数据控件]。

数据控件其实很好理解，它就是把UI控件中存储的数据提取出来，好让ViewModel可以通过修改数据来控制UI变化；当然，为了更好的控制UI变化，数据控件里还得包含一点管理UI的属性。

因为WPF里的控件大多继承自Control，所以我们先创建Control的数据控件。

public class Control : 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 : Control
{
    public T _Text;
    public T Text
    {
 get { return _Text; }
 set
 {
     _Text = value;
     onPropertyChanged();
 }
    }
}

TextBox代码如下：

public class TextBox : Control
{
    public Action 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页面代码 

----------------------------------
ViewModel页面代码
public TextBox ChangeTextBox { get; set; }
public VM_PageTextBox()
{　　 ChangeTextBox = new TextBox();
    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 : Control
{
    public Action SelectCallBack = null;
    public ComboBox()
    {
 
    }
    public ObservableCollection _ItemsSource;
    public ObservableCollection 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 itemSource)
    {
 ItemsSource = new ObservableCollection(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 GetComboBoxData()
{
     List userList = new List();
     User user1 = new User() { Id = 1, Name = "张三", Age = 11 };
     userList.Add(user1);
    return userList;
  }

Xaml页面代码如下：


ViewModel代码如下：

public ComboBox TestComboBox { get; set; }
TestDataProxy proxy = new TestDataProxy();
public VM_PageComboBox()
{
    TestComboBox = new ComboBox();
    TestComboBox.SetItemsSource(proxy.GetComboBoxData());
    TestComboBox.SelectCallBack = (user) => {
 MessageBox( user. Name );
    };
}

如上所示，我们已经实行了在ViewModel中管理ComboBox。

本篇文章就先讲到这了，下一篇文章我们将一起为框架编写DataGrid数据控件。

因为DataGrid数据控件是所有数据控件中最复杂的，而且代码量特别多；所以，我决定，单拿出一篇来介绍DataGrid。

框架代码已经传到Github上了，并且会持续更新。

【我们一起写框架】MVVM的WPF框架（一）—序篇

【我们一起写框架】MVVM的WPF框架（二）—绑定

To be continued——DataGrid
Github地址：https://github.com/kiba518/Kibaframework

注：此文章为原创，欢迎转载，请在文章页面明显位置给出此文链接！
若您觉得这篇文章还不错，请点击下右下角的【推荐】，非常感谢！

MVVM的WPF框架（三）—数据控件

C/C++/C#相关栏目本月热门文章