WPF教程三:学习Data Binding把思想由事件驱动转变为数据驱动

概述

 之前大家写代码都喜欢用事件驱动,比如说鼠标输入的click事件、初始化的内容全部放在窗体加载完毕的load事件,等等,里面包含了大量的由事件触发后的业务处理代码。导致了UI和业务逻辑高度耦合在一个地方。代码难于维护、也难以优化。

  我们这个章要讲的内容是忘记我们的事件驱动、尝试理解数据驱动。客户端开发分层的话理论上就是数据层、业务逻辑层、UI层,相对于三层的话一般我们的代码可以分为:

  A:数据的持久化存储;

  B:数据的读取和写入;

  C:业务逻辑处理;

  D:界面业务逻辑处理后数据的展示。

  E:界面与业务逻辑的交互。

  在这样的开发过程中A、B一般都是设计最满意的地方。持久化过程做的既通用、又能清晰,持久化数据和实体类之间的定义、转换,都是变动性最小、最稳定的。而C与客户端的关系最紧密、变动也最大。大多数代码都是集中在这里。D、E两部分是负责显示UI、和处理UI的交互逻辑。也有不少的代码量。

  显然C部分是一个程序中,代码量最多,随着版本迭代最容易混乱的地方,所以我们应该重点把精力放在C部分,但是D、E两个部分切因为和业务层紧密相连,C部分的频繁改动很可能导致我们把本来属于C部分的代码写入D、E部分里。比如窗体或控件的Click、构造函数、load里面。因为这2部分以消息或者事件来与逻辑层沟通,所以一旦出现同一个数据需要在多处展示、修改时,用于同步逻辑得代码就会变得复杂,代码也会到处乱写。因为在解决业务问题时,我们的重点在C部分。但是在解决UI交互问题的时候,D、E的UI展示又编程了我们的重点,思维来回的切换,导致我们写出很多难以维护的代码。

  WPF中引入了Data Binding的概念。使用Data Binding配合属性通知和数据模板,我们就可以把关注的D、E的展示层和C的业务逻辑层更好的分割开来。使我们把重点放在业务逻辑层。UI上的元素通过Data Binding可以和数据关联上、一处数据可以和多处UI元素绑定。也可以双向绑定,如果能很好的使用这个思路,我们就可以很好的实现了逻辑层和UI层的解耦。而且所有与业务逻辑相关的代码都会处于业务逻辑层、用户界面不包含任何代码。

  开头讲了这么说,就是想让大家忘记之前的事件驱动写代码的方式。然后尝试开始学习数据驱动写代码的方式。Data Binding就是第一步。

什么是Binding

  我们先来看一个最简单的例子,我们使用Binding来把一个元素的值绑定到另外一个元素的值上。使用ElementName来指向对应的元素Name,Path来指向我们想绑定的元素对应的属性,该例子不包含任何后台代码:

"BindingExample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:BindingExample"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    "{Binding ElementName=slider,Path=Value}"/> 
            "slider" Maximum="100" Minimum="1"/>

我们把代码跑起来效果图如下,我们的TextBlock显示的Text和Slider的滑动值绑定在了一起:

WPF教程三:学习Data Binding把思想由事件驱动转变为数据驱动

WPF中Binding可以通过调用类的INotifyPropertyChanged的实现自动通知功能使多个绑定了属性的UI元素自动更新UI。在WPF中依赖项属性是个很重要的知识点,但是我觉得应该先讲解bangding,在建立了数据驱动的思维,先去使用数据驱动,再去搞明白数据驱动的原理。而这个例子中我们使用Binding绑定了Slider的属性Value。再Slider 上按F12.进入到类的说明界面。我们看到了又一个Value属性。还有一个属性名为ValueProperty,类型为DependencyProperty的对象。他就是我们所说的依赖项属性。这一章我们不讲他。只讲如何使用。当作普通属性就好。

所以这个例子就是我们把一个Textlock的Text显示内容通过Binding绑定到了Slider的Value属性上。而通过在属性的Set方法中调用INotifyPropertyChanged的实现。所以TextBlock的Text能随着Slider的Value变化跟着一起显示对应的值就行。这里能理解到这样就可以了。继续往下。

WPF教程三:学习Data Binding把思想由事件驱动转变为数据驱动

既然2个元素可以绑定一个属性。随着DataContext下对应属性的值的变化而变化,就达到了我们要的目的,解耦业务层和UI层。我们通过业务层修改对应的属性,达到更新UI得目的。UI通过更新对应的属性。达到修改业务层得目的。这样我们就可以把重点放在业务层。

通过这个原理,我们尝试创建一个业务层和UI层交互的属性,并绑定它,通过属性更新UI显示结果。通过UI得交互修改属性得值来达到更新业务层。这样我们只需要关注业务层当前值的变化。

我们通过cs文件设置一个简单的属性通知。我们把UI的显示值和设置的Person下的Intelligence属性绑定在一起。如果UI变化了。Intelligence也变化。如果Intelligence变化了。UI也跟着变化。就实现了我们刚才计划的一个业务逻辑层的值变化。直接影响绑定的UI部分。UI的绑定的值变化,可以直接再逻辑层处理。因为只是演示功能。所以我们没有VM层。这里只演示值得变化。后面MVVM会讲解DataContext。和MVVM分层。这里主要理解Binding得值可以双向通知就可以了。

修改XAML代码和CS为以下内容:

"BindingExample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:BindingExample "
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    "{Binding Intelligence}"/>
            "slider" Maximum="100" Minimum="1" Value="{Binding Intelligence}"/>

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Diagnostics;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace BindingExample
{
    /// 
    /// MainWindow.xaml 的交互逻辑
    /// 
    public partial class MainWindow : Window
    {
        Person duwenlong;
        public MainWindow()
        {
            InitializeComponent();
            duwenlong = new Person();
            this.DataContext = duwenlong;
        }
    }
    public class Person : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;
        private double _intelligence;
        public double Intelligence
        {
            get { return _intelligence; }
            set
            {
                _intelligence = value;
                Debug.WriteLine($"Intelligence as {Intelligence}");
                if (this.PropertyChanged != null)
                {
                    this.PropertyChanged.Invoke(this, new PropertyChangedEventArgs("Intelligence"));
                }
            }
        }
    }
}

我们再每次Set值得时候。向控制台打印了一个消息。Debug.WriteLine($”Intelligence as {Intelligence}”);用来观察是否实现了绑定。我们观察到,值再变化的时候,业务层和UI层是一起再变化的。到此刻我们得目的就达到了。因为基于这个功能,我们结合其他知识我们可以完成很多很多得功能。但是目前要理解和养成数据驱动得思维习惯。

WPF教程三:学习Data Binding把思想由事件驱动转变为数据驱动

到现在为止,我们也没有在后台写业务代码。因为我们的模板是解耦业务逻辑层和UI层。我们要学习的是通过Binding来实现业务逻辑的值变更、直接更新到UI层。

我们讲解一下以上代码:

在XAML文件中我们创建了一个TextBlock 和一个Slider。2个控件。我们把TextBlock的Text属性(用于显示文本的属性)设置为{Binding Intelligence}。把Slider的Value属性(滑块的当前值)设置为{Binding Intelligence}。

如果想使用绑定。

1、XAML中就必须使用{Binding }这样的写法。后面跟的是属性,而这个属性是来自于当前类的DataContext中。this.DataContext对象是我们自己在cs代码中赋值的。XAML元素通过Binding绑定DataContext下的某个元素的值。来实现更改对应的属性。

而后台代码中必须设置需要绑定的对象到this.DataContext。这个对象(我们当前的Person)必须继承自INotifyPropertyChanged。并且使用PropertyChanged来触发通知。如果这个属性需要通知UI层,在属性的Set里就需要发送通知消息。写法就类似于

PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(“Name”));

如果执行绑定失败可以在对照一下代码。看看哪里有问题。这是简单的绑定。。

接下来我们尝试双向绑定和通过代码设置绑定。修改代码如下:

"BindingExample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:BindingExample"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    "{Binding Intelligence}"/>
        "{Binding Intelligence,Mode=TwoWay}"/>
        "1" Maximum="100" Value="{Binding Intelligence}"/>
        "Horizontal">
            "名称:"/>
            "{Binding Name}" MinWidth="120"/>
            "请输入需要修改的名称:"/>
            "120" x:Name="tb_inputName"/>
        "通过代码修改绑定值得属性。修改Name为杜文龙" Click="AlertText_Click"/>

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace BindingExample
{
    /// 
    /// MainWindow.xaml 的交互逻辑
    /// 
    public partial class MainWindow : Window
    {
        Person duwenlong;
        public MainWindow()
        {

            InitializeComponent();
            duwenlong = new Person();
            Binding binding = new Binding();
            binding.Source = duwenlong;          binding.Mode = BindingMode.TwoWay;
            binding.Path = new PropertyPath("Name");
            BindingOperations.SetBinding(tb_inputName, TextBox.TextProperty, binding);
            this.DataContext = duwenlong;
        }

        private void AlertText_Click(object sender, RoutedEventArgs e)
        {
            duwenlong.Name = "杜文龙";
        }
    }

    public class Person : INotifyPropertyChanged
    {
        private double _intelligence;
        public double Intelligence
        {
            get { return _intelligence; }
            set
            {
                _intelligence = value;
                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("Intelligence"));

            }
        }
        private string _name;
        public string Name
        {
            get { return _name; }
            set
            {
                _name = value;
                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("Name"));
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;
    }
}

在XAML中我们添加了一个TextBox 它的TextBox为 {Binding Intelligence,Mode=TwoWay} ,注意这个Mode=TwoWay。这是一个双向绑定的意思。通过它可以实现UI的内容更新了会返回到后台的绑定属性上。(因为没有绑定TextChanged事件,所以输入完成后需要丢失焦点才会有反应我按下了Tab键。这里需要使用Binding的一个属性UpdateSourceTrigger.他的类型是一个枚举。目前先不延申去讲)。我们看到了没有针对性的写后台的的代码通过一个属性,就完成了多处的使用和更新。而这个属性是业务层的。所以可以通过这个值来干很多的事情。

WPF教程三:学习Data Binding把思想由事件驱动转变为数据驱动

接下来我们继续看上面其他的代码:

在这里TextBlock 的Text绑定了后台代码的Person实例下的Name属性,
Name为tb_inputName的TextBox通过后台代码也实现了绑定Name。还是双向绑定。在cs文件下和XAML文件下使用{Binding }效果是一样的。
WPF教程三:学习Data Binding把思想由事件驱动转变为数据驱动

我们把TextBlock和TextBox都绑定了Person的Name属性。我们又在Button下创建了Click事件。用来模拟修改Name属性(我们目前没有分层。也没有学习Command 所以假设cs文件是业务层)。

在Click事件中我们修改了person对象的Name属性为杜文龙。Name属性通过绑定关联了textblock和textbox。所以我们没有直接操作UI层。

当Name属性变化时。对应绑定的UI控件的值也发生了变化。因为双向绑定当TextBox的值变化时,Name也发生了变化。这样就可以在业务层处理了。。

WPF教程三:学习Data Binding把思想由事件驱动转变为数据驱动

我们尝试把双向绑定修改为单向绑定:

XAML下写法:

WPF教程三:学习Data Binding把思想由事件驱动转变为数据驱动

cs下写法:

WPF教程三:学习Data Binding把思想由事件驱动转变为数据驱动

在尝试修改TextBox并把焦点切换走。会发现其他绑定Name值得控件的值并没有变化。这章就讲这么多拉。主要是尝试培养数据驱动得思维。

Binding还支持多级路径、省略Path等写法。作为新手目前不推荐延申这些知识。因为主要先搞明白什么是数据驱动。如何使用数据驱动。在去考虑如何使用更高级的功能。

漏掉了一个在Binding中比较重要的知识点。RelativeSource. 使用RelativeSource对象指向源对象。用这个可以在当前元素的基础上查找其他对象用于绑定到源对象。

在实际使用Binding的过程中大部分时间Binding都放在了数据模板和控件模板中,(数据模板是控件模板用于定义控件的UI)。

在模板中编写Binding时有时候无法直接拿到我们需要绑定的数据对象,我们不能确定我们需要的Source对象叫什么,但是我们直到了我们需要使用的对象在UI布局上的相对关系。比如控件自己关联了某个数据,关键自己某个层级的容器数据。这个时候我们的RelativeSource就派上了用场。我们使用RelativeSource首先要3个关键参数。

AncestorType=我们需要查找的类型。比如Grid

AncestorLevel= 我们需要向上查找几级

Path=我们找到的元素需要绑定的属性。

这三个关键的参数配置完。我们就可以完成对RelativeSource的使用。

    "G0" Margin="12" Background="Red">
                "In this Grid0 container"/>
                "G1" Margin="12" Background="Blue">
                    "In this Grid1 container"/>
                    "G2" Margin="12" Background="Yellow">
                        "In this Grid2 container"/>
                        "G3" Margin="12" Background="Beige">
                            "In this Grid3 container"/>
                                "ces" Text="{Binding RelativeSource={RelativeSource AncestorType=Grid,AncestorLevel=1},Path=Name}"/>

我们嵌套几个Grid,并在每个嵌套的Grid中都放入了一行文本用来显示自己所在的位置。设置了Margin使他有部分的重叠,可以更好的看到相互之间的层级关系。最内层使用一个TextBlock.在TextBlock的Text属性上使用RelativeSource。通过修改AncestorLevel 来设置向上查找Grid的等级。我们设置为1.向外层查找第一个找到的Grid对象。并绑定对应的Name。可以尝试修改一下并且看一下效果。

WPF教程三:学习Data Binding把思想由事件驱动转变为数据驱动

我创建了一个C#相关的交流群。用于分享学习资料和讨论问题。欢迎有兴趣的小伙伴:QQ群:542633085

文章来源于互联网: WPF教程三:学习Data Binding把思想由事件驱动转变为数据驱动

技术交流Q群: 1012481075 群内有各种流行书籍资料
原文链接:

发表评论

您的电子邮箱地址不会被公开。

WeChat
WeChat
QQ
QQ
返回顶部