之前大家寫代碼都喜歡用事件驅動，比如說鼠標輸入的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來指向我們想綁定的元素對應的屬性，該例子不包含任何后台代碼：
<Window x:Class="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"> <Grid> <StackPanel> <TextBlock Text="{Binding ElementName=slider,Path=Value}"/> <Slider x:Name="slider" Maximum="100" Minimum="1"/> </StackPanel> </Grid> </Window>
我們把代碼跑起來效果圖如下，我們的TextBlock顯示的Text和Slider的滑動值綁定在了一起：
在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變化跟着一起顯示對應的值就行。這里能理解到這樣就可以了。繼續往下。
既然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為以下內容：
<Window x:Class="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"> <Grid> <StackPanel> <TextBlock Text="{Binding Intelligence}"/> <Slider x:Name="slider" Maximum="100" Minimum="1" Value="{Binding Intelligence}"/> </StackPanel> </Grid> </Window>
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 { /// <summary> /// MainWindow.xaml 的交互邏輯 /// </summary> 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層是一起再變化的。到此刻我們得目的就達到了。因為基於這個功能，我們結合其他知識我們可以完成很多很多得功能。但是目前要理解和養成數據驅動得思維習慣。
到現在為止，我們也沒有在后台寫業務代碼。因為我們的模板是解耦業務邏輯層和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"));
如果執行綁定失敗可以在對照一下代碼。看看哪里有問題。這是簡單的綁定。。
接下來我們嘗試雙向綁定和通過代碼設置綁定。修改代碼如下：
<Window x:Class="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"> <Grid> <StackPanel> <TextBlock Text="{Binding Intelligence}"/> <TextBox Text="{Binding Intelligence,Mode=TwoWay}"/> <Slider Minimum="1" Maximum="100" Value="{Binding Intelligence}"/> <StackPanel Orientation="Horizontal"> <TextBlock Text="名稱:"/> <TextBlock Text="{Binding Name}" MinWidth="120"/> <TextBlock Text="請輸入需要修改的名稱:"/> <TextBox MinWidth="120" x:Name="tb_inputName"/> </StackPanel> <Button Content="通過代碼修改綁定值得屬性。修改Name為杜文龍" Click="AlertText_Click"/> </StackPanel> </Grid> </Window>
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 { /// <summary> /// MainWindow.xaml 的交互邏輯 /// </summary> 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.他的類型是一個枚舉。目前先不延申去講）。我們看到了沒有針對性的寫后台的的代碼通過一個屬性，就完成了多處的使用和更新。而這個屬性是業務層的。所以可以通過這個值來干很多的事情。
接下來我們繼續看上面其他的代碼：
<TextBlock Text="{Binding Name,Mode=TwoWay}" MinWidth="120"/>
<TextBox MinWidth="120" x:Name="tb_inputName"/>
<Button Content="通過代碼修改綁定值得屬性。修改Name為杜文龍" Click="AlertText_Click"/>
在這里TextBlock 的Text綁定了后台代碼的Person實例下的Name屬性，
Name為tb_inputName的TextBox通過后台代碼也實現了綁定Name。還是雙向綁定。在cs文件下和XAML文件下使用{Binding }效果是一樣的。
我們把TextBlock和TextBox都綁定了Person的Name屬性。我們又在Button下創建了Click事件。用來模擬修改Name屬性（我們目前沒有分層。也沒有學習Command 所以假設cs文件是業務層）。
在Click事件中我們修改了person對象的Name屬性為杜文龍。Name屬性通過綁定關聯了textblock和textbox。所以我們沒有直接操作UI層。
當Name屬性變化時。對應綁定的UI控件的值也發生了變化。因為雙向綁定當TextBox的值變化時，Name也發生了變化。這樣就可以在業務層處理了。。
我們嘗試把雙向綁定修改為單向綁定：
XAML下寫法：
cs下寫法：
在嘗試修改TextBox並把焦點切換走。會發現其他綁定Name值得控件的值並沒有變化。這章就講這么多拉。主要是嘗試培養數據驅動得思維。
Binding還支持多級路徑、省略Path等寫法。作為新手目前不推薦延申這些知識。因為主要先搞明白什么是數據驅動。如何使用數據驅動。在去考慮如何使用更高級的功能。
漏掉了一個在Binding中比較重要的知識點。RelativeSource. 使用RelativeSource對象指向源對象。用這個可以在當前元素的基礎上查找其他對象用於綁定到源對象。
在實際使用Binding的過程中大部分時間Binding都放在了數據模板和控件模板中，（數據模板是控件模板用於定義控件的UI）。
在模板中編寫Binding時有時候無法直接拿到我們需要綁定的數據對象，我們不能確定我們需要的Source對象叫什么，但是我們直到了我們需要使用的對象在UI布局上的相對關系。比如控件自己關聯了某個數據，關鍵自己某個層級的容器數據。這個時候我們的RelativeSource就派上了用場。我們使用RelativeSource首先要3個關鍵參數。
AncestorType=我們需要查找的類型。比如Grid
AncestorLevel= 我們需要向上查找幾級
Path=我們找到的元素需要綁定的屬性。
這三個關鍵的參數配置完。我們就可以完成對RelativeSource的使用。
<Grid x:Name="G0" Margin="12" Background="Red"> <TextBlock Text="In this Grid0 container"/> <Grid x:Name="G1" Margin="12" Background="Blue"> <TextBlock Text="In this Grid1 container"/> <Grid x:Name="G2" Margin="12" Background="Yellow"> <TextBlock Text="In this Grid2 container"/> <Grid x:Name="G3" Margin="12" Background="Beige"> <StackPanel> <TextBlock Text="In this Grid3 container"/> <TextBlock Name="ces" Text="{Binding RelativeSource={RelativeSource AncestorType=Grid,AncestorLevel=1},Path=Name}"/> </StackPanel> </Grid> </Grid> </Grid> </Grid>
我們嵌套幾個Grid，並在每個嵌套的Grid中都放入了一行文本用來顯示自己所在的位置。設置了Margin使他有部分的重疊，可以更好的看到相互之間的層級關系。最內層使用一個TextBlock.在TextBlock的Text屬性上使用RelativeSource。通過修改AncestorLevel 來設置向上查找Grid的等級。我們設置為1.向外層查找第一個找到的Grid對象。並綁定對應的Name。可以嘗試修改一下並且看一下效果。
