【我们一起写框架】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>
----------------------------------<br>ViewModel页面代码
public TextBox<string> ChangeTextBox { get; set; }
public VM_PageTextBox()
{<br>   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上了,并且会持续更新。

相关文章:

【我们一起写框架】MVVM的WPF框架(一)—序篇

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

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


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

目录
相关文章
|
1月前
|
C# 开发者 Windows
基于Material Design风格开源、易用、强大的WPF UI控件库
基于Material Design风格开源、易用、强大的WPF UI控件库
|
5月前
|
C#
浅谈WPF之装饰器实现控件锚点
使用过visio的都知道,在绘制流程图时,当选择或鼠标移动到控件时,都会在控件的四周出现锚点,以便于修改大小,移动位置,或连接线等,那此功能是如何实现的呢?在WPF开发中,想要在控件四周实现锚点,可以通过装饰器来实现,今天通过一个简单的小例子,简述如何在WPF开发中,应用装饰器,仅供学习分享使用,如有不足之处,还请指正。
66 1
|
9月前
|
C# Windows
WPF技术之图形系列Polygon控件
WPF Polygon是Windows Presentation Foundation (WPF)框架中的一个标记元素,用于绘制多边形形状。它可以通过设置多个点的坐标来定义多边形的形状,可以绘制任意复杂度的多边形。
475 0
|
9月前
|
C# Windows
WPF技术之RichTextBox控件
WPF RichTextBox是Windows Presentation Foundation (WPF)中提供的一个强大的文本编辑控件,它可以显示富文本格式的文本,支持多种文本处理操作。
354 0
|
5月前
|
前端开发 C# 容器
浅谈WPF之控件拖拽与拖动
使用过office的visio软件画图的小伙伴都知道,画图软件分为两部分,左侧图形库,存放各种图标,右侧是一个画布,将左侧图形库的图标控件拖拽到右侧画布,就会生成一个新的控件,并且可以自由拖动。那如何在WPF程序中,实现类似的功能呢?今天就以一个简单的小例子,简述如何在WPF中实现控件的拖拽和拖动,仅供学习分享使用,如有不足之处,还请指正。
114 2
|
9月前
|
数据挖掘 数据处理 C#
WPF技术之DataGrid控件
WPF DataGrid是一种可以显示和编辑数据的界面控件。它可以作为表格形式展示数据,支持添加、删除、修改、排序和分组操作。
187 0
|
1月前
|
C# 开发者 C++
一套开源、强大且美观的WPF UI控件库
一套开源、强大且美观的WPF UI控件库
140 0
|
6月前
|
算法 C# UED
浅谈WPF之控件模板和数据模板
WPF不仅支持传统的Windows Forms编程的用户界面和用户体验设计,同时还推出了以模板为核心的新一代设计理念。在WPF中,通过引入模板,将数据和算法的“内容”和“形式”进行解耦。模板主要分为两大类:数据模板【Data Template】和控件模板【Control Template】。
103 8
|
8月前
|
设计模式 开发框架 前端开发
深入理解WPF中MVVM的设计思想
近些年来,随着WPF在生产,制造,工业控制等领域应用越来越广发,很多企业对WPF开发的需求也逐渐增多,使得很多人看到潜在机会,不断从Web,WinForm开发转向了WPF开发,但是WPF开发也有很多新的概念及设计思想,如:数据驱动,数据绑定,依赖属性,命令,控件模板,数据模板,MVVM等,与传统WinForm,ASP.NET WebForm开发,有很大的差异,今天就以一个简单的小例子,简述WPF开发中MVVM设计思想及应用。
62 0
|
9月前
|
定位技术 C# UED
WPF技术之ScrollViewer控件
WPF ScrollViewer是WPF中常用的一个控件,它提供了滚动视图的功能,可用于显示超出容器可视区域的内容。ScrollViewer通常用于容纳大量内容的控件,以在有限的空间内显示这些内容,并允许用户通过滚动来查看隐藏的部分。
764 0