WPF之Binding深入探討


1,Data Binding在WPF中的地位

程序的本質是數據+算法。數據會在存儲、邏輯和界面三層之間流通,所以站在數據的角度上來看,這三層都很重要。但算法在3層中的分布是不均勻的,對於一個3層結構的程序來說,算法一般分布在這幾處:

A。數據庫內部。

B。讀取和寫回數據。

C。業務邏輯。

D。數據展示。

E。界面與邏輯的交互。

A,B兩部分的算法一般都非常穩定,不會輕易去改動,復用性也很高;C處與客戶需求最緊密,最復雜,變化最大,大多少算法都集中在這里。D,E負責UI和邏輯的交互,也占有一定量的算法。

顯然,C部分是程序的核心,是開發的重中之重,所以我們應該把精力集中在C部分。然而,D,E兩部分卻經常成為麻煩的來源。首先這兩部分都與邏輯緊密相關,一不小心就有可能把本來該放在邏輯層里面的算法寫進這兩部分(所以才有了MVC、MVP等模式來避免這種情況出現)。其次,這兩部分以消息或者事件的方式與邏輯層溝通,一旦出現同一個數據需要在多出展示/修改時,用於同步的代碼錯綜復雜;最后,D和E本來是互逆的一對兒。但卻需要分開來寫-----顯示數據寫一個算法,修改數據再寫一個算法。總之導致的結果就是D和E兩部分會占去一部分算法,搞不好還會牽扯不少精力。

問題的根源在於邏輯層和展示層的地位不固定------當實現客戶需求的時候,邏輯層的確處於核心地位。但到了實現UI的時候,展示層又處於核心的地位。WPF作為一種專業的展示層技術,華麗的外觀和動畫只是它的表層現象,最重要的是他在深層次上把程序員的思維固定在了邏輯層,讓展示層永遠處於邏輯層的從屬地位。WPF具有這種能力的關鍵在於它引入了Data Binding概念及與之配套的Dependency Property系統和DataTemplate。

從傳統的Winform轉移到WPF上,對於一個三層程序而言,數據存儲層由數據庫和文件系統組成,數據傳輸和處理仍然使用.NetFramework的ADO.NET等基本類(與Winform開發一樣)。展示層則使用WPF類庫來實現,而展示層和邏輯層的溝通就使用Data Binding來實現。可見,Data Binding在WPF中所起的作用就是高速公路的作用。有了這條高速公路,加工好的數據自動送達用戶界面並加以顯示,被用戶修改過的數據也會自動傳回業務邏輯層,一旦數據被加工好又會被送往界面。。。。程序的邏輯層就像是一個強有力的引擎一直在運作,用加工好的數據驅動用戶界面也文字、圖形、動畫等形式把數據顯示出來------這就是數據驅動UI。

引入Data Binding之后,D,E兩部分被簡化了很多。首先,數據在邏輯層和用戶界面直來之去、不涉及邏輯問題,這樣的用戶界面部分基本上不包含算法:Data Binding本身就是雙向通信,所以相當於把D和E合二為一;對於多個UI元素關注同一個數據的情況,只需要用Data Binding將這些UI元素和數據一一關聯上(以數據為中心的星形結構),當數據變化后,這些UI元素會同步顯示這一變化。前面提到的問題也都迎刃而解了。更重要的是經過這樣的優化,所有與業務邏輯相關的算法都處在業務邏輯層,邏輯層成了一個可以獨立運轉,完整的體系,而用戶界面則不需要任何邏輯代碼。完全依賴和從屬於業務邏輯層。這樣做有兩個顯而易見的好處,第一:如果把UI看做是應用程序的皮,把存儲層和邏輯層看作是程序的瓤,我們可以很輕易的把皮撕下來換一個新的。第二:因為數據層能夠獨立運作,自成體系,所以我們可以進行更完善的單元測試而無需借助UI自動化測試工具----你完全可以把單元測試看作是一個“看不見的UI”,單元測試只是使用這個UI繞過真實的UI直接測試業務邏輯罷了。

2 ,  Binding 基礎

如果把Binding比作數據的橋梁,那么它的兩端分別是源(Source)和目標(Target)。數據叢哪里來哪里就是源,到哪里去哪里就是目標。一般情況下,Binding的源是業務邏輯層的對象,Binding的目標是UI層的控件對象。這樣數據就會源源不斷的通過Binding送達UI界面,被UI層展現,這就完成了數據驅動UI的過程。有了這座橋梁,我們不僅可以控制車輛在源與目標之間是雙向通行還是單向通行。還可以控制數據的放行時機,甚至可以在橋上搭建一些關卡用來轉換數據類型或者檢驗數據的正確性。

通過對Binding有了一個基本概念之后,讓我們看一個最基本的例子。這個例子是創建一個簡單的數據源並通過Binding把它連接到UI元素上。

首先,我們創建一個名為"Student"的類,這個類的實例將作為數據源來使用。

 

[csharp]  view plain copy print ?
 
  1. public class Student  
  2.     {  
  3.         private string name;  
  4.   
  5.         public string Name  
  6.         {  
  7.             get { return name; }  
  8.             set  
  9.             {  
  10.                 name = value;  
  11.         }  
  12.     }  

這個類很簡單,簡單到只有一個string類型的Name屬性。前面說過數據源是一個對象,一個對象本身可能會有很多數據,這些數據又通過屬性暴露給外界。那么其中哪個元素是你想通過Binding送達UI元素的呢,換句話說,UI元素關心的是哪個屬性值的變化呢?這個屬性值稱之為Binding的路徑(Path)。但光有屬性還不行-------Binding是一種自動機制,當值變化后屬性要有能力通知Binding,讓Binding把變化傳遞給UI元素。怎樣才能讓一個屬性具備這種通知Binding值已經改變的能力呢?方法是在屬性的Set語句中激發一個PropertyChanged事件。這個事件不需要我們自己聲明,我們要做的事是讓作為數據源的類實現System.ComponentModel名稱空間中的INotifyPropertyChanged接口。當為Binding設置了數據源之后,Binding就會自動偵聽來自這個接口PropertyChanged事件。

 

實現INotifyPropertyChanged接口的類看起來是這樣:

 

[csharp]  view plain copy print ?
 
  1. public class Student : INotifyPropertyChanged  
  2.     {  
  3.         private string name;  
  4.   
  5.         public string Name  
  6.         {  
  7.             get { return name; }  
  8.             set  
  9.             {  
  10.                 name = value;  
  11.                 if (PropertyChanged != null)  
  12.                 {  
  13.                     this.PropertyChanged.Invoke(thisnew PropertyChangedEventArgs("Name"));  
  14.                 }  
  15.             }  
  16.         }  
  17.         public event PropertyChangedEventHandler PropertyChanged;  
  18.     }  


經過這樣一升級,當Name屬性的值發生變化時PropertyChanged事件就會被激發,Binding接收到這個事件后發現事件的消息告訴它是Name屬性值發生了變化,於是通知Binding目標端的UI元素顯示新的值。

 

然后我們在窗體上准備一個TextBox和Button,代碼如下:

 

[html]  view plain copy print ?
 
  1. <Window x:Class="WpfApplication1.MainWindow"  
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
  4.         Title="MainWindow" Height="350" Width="525">  
  5.     <Grid>  
  6.         <TextBox Height="23" HorizontalAlignment="Left" Margin="185,43,0,0" Name="textBox1" VerticalAlignment="Top" Width="120" />  
  7.         <Button Content="Button" Height="23" HorizontalAlignment="Left" Margin="209,96,0,0" Name="button1" VerticalAlignment="Top" Width="75" Click="button1_Click" />  
  8.     </Grid>  
  9. </Window>  


后台代碼這樣寫:

 

 

[csharp]  view plain copy print ?
 
  1. /// <summary>  
  2.    /// MainWindow.xaml 的交互邏輯  
  3.    /// </summary>  
  4.    public partial class MainWindow : Window  
  5.    {  
  6.        Student stu = null;  
  7.        public MainWindow()  
  8.        {  
  9.            InitializeComponent();  
  10.            stu = new Student();  
  11.            Binding bind = new Binding();  
  12.            bind.Source = stu;  
  13.            bind.Path = new PropertyPath("Name");  
  14.            this.textBox1.SetBinding(TextBox.TextProperty, bind);  
  15.   
  16.        }  
  17.   
  18.        private void button1_Click(object sender, RoutedEventArgs e)  
  19.        {  
  20.            stu.Name += "f";  
  21.            new Window1().Show();  
  22.        }  
  23.    }  


讓我們逐句解釋一下這段代碼,這段代碼是MainWIndow的后台代碼,它的前端代碼就是上面的XAML代碼。“Student stu;”是為MainWindow聲明一個Student類型的成員變量,這樣做的目的是為了在MainWindow的構造器和Button.Click事件處理器中都可以訪問到由它引用的Student實例(數據源)。

 

在MainWindow的構造器中“InitializeComponent();”是自動生成的代碼,用途是初始化UI元素。“stu=new Student();”這句是創建一個Student實例並用stu成員變量引用它,這個對象就是我們的數據源。

在准備Binding的部分,先使用“Binding bind = new Binding();”聲明Binding類型變量並創建實例,然后使用“bind.Source=stu;”為Binding實例指定數據源,最后使用“bind.Path= new PropertyPath('Name')”語句為Binding指定訪問路徑。

把數據源和目標連接在一起的任務是使用“BindingOperations.SetBinding(...)”方法完成的,這個方法的3個參數是我們記憶的重點:

第一個參數是指定Binding的目標,本例中的this.textBoxName。

與數據源的Path原理類似,第二個參數用於為Binding指明為Binding指明把這個數據送達目標的哪個數據。

第三個參數很明顯,就是指定使用哪個Binding實例將數據源和目標關聯起來。

運行程序,單擊按鈕我們將會看到如下的效果圖:


通過上面的例子,我們已經在頭腦中建立起來如圖所示的模型


先用這個做基礎,后面我們將研究Binding的每個特點。

1.3         Binding的源與路徑

Binding 的源也就是數據的源頭。Binding對源的要求並不苛刻------只要它是一個對象,並且通過屬性(Property)公開自己的數據,它就能作為Binding 的源。

前面一個例子已經向大家證明,如果想讓作為Binding源的對象具有自動通知Binding自己屬性值已經已經變化的能力。那么就需要讓類實現INotifyChanged接口並在屬性的Set語句中激發PropertyChanged事件。在日常生活中,除了使用這種對象作為數據源之外,我們還有更多的選擇,比如控件把自己的容器或子集元素當源、用一個控件做為另一個控件的數據源,把集合作為ItemControl的數據源、使用XML作為TreeView或Menu的數據源。把多個控件關聯到一個“數據制高點”上,甚至干脆不給Binding指定數據源、讓他自己去找。下面我們就分述這些情況。

1.3.1       把控件作為Binding源與Binding標記擴展。

前面講過,大多數情況下Binding的源是邏輯層對象,但有的時候為了讓UI產生聯動效果也會使用Binding在控件間建立關聯。下面的代碼是吧一個TextBox的Text屬性關聯到Slider的Value的屬性上。

 

[html]  view plain copy print ?
 
  1. <Window x:Class="WpfApplication1.Window1"  
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
  4.         Title="Window1" Height="321" Width="401">  
  5.     <Grid>  
  6.         <TextBox Height="23" HorizontalAlignment="Left" Margin="141,46,0,0" Name="textBox1" VerticalAlignment="Top" Width="120" Text="{Binding Path=Value,ElementName=slider1}"/>  
  7.         <Slider Height="23" HorizontalAlignment="Left" Margin="84,106,0,0" Name="slider1" VerticalAlignment="Top" Width="212" />  
  8.         <Button Content="Button" Height="23" HorizontalAlignment="Left" Margin="166,197,0,0" Name="button1" VerticalAlignment="Top" Width="75" Click="button1_Click" />  
  9.     </Grid>  
  10. </Window>  

運行效果如下圖:

 


正如大家所見,除了可以在C#中建立Binding外在XAML代碼里也可以方便的設置Binding,這就給設計師很大的自由度來決定UI元素之間的關聯情況。值得注意的是,在C#代碼中,可以訪問在XAML中聲明的變量但是XAML中不能訪問C#中聲明的變量,因此,要想在XAML中建立UI元素和邏輯對象的Binding還要頗費些周折,把邏輯代碼聲明為XAML中的資源(Resource),我們放資源一章去講。

回頭來看XAML代碼,它使用了Binding標記擴展語法:

 

[html]  view plain copy print ?
 
  1. <TextBox Height="23" HorizontalAlignment="Left" Margin="141,46,0,0" Name="textBox1" VerticalAlignment="Top" Width="120" Text="{Binding Path=Value,ElementName=slider1}"/>  

與之等價的C#代碼是:

 

 

[csharp]  view plain copy print ?
 
  1. this.textBox1.SetBinding(TextBox.TextProperty, new Binding("Value") { ElementName="Slider1"});  

因為Binding類的構造器本身具有可以接收Path的參數,所以也常寫作:

 

 

[html]  view plain copy print ?
 
  1. <TextBox Height="23" HorizontalAlignment="Left" Margin="141,46,0,0" Name="textBox1" VerticalAlignment="Top" Width="120" Text="{Binding Value,ElementName=slider1}"/>  

注意:

 

因為我們在C#代碼中可以直接訪問控件對象,所以一般不會使用Binding的ElementName屬性,而是直接賦值給Binding的Sourece屬性。

Binding的標記擴展語法,初看有些平淡甚至有些別扭,但細品就會體驗到其的精巧之處。說它別扭,是因為我們已經習慣了Text=“Hello World”這種鍵--值式的賦值方式,而且認為值與屬性的值類型一定要一致-------大腦很快會質詢Text="{Binding Value,ElementName=Slider1}"的字面意思----Text的類型是String,為什么要賦一個Binding類型的值呢?其實我們並不是為Text屬性賦值,為了消除這種誤會,我們可以把代碼讀作:為Text屬性設置Binding為...。再想深一步,我們不是經常把函數視為一個值嗎?只是這個值在函數執行之后才能得到。同理,我們也可以把Binding視為一種間接的、不固定的賦值方式-----Binding擴展很恰當的表達了這個賦值方式。

1.3.2        控制Binding的方向及數據更新

Binding在源與目標之間架起了溝通的橋梁,默認情況下數據即可以通過Binding送達目標,也可以通過目標回到源(收集用戶對數據的修改)。有時候數據只需要展示給用戶,不需要用戶修改,這時候可以把Binding模式設置為從目標向源的單向溝通以及只在Binding關系確立時讀取一次數據,這需要我們根據實際情況選擇。

控制Binding數據流向的屬性是Model,它的類型是BindingModel的枚舉。BindingModel可以取值為TwoWay、OneWay、OneTime、OneWayToSource和Default。這里的Default指的是Binding的模式會根據目標是實際情況來確定,不如是可以編輯的(TextBox的Text屬性),Default就采用雙向模式。如果是TextBlock,不可編輯,就使用單向模式。

接上一節的小例子,拖動Slider手柄時,TextBox就會顯示Slider的當前值(實際上這一塊涉及到一個Double到String類型的轉換,暫且忽略不計);如果我們在TextBox里面輸入一個恰當的值按Tab鍵、讓焦點離開TextBox,則Slider手柄就會跳轉至相應的值那里。如下圖所示:


為什么一定要在TextBox失去焦點以后才改變值呢?這就引出了Binding的另外一個屬性-----UpdateSourceTrigger,它的類型是UpdateSourceTrigger枚舉,可取值為PropertyChanged、LostFous、Explicit和Default。顯然,對於Text的Default行為與LostFocus一致,我們只需要把這個值改成PropertyChanged,則Slider就會隨着輸入值的變化而變化了。

注意:

順便提一句,Binding還具有NotifyOnSourceUpdated屬性和NotifyOnTargetUpdated兩個bool類型是屬性。如果設置為True,則在源或目標被更新以后就會觸發相應的SourceUpdated事件和TargetUpdated事件。實際工作中我們可以監聽這兩個事件來找出來哪些數據或控件被更新了。

1.3.3   Binding的路徑(Path)

做為Binding的源可能會有很多屬性,通過這些屬性Binding源可以把數據暴露給外界。那么,Binding到底需要關注哪個屬性值呢?就需要用Binding的Path屬性來指定了。例如前面這個例子,我們把Slider控件對象作為數據源,把它的Value屬性作為路徑。

盡管在XAML代碼中或者Binding類的構造器參數列表中我們使用字符串來表示Path,但Path的實際類型是PropertyPath。下面讓我們來看看如何創建Path來應付實際情況(我將使用C#和XAML兩種代碼進行描述)。

最簡單的方法就是直接把Binding關聯到Binding源的屬性上,前面的例子就是這樣,語法如下:

 

[html]  view plain copy print ?
 
  1. <TextBox Height="23" HorizontalAlignment="Left" Margin="141,46,0,0" Name="textBox1" VerticalAlignment="Top" Width="120" Text="{Binding Path=Value,ElementName=slider1}"/>  

等效的C#代碼就是:

 

 

[csharp]  view plain copy print ?
 
  1. this.textBox1.SetBinding(TextBox.TextProperty, new Binding("Value") {Source=slider1});  

Binding還支持多級路徑(通俗的講就是一路“點”下去),比如,我們想讓一個TextBox顯示另外一個TextBox內容的長度,我們可以這樣寫:

 

 

[html]  view plain copy print ?
 
  1. <TextBox Height="23" HorizontalAlignment="Left" Margin="152,50,0,0" Name="textBox1" VerticalAlignment="Top" Width="158" />  
  2.        <TextBox Height="23" HorizontalAlignment="Left" Margin="152,105,0,0" Name="textBox2" Text="{Binding Path=Text.Length,ElementName=textBox1,Mode=OneWay}" VerticalAlignment="Top" Width="158"/>  


等效的C#代碼是:

 

 

[csharp]  view plain copy print ?
 
  1. this.textBox2.SetBinding(TextBox.TextProperty, new Binding("Text.Length") {Source = textBox1, Mode= BindingMode.OneWay });  


運行效果如下圖:

 


我們知道,集合類型是索引器(Indexer)又稱為帶參屬性。既然是屬性,索引器也能作為Path來使用。比如我們想讓一個TextBox顯示另外一個TextBox的第4個字符,我們可以這樣寫:

 

[html]  view plain copy print ?
 
  1. <TextBox Height="23" HorizontalAlignment="Left" Margin="152,50,0,0" Name="textBox1" VerticalAlignment="Top" Width="158" Text="ABCDE" />  
  2.        <TextBox Height="23" HorizontalAlignment="Left" Margin="152,105,0,0" Name="textBox2" Text="{Binding Path=Text[3],ElementName=textBox1,Mode=OneWay}" VerticalAlignment="Top" Width="158"/>  


C#代碼如下:

 

 

[csharp]  view plain copy print ?
 
  1. this.textBox2.SetBinding(TextBox.TextProperty, new Binding("Text.[3]") { Source=textBox1,Mode= BindingMode.OneWay});  


我們甚至可以把Text與[3]之間的點去掉,一樣可以正確工作,運行效果如下圖:

 


當使用一個集合或者DataView做為數據源時,如果我們想把它默認的元素做為數據源使用,則需要使用下面的語法:

 

[csharp]  view plain copy print ?
 
  1. List<string> infos = new List<string>() { "Jim","Darren","Jacky"};  
  2.            textBox1.SetBinding(TextBox.TextProperty, new Binding("/") { Source=infos});  
  3.            textBox2.SetBinding(TextBox.TextProperty, new Binding("/[2]") { Source = infos, Mode= BindingMode.OneWay });  
  4.            textBox3.SetBinding(TextBox.TextProperty, new Binding("/Length") { Source = infos, Mode= BindingMode.OneWay });  


顯示效果如下:

 


如果集合中仍然是集合,我們想把子集集合中的元素做Path,我們可以使用多級斜線的語法(即“一路”斜線下去),例如:

 

[html]  view plain copy print ?
 
  1. /// <summary>  
  2.    /// Window4.xaml 的交互邏輯  
  3.    /// </summary>  
  4.    public partial class Window4 : Window  
  5.    {  
  6.        public Window4()  
  7.        {  
  8.            InitializeComponent();  
  9.            List<Contry> infos = new List<Contry>() { new Contry() { Name = "中國"Provincesnew List<Province>(){ new Province(){ Name="四川",Citys=new List<City>(){new  City(){Name="綿陽市"  
  10.            }}}}}};  
  11.            this.textBox1.SetBinding(TextBox.TextProperty, new Binding("/Name") { Source=infos});  
  12.            this.textBox2.SetBinding(TextBox.TextProperty, new Binding("/Provinces/Name") { Source = infos });  
  13.            this.textBox3.SetBinding(TextBox.TextProperty, new Binding("/Provinces/Citys/Name") { Source = infos });  
  14.        }  
  15.    }  
  16.   
  17.     class City  
  18.    {  
  19.        public string Name { set; get; }  
  20.    }  
  21.   
  22.    class Province  
  23.    {  
  24.        public string Name { set; get; }  
  25.        public List<City> Citys { set; get; }  
  26.    }  
  27.   
  28.    class Contry  
  29.    {  
  30.        public string Name { set; get; }  
  31.        public List<Province> Provinces { get; set; }  
  32.    }  


運行效果如圖:

 


1.3.4       "沒有Path"的Binding

有的時候我們會在代碼中我們看大Path是一個“.”或者干脆沒有Path的Binding,着實讓人摸不着頭腦。原來這是一種比較特殊的情況---Binding源本身就是一種數據且不需要Path來指明。典型的string,int等基本類型都是這樣,他們是實例本身就是數據,我們無法指定通過那個屬性來訪問這個數據,這是我們只需要將這個數據設置為.就可以了。在XAML中這個.可以忽略不寫,但是在C#中編程必須要帶上。下面請看下面這段代碼:

 

[html]  view plain copy print ?
 
  1. <Window x:Class="WpfApplication1.Window5"  
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
  4.         xmlns:String="clr-namespace:System;assembly=mscorlib"  
  5.         Title="Window5" Height="331" Width="538">  
  6.     <StackPanel Height="184" Name="stackPanel1" Width="288">  
  7.         <StackPanel.Resources>  
  8.             <String:String x:Key="myString">  
  9.                 菩提本無樹,何處染塵埃。  
  10.             </String:String>  
  11.               
  12.         </StackPanel.Resources>  
  13.         <TextBlock Height="23" Name="textBlock1" Text="{Binding Path=.,Source={StaticResource ResourceKey=myString}}" />  
  14.     </StackPanel>  
  15. </Window>  


上面的代碼可以簡寫成:

 

 

[html]  view plain copy print ?
 
  1. <TextBlock Height="23" Name="textBlock1" Text="{Binding .,Source={StaticResource ResourceKey=myString}}" />  

或者直接寫成:

 

 

[html]  view plain copy print ?
 
  1. <TextBlock Height="23" Name="textBlock1" Text="{Binding Source={StaticResource ResourceKey=myString}}" />  

 

注意:

最后這種簡寫很容易被誤解為沒有指定Path,其實只是省略掉了。與只等效的C#代碼如下:

 

[csharp]  view plain copy print ?
 
  1. string myString = "菩提本無樹,明鏡亦無台。本來無一物,何處染塵埃。";  
  2.            this.textBlock1.SetBinding(TextBlock.TextProperty, new Binding(".") { Source=myString});  


注意:

 

最后順便帶一句,PropertyPath除了用於Binding的Path屬性之外,在動畫編程的時候也會派上用場(Storyboard.TargetProperty)。在用於動畫編程的時候,PropertyPath還有另外一種語法,到時候我們細說。

1.3.5      把Binding指定為源(Source)的幾種方法

上一節我們學習了如何通過Binding的path屬性如何在一個對象上尋找數據。這一節我們將學習如何為Binding指定源(Source)。

Binding的源是數據的來源,所以,只要一個對象包含數據並且能夠通過屬性將數據暴露出來,它就能當作Binding的源來使用。包含數據的對象比比皆是,但必須為Binding的Source指定合適的對象Binding才能正常工作,常用的辦法有:

 

  • 把普通的CLR單個對象指定為Source:包括.NetFrameWork自帶類型的對象和用戶自定義類型的對象。如果類型實現了INotifyPropertyChanged接口,這可以通過在屬性的Set語句里激發PropertyChanged事件來通知Binding已經更新。
  • 把普通的CLR對象集合指定為Source:包括數組,List<T>,ObservableCollection<T>等集合類型。實際工作中,我們經常需要將一個集合類型作為ItemControl的派生類的數據來使用,一般把控件ItemSource屬性使用Binding關聯到一個集合對象上。
  • 把ADO.NET數據指定為Source:包括DataTable和DataView對象。
  • 使用XmlDataProvider把XML數據指定為Source:XML做為標准的數據傳輸和存儲格式,幾乎無處不在,我們可以用它表示單個對象或者集合對象;一些WPF控件是級聯的(如Treeview和Menu),我們可以把樹狀結構的XML數據作為源指定給與之關聯的Binding。
  • 把依賴對象(Dependency Object)指定為Source:依賴對象不僅可以做為Binding 的目標,還能作為Binding 的源。這樣就有可能形成Binding鏈。依賴對象中的依賴屬性可以做為Binding的Path。
  • 把容器的DataContext指定為Source(WPF 中Binding的默認行為):有時候我們會遇到這樣一種情況----我們明確知道將從那個屬性獲取數據,但具體使用哪個對象作為Binding的源還不確定。這時候我們只需要先建立一個Binding,只給它設置Path而不設置Source,讓這個Binding自己去尋找源,這時候,Binding會自動把控件的DataContext作為當作自己的Source(它會沿着控件樹一直向外找,直到找到帶有Path指定的對象為止)。
  • 通過ElementName指定Source:在C#代碼中可以直接把對象作為Source賦值給Binding,但是XAML無法訪問對象,只能使用Name屬性來找到對象。
  • 通過Binding的RelataveSource屬性相對的指定Source:當控件需要關注自己的、自己容器的或者自己內部某個屬性值就需要使用這種辦法。
  • 把ObjectDataProvider指定為Source:當數據源的數據不是通過屬性,而是通過方法暴露給外界的時候,我們可以使用這種對象來包裝數據源再把它們指定為Source。
  • 把使用LINQ檢索到的數據作為數據源。

 

下面我們使用實例來分別描述每種情況:

1.3.6       沒有Source的Binding----使用DataContext作為數據源

前面的例子都是把單個的CLR對象作為Binding 的源,方法有兩種:把對象賦值給Binding.Source屬性或者把對象的Name賦值給Binding.ElementName。DataContext被定義在FrameWorkElement類中,這個類是WPF控件的基類,這意味着所有的WPF控件包括布局控件都包含這個屬性。如前所述,WPF的UI布局是樹形結構,這個樹的每個節點都是控件,由此我們推出一個結論----在UI樹的每個節點都有DataContext屬性。這一點非常重要,因為當一個Binding只知道自己的Path而不知道自己的源的時候,它會沿着樹的一路向樹的根部找過去,每經過一個節點都要查看這個節點的DataContext屬性是否具有Path所指定的屬性。如果有,就把這個對象作為自己的Source;如果沒有,就繼續找下去;如果到樹的根部還沒有找到,那這個Binding就沒有Source,因而也不會得到數據,讓我們看看下面的例子:

先創建一個名為Student的類,它具有ID,Name,Age3個屬性:

 

[csharp]  view plain copy print ?
 
  1. public class Student  
  2.     {  
  3.         public int Id { getset; }  
  4.         public string Name { getset; }  
  5.         public int Age { getset; }  
  6.     }  


在后在XAML中建立UI界面:

 

 

[html]  view plain copy print ?
 
  1. <Window x:Class="WpfApplication1.Window6"  
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
  4.         xmlns:Stu="clr-namespace:WpfApplication1"  
  5.         Title="Window6" Height="345" Width="464">  
  6.     <StackPanel Background="AliceBlue">  
  7.         <StackPanel.DataContext>  
  8.             <Stu:Student Id="1" Name="Darren" Age="10"></Stu:Student>  
  9.         </StackPanel.DataContext>  
  10.         <Grid>  
  11.             <StackPanel Height="283" HorizontalAlignment="Left" Margin="12,12,0,0" Name="stackPanel1" VerticalAlignment="Top" Width="418">  
  12.                 <TextBox Height="23" Name="textBox1" Width="120" Margin="15" Text="{Binding Path=Id}"/>  
  13.                 <TextBox Height="23" Name="textBox2" Width="120" Margin="15" Text="{Binding Path=Name}"/>  
  14.                 <TextBox Height="23" Name="textBox3" Width="120" Margin="15" Text="{Binding Path=Age}"/>  
  15.             </StackPanel>  
  16.         </Grid>  
  17.     </StackPanel>  
  18.       
  19. </Window>  

這個UI可以用如下的柱狀圖來表示:

 



使用xmlns:Stu="clr-namespace:WpfApplication1",我們就可以在XAML中使用在C#中定義的類。使用了這幾行代碼:

 

[html]  view plain copy print ?
 
  1. <StackPanel.DataContext>  
  2.            <Stu:Student Id="1" Name="Darren" Age="10"></Stu:Student>  
  3.        </StackPanel.DataContext>  


就為外層StackPanel的DataContext進行了賦值----它是一個Student對象。3個TextBox通過Binding獲取值,但只為Binding指定了Path,沒有指定Source。簡寫成這樣也可以:

 

 

[html]  view plain copy print ?
 
  1. <TextBox Height="23" Name="textBox1" Width="120" Margin="15" Text="{Binding Id}"/>  
  2.                 <TextBox Height="23" Name="textBox2" Width="120" Margin="15" Text="{Binding Name}"/>  
  3.                 <TextBox Height="23" Name="textBox3" Width="120" Margin="15" Text="{Binding Age}"/>  


這樣3個TextBox就會沿着樹向上尋找可用的DataContext對象。運行效果如下圖:

 

前面在學習Binding路徑的時候,當Binding的Source本身就是數據、不需要使用屬性來暴露數據時,Binding的Path可以設置為".",亦可省略不寫。現在Source也可以省略不寫了,這樣,當某個DataContext為簡單類型對象的時候,我們完全可能看到一個既沒有Path,又沒有Source的Binding:

 

[html]  view plain copy print ?
 
  1. <Window x:Class="WpfApplication1.Window7"  
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
  4.         xmlns:Str="clr-namespace:System;assembly=mscorlib"  
  5.         Title="Window7" Height="300" Width="300">  
  6.     <Grid>  
  7.         <Grid.DataContext>  
  8.             <Str:String>Hello DataContext</Str:String>  
  9.         </Grid.DataContext>  
  10.         <StackPanel>  
  11.             <TextBlock Height="23" HorizontalAlignment="Left" Margin="15" Name="textBlock1" Text="{Binding}" VerticalAlignment="Top" />  
  12.             <TextBlock Height="23" HorizontalAlignment="Left" Margin="15" Name="textBlock2" Text="{Binding}" VerticalAlignment="Top" />  
  13.             <TextBlock Height="23" HorizontalAlignment="Left" Margin="15" Name="textBlock3" Text="{Binding}" VerticalAlignment="Top" />  
  14.         </StackPanel>  
  15.           
  16.     </Grid>  
  17. </Window>  


運行效果如下圖:

 


你可能回想,Binding怎么會自動向UI元素上一層查找DataContext並把它作為自己的Source呢?其實,“Binding沿着UI元素樹向上找”只是WPF給我們的一個錯覺,Binding並沒有那么智能。之所以會這樣是因為DataContext是一個“依賴屬性”,后面的章節我們會詳細描述,依賴屬性有一個很明顯的特點就是你沒有為某個控件的依賴屬性賦值的時候,控件會把自己容器的屬性值接過來當作自己的屬性值。實際上屬性值是沿着UI元素樹向下傳遞的。

在實際工作中,DataContext屬性值的運用非常的靈活。比如:

當UI上的多個控件都使用Binding關注同一個對象變化的時候,不妨使用DataContext。

當作為Source的對象不能被直接訪問的時候----比如B窗體內的控件想把A窗體里的控件當作自己的Binding源時,但是A窗體內的控件可訪問級別是private類型,這是就可以把這個控件或者控件值作為窗體A的DataContext(這個屬性是Public級別的)這樣就可以暴露數據了。

形象的說,這時候外層的數據就相當於一個數據的“至高點”,只要把元素放上去,別人就能夠看見。另外DataContext本身就是一個依賴屬性,我們可以使用Binding把它關聯到一個數據源上。

1.3.7     使用集合對象作為列表控件的ItemsSource

有了DataContext作為基礎,我們再來看看把集合類型對象作為Binding源的情況。

WPF中的列表式控件都派生自ItemControl類,自然也繼承了ItemSource這個屬性。ItemSource可以接收一個IEnumerable接口派生類的實例作為自己的值(所有可被迭代遍歷的集合都實現了這個接口,包括數組、List<T>等)。每個ItemControl都具有自己的條目容器Item Container,例如,ListBox的條目容器是ListBoxItem、Combox的條目容器是ComboxItem。ItemSource里面保存的是一條一條的數據,想要把數據顯示出來就要為數據穿上外衣,條目容器就起到了數據外衣的作用。這樣將數據外衣和它所對應的條目容器關聯起來呢?當然時依靠Binding!只要我們為一個ItemControl設置了ItemSource屬性值,ItemControl會自動迭代其中的數據元素,為每個數據元素准備一個條目容器,並使用Binding元素在條目容器和數據元素之間建立起關聯,讓我們來看一個例子:

UI代碼如下:

 

[html]  view plain copy print ?
 
  1. <Window x:Class="WpfApplication1.Window8"  
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
  4.         Title="Window8" Height="356" Width="471">  
  5.     <Grid>  
  6.         <StackPanel Height="295" HorizontalAlignment="Left" Margin="10,10,0,0" Name="stackPanel1" VerticalAlignment="Top" Width="427">  
  7.             <TextBlock Height="23" Name="textBlock1" Text="學員編號:" />  
  8.             <TextBox Height="23" Name="txtStudentId" Width="301" HorizontalAlignment="Left"/>  
  9.             <TextBlock Height="23" Name="textBlock2" Text="學員列表:" />  
  10.             <ListBox Height="208" Name="lbStudent" Width="305" HorizontalAlignment="Left"/>  
  11.         </StackPanel>  
  12.     </Grid>  
  13. </Window>  

 

窗體運行效果如下圖:


我們要實現的效果就是把List<Student>的集合作為ListBox的ItemSource,讓ListBox顯示學員的Name,並使用TextBox顯示當前選中學員的Id,為了實現這個功能,我們需要在窗體的構造函數中添加幾行代碼:

 

[csharp]  view plain copy print ?
 
  1. List<Student> infos = new List<Student>() {   
  2.             new Student(){ Id=1, Age=11, Name="Tom"},  
  3.             new Student(){ Id=2, Age=12, Name="Darren"},  
  4.             new Student(){ Id=3, Age=13, Name="Jacky"},  
  5.             new Student(){ Id=4, Age=14, Name="Andy"}  
  6.             };  
  7.             this.lbStudent.ItemsSource = infos;  
  8.             this.lbStudent.DisplayMemberPath = "Name";  
  9.   
  10.             this.txtStudentId.SetBinding(TextBox.TextProperty,new Binding("SelectedItem.Id"){ Source=lbStudent});  

運行結果如下圖:

 


你可能回想,這個例子中並沒有出現剛才我們說的Binding。實際上, this.lbStudent.DisplayMemberPath = "Name";這點代碼露出了一點蛛絲馬跡。注意到包含Path這個單詞了嗎?這說明它是一個路徑。當DisplayMemberPath 被賦值以后,ListBox在獲得ItemSource的時候就會創建一個等量的ListBoxItem並以DisplayMemberPath的值為Path創建Binding,Binding的目標是ListBoxItem的內容插件(實際上是一個TextBox,下面就會看見)。

如過在ItemControl類的代碼里刨根問底,你會發現Binding的過程是在DisplayMemberTemplateSelector類的SelectTemplate方法里完成的。這個方法的定義格式如下:

 

[csharp]  view plain copy print ?
 
  1. public override DataTemplate SelectTemplate(object item, DependencyObject container)  
  2.         {  
  3.             //邏輯代碼  
  4.         }  


這里我們倒不必關心它的實際內容,注意到它的返回值沒有,是一個DataTemplate類型的值。數據的外衣就是由DataTemplate穿上的!當我們沒有為ItemControl顯示的指定Template的時候SelectTemplate會默認的為我們創建一個最簡單的DataTemplate----就好像給數據穿上了一個簡單的衣服一樣。至於什么是Template以及這個方法的完整代碼將會放到與Template相關的文章中仔細去討論。這里我們只關心SelectTemplate內部創建Binding 的幾行關鍵代碼:

 

 

[csharp]  view plain copy print ?
 
  1. FrameworkElementFactory text = ContentPresenter.CreateTextBlockFactory();  
  2.            Binding bind = new Binding();  
  3.            bind.Path = new PropertyPath(_displayMemberPath);  
  4.            bind.StringFormat = _stringFormat;  
  5.            text.SetBinding(TextBlock.TextProperty,bind);  


注意:

 

這里對新創建的Binding設定了Path而沒有指定Source,緊接這就把它關聯到了TextBlock上。顯然,要想得到Source,這個Binding需要向樹根方向尋找包含_displayMemberPath指定屬性的DataContext。

最后我們再看一個顯示為數據設置DataTemplate的例子,先把C#代碼中的this.lbStudent.DisplayMemberPath = "Name";一句刪除,再在XAML代碼中添加幾行代碼,ListBox的ItemTemplate屬性(繼承自ItemControl類)的類型是DataTemplate,下面我們就為Student類型實例量身定做“衣服”。

 

[html]  view plain copy print ?
 
  1. <Window x:Class="WpfApplication1.Window8"  
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
  4.         Title="Window8" Height="356" Width="471">  
  5.     <Grid>  
  6.         <StackPanel Height="295" HorizontalAlignment="Left" Margin="10,10,0,0" Name="stackPanel1" VerticalAlignment="Top" Width="427">  
  7.             <TextBlock Height="23" Name="textBlock1" Text="學員編號:" />  
  8.             <TextBox Height="23" Name="txtStudentId" Width="301" HorizontalAlignment="Left"/>  
  9.             <TextBlock Height="23" Name="textBlock2" Text="學員列表:" />  
  10.             <ListBox Height="208" Name="lbStudent" Width="305" HorizontalAlignment="Left">  
  11.                 <ListBox.ItemTemplate>  
  12.                     <DataTemplate>  
  13.                         <StackPanel Name="stackPanel2" Orientation="Horizontal">  
  14.                             <TextBlock  Text="{Binding Id}" Margin="5" Background="Beige"/>  
  15.                             <TextBlock Text="{Binding Name}" Margin="5"/>  
  16.                             <TextBlock  Text="{Binding Age}" Margin="5"/>  
  17.                         </StackPanel>  
  18.                     </DataTemplate>  
  19.                 </ListBox.ItemTemplate>  
  20.             </ListBox>  
  21.               
  22.         </StackPanel>  
  23.     </Grid>  
  24. </Window>  


運行效果圖:

 


最后特別提醒大家一點:

在使用集合類型的數據作為列表控件的ItemSource時一般會考慮使用ObservableCollection<T>替換List<T>,因為ObservableCollection<T>類實現了INotifyChange和INotifyPropertyChanged接口,能把集合的變化立刻通知顯示到它的列表控件上,改變會立刻顯示出來。

 

1.3.8     使用ADO.NET對象作為Binding的源

在.Net開發工作中,我們用ADO.NET類對數據庫進行操作。常見的工作就是從數據庫中讀取數據到DataTable中,在把DataTable里的數據綁定的UI的控件里面(如成績單、博客列表)。盡管在流行的軟件架構中並不把DataTable中的數據直接顯示在UI列表控件里面而是先通過LINQ等手段把DataTable里的數據轉換成恰當的用戶自定義類型集合,但WPF也支持DataTable也支持在列表控件和DataTable里直接建立Binding。

現在我們做一個實例來講解如何在DataTable和UI建立Binding:

多數情況下我們會用ListView控件來顯示一個DataTable,XAML代碼如下:

 

[html]  view plain copy print ?
 
  1. <Window x:Class="WpfApplication1.Window9"  
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
  4.         Title="Window9" Height="345" Width="482">  
  5.     <StackPanel Height="279" Name="stackPanel1" Width="431">  
  6.         <ListView Height="247" Name="listView1" Width="376">  
  7.             <ListView.View>  
  8.                 <GridView>  
  9.                      
  10.                         <GridViewColumn Header="ID" DisplayMemberBinding="{Binding Id}" Width="60">  
  11.                               
  12.                         </GridViewColumn>  
  13.                         <GridViewColumn Header="Name" DisplayMemberBinding="{Binding Name}" Width="60">  
  14.   
  15.                         </GridViewColumn>  
  16.                         <GridViewColumn Header="Age" DisplayMemberBinding="{Binding Age}" Width="60">  
  17.   
  18.                         </GridViewColumn>  
  19.                         <GridViewColumn Header="Sex" DisplayMemberBinding="{Binding Sex}" Width="60">  
  20.   
  21.                         </GridViewColumn>  
  22.                       
  23.                 </GridView>  
  24.             </ListView.View>  
  25.         </ListView>  
  26.     </StackPanel>  
  27. </Window>  


這里我們有幾點需要注意的地方:

 

從字面上來理解,ListView和GridView應該屬於同一級別的控件,實際上遠非這樣!ListView是ListBox的派生類而GridView是ViewBase的派生類,ListView中的View是一個ViewBase對象,所以,GridView可以做為ListView的View來使用而不能當作獨立的控件來使用。這里使用理念是組合模式,即ListView有一個View,但是至於是GridView還是其它類型的View,由程序員自己選擇----目前只有一個GridView可用,估計微軟在這里還會有擴展。其次,GridView的內容屬性是Columns,這個屬性是GridViewColumnCollection類型對象。因為XAML支持對內容屬性的簡寫,可以省略<GridView.Columns>這層標簽,直接在GridView的內容部分定義3個<GridViewColumn>對象,GridViewColumn中最重要的一個屬性是DisplayBinding(類型是BindingBase),使用這個屬性可以指定這一列使用什么樣的Binding去關聯數據------這與ListBox有點不同,ListBox使用的是DisplayMemberPath屬性(類型是string)。如果想用更復雜的結構來表示這一標題或數據,則可為GridViewColumn設置HeadTemplate和CellTemplate,它們的類型都是DataTemplate。

運行效果如下:


后台代碼如下:

 

[csharp]  view plain copy print ?
 
  1. public Window9()  
  2.        {  
  3.            InitializeComponent();  
  4.            DataTable dtInfo = CreateDataTable();  
  5.            for (int i = 0; i < 10; i++)  
  6.            {  
  7.                DataRow dr = dtInfo.NewRow();  
  8.                dr[0] = i;  
  9.                dr[1] = "猴王" + i;  
  10.                dr[2] = i + 10;  
  11.                dr[3] = "男";  
  12.                dtInfo.Rows.Add(dr);  
  13.            }  
  14.    
  15.            this.listView1.ItemsSource = dtInfo.DefaultView;  
  16.        }  
  17.   
  18.   
  19.        private DataTable CreateDataTable()  
  20.        {  
  21.            DataTable dt = new DataTable("newtable");  
  22.              
  23.            DataColumn[] columns = new DataColumn[]{new DataColumn("Id"),new DataColumn("Name"),new DataColumn("Age"),new DataColumn("Sex")};  
  24.            dt.Columns.AddRange(columns);  
  25.            return dt;  
  26.        }  


通過上面的例子我們已經知道DataTable的DefaultView可以做為ItemSource來使用,拿DataTable直接用可以嗎,讓我們試試看:

 

 

[csharp]  view plain copy print ?
 
  1. InitializeComponent();  
  2.            DataTable dtInfo = CreateDataTable();  
  3.            for (int i = 0; i < 10; i++)  
  4.            {  
  5.                DataRow dr = dtInfo.NewRow();  
  6.                dr[0] = i;  
  7.                dr[1] = "猴王" + i;  
  8.                dr[2] = i + 10;  
  9.                dr[3] = "男";  
  10.                dtInfo.Rows.Add(dr);  
  11.            }  
  12.    
  13.            this.listView1.ItemsSource = dtInfo;  


編譯的時候系統會報錯提示:

 

錯誤 1無法將類型“System.Data.DataTable”隱式轉換為“System.Collections.IEnumerable”。存在一個顯式轉換(是否缺少強制轉換?)d:\我的文檔\visual studio 2010\Projects\WpfApplication2\WpfApplication1\Window9.xaml.cs3642WpfApplication1

顯然DataTable不能直接拿來為ItemSource賦值。不過,當你把DataTable對象放在一個對象的Context屬性的時候,並把一個ItemSource與一個既沒有指定Source又沒有指定Path的Binding綁定起來的時候,Binding卻能自動找到它的DefaultView並當作自己的Source來使用:

 

[csharp]  view plain copy print ?
 
  1. DataTable dtInfo = CreateDataTable();  
  2.             for (int i = 0; i < 10; i++)  
  3.             {  
  4.                 DataRow dr = dtInfo.NewRow();  
  5.                 dr[0] = i;  
  6.                 dr[1] = "猴王" + i;  
  7.                 dr[2] = i + 10;  
  8.                 dr[3] = "男";  
  9.                 dtInfo.Rows.Add(dr);  
  10.             }  
  11.   
  12.             this.listView1.DataContext = dtInfo;  
  13.             this.listView1.SetBinding(ListView.ItemsSourceProperty, new Binding());  


所以,如果你在代碼中發現把DataTable而不是DefaultView作為DataContext值,並且為ItemSource設置一個既無Path又沒有Source的Binding的時候,千萬別感覺到疑慮。

 

1.3.9        使用XML數據作為Binding的源

迄今為止,.NETFramWork提供了兩套處理XML數據的類庫:

符合DOM(Document Object Modle,文檔對象模型)標准類庫:包括XmlDocument、XmlElement、XmlNode、XmlAttribute等類。這套類庫的特點是中規中矩,功能強大,但也背負了太多了XML的傳統和復雜。

以LINQ(Language-Intergrated Query,語言集成查詢)為基礎的類庫:包括XDocument,XElement,XNode,XAttribute等類。這套類庫的特點是可以通過LINQ進行查詢和操作,方便快捷。

下面我們主要講解一下標准類型的類庫,基於LINQ的查詢我們放在下一節討論。

現在程序設計只要涉及到遠程傳輸就離不開XML,因為大多數數據傳輸是基於SOAP(Simple Object Access Protocol,簡單對象訪問協議)相關文檔協議,而SOAP又是將對象序列化為XML文本進行傳輸。XML文本是樹形結構的,所以XML可以方便的用於表示線性集合(如Array、List等)和樹形結構數據。

注意:

在使用XML數據作為Binding的Source的時候我們將使用XPath屬性而不是Path屬性來指定數據的來源。

我們先看一個線性集合的例子。下面的XML文本是一組文本信息,我們要把它顯示在一個ListView控件里:

 

[html]  view plain copy print ?
 
  1. <?xml version="1.0" encoding="utf-8" ?>  
  2. <StudentList>  
  3.   <Student id="1">  
  4.     <Name>Andy</Name>  
  5.   </Student>  
  6.   <Student id="2">  
  7.     <Name>Jacky</Name>  
  8.   </Student>  
  9.   <Student id="3">  
  10.     <Name>Darren</Name>  
  11.   </Student>  
  12.   <Student id="4">  
  13.     <Name>DK</Name>  
  14.   </Student>  
  15.   <Student id="1">  
  16.     <Name>Jim</Name>  
  17.   </Student>  
  18. </StudentList>  

對應的XAML如下:

 

 

[csharp]  view plain copy print ?
 
  1. <Window x:Class="WpfApplication1.Window10"  
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
  4.         Title="Window10" Height="397" Width="485">  
  5.     <StackPanel Width="409" Height="331" Background="LightBlue">  
  6.         <ListView Height="302" Name="listView1" Width="396">  
  7.             <ListView.View>  
  8.                 <GridView>  
  9.                     <GridViewColumn Header="ID" DisplayMemberBinding="{Binding XPath=@id}" Width="80">  
  10.                           
  11.                     </GridViewColumn>  
  12.                     <GridViewColumn Header="Name" DisplayMemberBinding="{Binding XPath=Name}" Width="150">  
  13.   
  14.                     </GridViewColumn>  
  15.                 </GridView>  
  16.             </ListView.View>  
  17.         </ListView>  
  18.     </StackPanel>  
  19. </Window>  

C#代碼如下:

 

 

[csharp]  view plain copy print ?
 
  1. private void BindingInfo()  
  2. {  
  3.     XmlDocument doc = new XmlDocument();  
  4.     doc.Load(@"d:\我的文檔\visual studio 2010\Projects\WpfApplication2\WpfApplication1\StudentData.xml");  
  5.   
  6.     XmlDataProvider dp = new XmlDataProvider();  
  7.     dp.Document = doc;  
  8.   
  9.     dp.XPath = @"StudentList/Student";  
  10.     this.listView1.DataContext = dp;  
  11.     this.listView1.SetBinding(ListView.ItemsSourceProperty, new Binding());  
  12. }  


程序運行效果如下:

 



XMLDataProvider還有一個名為Source的屬性,可以直接用它指定XML文檔所在位置(無論是XML文檔是存儲在本地硬盤還是網絡位置),所以,后台代碼也可以寫成如下:

 

[csharp]  view plain copy print ?
 
  1. private void BindingInfo()  
  2.         {  
  3.             //XmlDocument doc = new XmlDocument();  
  4.             //doc.Load(@"d:\我的文檔\visual studio 2010\Projects\WpfApplication2\WpfApplication1\StudentData.xml");  
  5.   
  6.             XmlDataProvider dp = new XmlDataProvider();  
  7.             dp.Source = new Uri(@"d:\我的文檔\visual studio 2010\Projects\WpfApplication2\WpfApplication1\StudentData.xml");  
  8.            // dp.Document = doc;  
  9.   
  10.             dp.XPath = @"StudentList/Student";  
  11.             this.listView1.DataContext = dp;  
  12.             this.listView1.SetBinding(ListView.ItemsSourceProperty, new Binding());  
  13.         }  


XAML最關鍵的兩句:DisplayMemberBinding="{Binding XPath=@id}"和DisplayMemberBinding="{Binding XPath=Name}",他們分別為GridView兩列指定了要關注的XML路徑----很明顯,使用@符號加字符串表示的是XML元素的Attribute,不加@符號表示的是子級元素。

 

XML語言可以方便的表示樹形數據結構,下面的例子是使用TreeView控件來顯示擁有若干層目錄的文件系統,而且,這次把XML數據和XMLDataProvider對象直接寫在XAML里面,代碼中用到了HierarchicalDataTemplate類,這個類具有ItemsSource屬性,可見由這種Template展示的數據是可以有子級集合的。代碼如下:

 

[html]  view plain copy print ?
 
  1. <Window x:Class="WpfApplication1.Window11"  
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
  4.         Title="Window11" Height="349" Width="545">  
  5.     <Window.Resources>  
  6.         <XmlDataProvider x:Key="xdp" XPath="FileSystem/Folder">  
  7.             <x:XData>  
  8.                 <FileSystem xmlns="">  
  9.                     <Folder Name="Books">  
  10.                         <Folder Name="Programming">  
  11.                             <Folder Name="Windows">  
  12.                                 <Folder Name="WPF">  
  13.                                    
  14.                                 </Folder>  
  15.                                 <Folder Name="Winform">  
  16.   
  17.                                 </Folder>  
  18.                                 <Folder Name="ASP.NET">  
  19.   
  20.                                 </Folder>  
  21.                             </Folder>  
  22.                         </Folder>  
  23.                     </Folder>  
  24.                     <Folder Name="Tools">  
  25.                         <Folder Name="Development"/>  
  26.                         <Folder Name="Designment"/>  
  27.                         <Folder Name="Players"/>  
  28.                     </Folder>  
  29.                 </FileSystem>  
  30.             </x:XData>  
  31.         </XmlDataProvider>  
  32.     </Window.Resources>  
  33.     <Grid>  
  34.         <TreeView Height="283" HorizontalAlignment="Left"  Name="treeView1" VerticalAlignment="Top" Width="511" ItemsSource="{Binding Source={StaticResource ResourceKey=xdp}}">  
  35.             <TreeView.ItemTemplate>  
  36.                 <HierarchicalDataTemplate ItemsSource="{Binding XPath=Folder}">  
  37.                     <TextBlock Height="23" HorizontalAlignment="Left"  Name="textBlock1" Text="{Binding XPath=@Name}" VerticalAlignment="Top" />  
  38.                 </HierarchicalDataTemplate>  
  39.             </TreeView.ItemTemplate>  
  40.         </TreeView>  
  41.           
  42.     </Grid>  
  43. </Window>  


注意:

 

將XmlDataProvider直接寫在XAML代碼里面,那么他的數據需要放在<x:XData>標簽中。

由於本例子設計到了StaticResource和HierarchicalDataTemplate,都是后面的內容,相對比較難懂,等學習完后面的Resource和Template章節之后再回來便會了然於胸。

程序運行效果如下圖:


1.3.10      使用LINQ檢索結果做為Binding 的源

至3.0版本開始,.NET Framework開始支持LINQ(Language-Intergrated Query   語言集成查詢),使用LINQ,我們可以方便的操作集合對象、DataTable對象和XML對象不必動輒不動把好幾層foreach循環嵌套在一起卻只是為了完成一個很簡單的任務。

LINQ查詢的結果是一個IEnumerable<T>類型對象,而IEnumerable<T>又派生自IEnumerable,所以它可以作為列表控件的ItemsSource來使用。

先創建一個名為Student的類:

 

[csharp]  view plain copy print ?
 
  1. public class Student  
  2.   {  
  3.       public int Id { getset; }  
  4.       public string Name { getset; }  
  5.       public int Age { getset; }  
  6.   }  

XAML代碼如下:

 

 

[html]  view plain copy print ?
 
  1. <Window x:Class="WpfApplication1.Window12"  
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
  4.         Title="Window12" Height="372" Width="538">  
  5.     <Grid>  
  6.         <ListView Height="311" HorizontalAlignment="Left" Margin="10,10,0,0" Name="listView1" VerticalAlignment="Top" Width="494">  
  7.             <ListView.View>  
  8.                 <GridView>  
  9.                     <GridViewColumn Header="ID" DisplayMemberBinding="{Binding Id}" Width="100"/>  
  10.                     <GridViewColumn Header="Name" DisplayMemberBinding="{Binding Name}" Width="100"/>  
  11.                     <GridViewColumn Header="Age" DisplayMemberBinding="{Binding Age}" Width="100"/>  
  12.                 </GridView>  
  13.             </ListView.View>  
  14.         </ListView>  
  15.     </Grid>  
  16. </Window>  

 

 

后台代碼如下:

[csharp]  view plain copy print ?
 
  1. private void BindingData()  
  2.         {  
  3.             List<Student> infos = new List<Student>()  
  4.             {  
  5.                 new Student(){Id=1, Age=29, Name="Tim"},  
  6.                  new Student(){Id=1, Age=28, Name="Tom"},  
  7.                   new Student(){Id=1, Age=27, Name="Kyle"},  
  8.                    new Student(){Id=1, Age=26, Name="Tony"},  
  9.                     new Student(){Id=1, Age=25, Name="Vina"},  
  10.                      new Student(){Id=1, Age=24, Name="Mike"}  
  11.             };  
  12.             this.listView1.ItemsSource = from stu in infos where stu.Name.StartsWith("T") select stu;  
  13.         }  

如果數據存放在一個DataTable對象里面,則后台代碼如下:

 

[csharp]  view plain copy print ?
 
  1. private void BindingDataByDataTable()  
  2.        {  
  3.            DataTable dtInfo = CreateDataTable();  
  4.            this.listView1.ItemsSource = from row in dtInfo.Rows.Cast<DataRow>()  
  5.                                         where Convert.ToString(row["Name"]).StartsWith("T")  
  6.                                         select new Student()  
  7.                                         {  
  8.                                             Id = Convert.ToInt32(row["Id"]), Name=Convert.ToString(row["Name"]),Age=Convert.ToInt32(row["Age"])  
  9.                                         };  
  10.              
  11.        }  

如果數據存儲在XML里面,存儲格式如下:

 

 

[html]  view plain copy print ?
 
  1. <?xml version="1.0" encoding="utf-8" ?>  
  2. <StudentList>  
  3.   <Class>  
  4.     <Student Id="0" Age="29" Name="Tim" />  
  5.     <Student Id="0" Age="28" Name="Tom" />  
  6.     <Student Id="0" Age="27" Name="Mess" />  
  7.   </Class>  
  8.   <Class>  
  9.     <Student Id="0" Age="26" Name="Tony" />  
  10.     <Student Id="0" Age="25" Name="Vina" />  
  11.     <Student Id="0" Age="24" Name="Emily" />  
  12.   </Class>  
  13. </StudentList>  


則代碼是這樣(注意:xd.Descendants("Student")這個方法,它可以跨XML的層級):

 

 

[csharp]  view plain copy print ?
 
  1. private void BindingDataByXml()  
  2.         {  
  3.             XDocument xd = XDocument.Load(@"d:\我的文檔\visual studio 2010\Projects\WpfApplication2\WpfApplication1\testDate.xml");  
  4.   
  5.             this.listView1.ItemsSource = from element in xd.Descendants("Student")  
  6.                                          where element.Attribute("Name").Value.StartsWith("T")  
  7.                                          select new Student()  
  8.                                              {  
  9.                                                  Name = element.Attribute("Name").Value,  
  10.                                                  Id = Convert.ToInt32(element.Attribute("Id").Value),  
  11.                                                  Age = Convert.ToInt32(element.Attribute("Age").Value)  
  12.                                              };  
  13.         }  

 

 

程序運行效果如下圖:



1.3.11    使用ObjectDataProvider作為binding的Source

理想情況下,上游程序員將類設計好、使用屬性把數據暴露出來,下游程序員將這些類作為Binding的Source、把屬性作為Binding的Path來消費這些類。但很難保證一個類的屬性都用屬性暴露出來,比如我們需要的數據可能是方法的返回值。而重新設計底層類的風險和成本會比較高,況且黑盒引用類庫的情況下我們不可能更改已經編譯好的類,這時候需要使用ObjectDataProvider來包裝做為Binding源的數據對象了。

ObjcetDataProvider 顧名思義就是把對對象作為數據源提供給Binding。前面還提到過XmlDataProvider,這兩個類的父類都是DataSourceProvider抽象類。

現在有一個名為Calculator的類,它具有加、減、乘、除的方法:

 

[csharp]  view plain copy print ?
 
  1. public class Caculate  
  2. {  
  3.     public string Add(string arg1,string arg2)  
  4.     {  
  5.         double x = 0;  
  6.         double y = 0;  
  7.         double z = 0;  
  8.         if(double.TryParse(arg1,out x)&&double.TryParse(arg2,out y))  
  9.         {  
  10.             z = x + y;  
  11.             return z.ToString();  
  12.         }  
  13.         return "Iput Error";  
  14.     }  
  15.   
  16.     //其它方法省略  
  17. }  


我們先寫一個非常簡單的小例子來了解下ObjectDataProvider類。隨便新建一個WPF窗體,窗體內拖放一個控件,控件的Click事件如下:

 

 

[csharp]  view plain copy print ?
 
  1. private void button1_Click(object sender, RoutedEventArgs e)  
  2.      {  
  3.          ObjectDataProvider odp = new ObjectDataProvider();  
  4.          odp.ObjectInstance = new Caculate();  
  5.          odp.MethodName="Add";  
  6.          odp.MethodParameters.Add("100");  
  7.          odp.MethodParameters.Add("200");  
  8.          MessageBox.Show(odp.Data.ToString());  
  9.   
  10.      }  


運行程序,單擊button我們會看到如下界面:

 


通過這個程序我們可以了解到ObjectDataProvider對象和它被包裝的對象關系如下圖:


 

了解了ObjectDataProvider的使用方法,我們看看如何把它當作Binding的Source來使用。程序的XAML代碼和截圖如下:

 

[html]  view plain copy print ?
 
  1. <Window x:Class="WpfApplication1.Window14"  
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
  4.         Title="Window14" Height="202" Width="345">  
  5.     <StackPanel Background="LightBlue">  
  6.         <TextBox Height="23" Name="textBox1" Width="200" HorizontalAlignment="Left" Margin="15"/>  
  7.         <TextBox Height="23" Name="textBox2" Width="200" HorizontalAlignment="Left" Margin="15"/>  
  8.         <TextBox Height="23" Name="textBox3" Width="200" HorizontalAlignment="Left" Margin="15"/>  
  9.     </StackPanel>  
  10. </Window>  


 

這個程序實現的功能是,我在前兩個TextBox里面輸入值的時候,第三個TextBox會顯示前兩個文本框里面相加之和。把代碼寫在一個名為SetBinding的方法里面,然后在窗體的構造器里面調用這個方法:

 

[csharp]  view plain copy print ?
 
  1. private void SetBinding()  
  2.        {  
  3.            ObjectDataProvider objpro = new ObjectDataProvider();  
  4.            objpro.ObjectInstance = new Caculate();  
  5.            objpro.MethodName = "Add";  
  6.            objpro.MethodParameters.Add("0");  
  7.            objpro.MethodParameters.Add("0");  
  8.            Binding bindingToArg1 = new Binding("MethodParameters[0]") { Source=objpro,BindsDirectlyToSource=true, UpdateSourceTrigger= UpdateSourceTrigger.PropertyChanged};  
  9.            Binding bindingToArg2 = new Binding("MethodParameters[1]") { Source=objpro,BindsDirectlyToSource=true,UpdateSourceTrigger=UpdateSourceTrigger.PropertyChanged};  
  10.            Binding bindToResult = new Binding(".") { Source=objpro};  
  11.            this.textBox1.SetBinding(TextBox.TextProperty, bindingToArg1);  
  12.            this.textBox2.SetBinding(TextBox.TextProperty, bindingToArg2);  
  13.            this.textBox3.SetBinding(TextBox.TextProperty,bindToResult);  
  14.        }  


讓我們先來分析一下上面兩段代碼,前面說過,ObjectDataProvider類的作用是包裝一個以方法暴露數據的對象,這里我們先創建了一個ObjectDataProvider的對象,然后用一個Caculate對象為其ObjectInstance對象賦值---這就把一個Caculate對象包裝在了ObjectDataProvider里面。還有另外一個辦法來創建被包裝的對象,那就是告訴包裝對象被包裝對象的類型和希望調用的構造器,讓ObjectDataProvider自己來創建對象,代碼大概是這樣:

 

 

[csharp]  view plain copy print ?
 
  1. //---  
  2.            objpro.ObjectInstance = typeof(Caculate);  
  3.            objpro.ConstructorParameters.Add(arg1);  
  4.            objpro.ConstructorParameters.Add(arg2);  
  5.            //----  


因為在XAML中創建對象比較麻煩,可讀性差,所以我們一般會在XAML代碼中使用這種指定類型和構造器的辦法。

 

接着,我們使用MethodName屬性指定要調用的Caculator對象中名為Add的方法---問題又來了,如果Caculator有多個構造器參數的方法Add應該如何區分?我們知道,重載方法的區別在於參數列表,緊接着兩句就是向MethodParameter屬性里面加入兩個string類型的參數,這就相當於告訴ObjectDataProvider對象去調用Caculator對象中具有兩個string類型參數的Add方法,換句話說,MethodParameter對於參數的感應是非常敏感的。

准備好數據源之后,我們准備創建Binding。前面我們已經講過使用索引器作為Binding的Path,第一個Binding它的Source是一個ObjectDataProvider對象,Path是ObjectDataProvider中MethodParameters所引用的第一個元素。BindsDirectlyToSource這句話是告訴Binding只是將UI上的值傳遞給源而不是被ObjectDataProvider包裝的Caculator,同時UpdateSourceTrigger設置為UI只要一有變化就更新Source。第二個Binding只是對第一個的翻版,只是把Path屬性指向了第二個元素。第三個binding仍然使用ObjectDataProvider作為Source,但使用“.”作為Path----前面講過,當數據源本身就是數據的時候就用“.”來做為Path,在XAML中"."可以不寫。

注意:

在ObjectDataProvider對象作為Binding的Source的時候,這個對象本身就代表了數據,所以這里的Path使用的“.”,而不是Data屬性。

最后幾行就是將Binding對象關聯到3個TextBox對象上。程序運行效果如下:

一般情況下數據從那里來,哪里就是Binding的Source,數據到哪里去,哪里就是Binding 的Target。按這個理論,前兩個TextBox應該是ObjcetDataProvider的源,而ObjcetDataProvider對象又是最后一個TextBox的源。但實際上,三個TextBox都以ObjcetDataProvider作為數據源,只是前兩個在數據流向上做了限制,這樣做的原因不外乎有兩個:

1、ObjcetDataProvider的MethodParameter不是依賴屬性,不能作為Binding的目標。

2、數據驅動UI理念要求我們盡可能的使用數據對象作為Binding的Source而把UI當做Binding的Target。

1.3.12    使用Binding的RelativeSource

當一個Binding有明確的來源的時候,我們可以通過Source或者ElementName賦值的辦法讓Binding與之關聯。有些時候我們不能確定作為Source對象叫什么名字,但是我們知道它與做為Binding目標對象在UI上的相對關系,比如控件自己關聯自己的某個數據,關聯自己某級容器的數據,這時候就需要用到Binding的RelativeSource屬性。

RelativeSource屬性的類型是RelativeSource類,通過這個類的幾個靜態或者非靜態的屬性我們可以控制它搜索相對數據源的方式。請看下面這段代碼:

 

[html]  view plain copy print ?
 
  1. <Window x:Class="WpfApplication1.Window15"  
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
  4.         Title="Window15" Height="375" Width="516">  
  5.     <Grid Background="Red" Margin="10" x:Name="gd1">  
  6.         <DockPanel x:Name="dp1" Margin="10" Background="Orange">  
  7.             <Grid Background="Yellow" Margin="10" x:Name="gd2">  
  8.                 <DockPanel Name="dp2" Margin="10" Background="LawnGreen">  
  9.                     <TextBox  Name="textBox1"  Margin="10" FontSize="24"/>  
  10.                 </DockPanel>  
  11.             </Grid>  
  12.         </DockPanel>  
  13.     </Grid>  
  14. </Window>  

界面運行結果如下:

 

我們把TextBox的Text屬性關聯到外層容器的Name屬性上。在窗體的構造器里面添加如下幾行代碼:

 

[csharp]  view plain copy print ?
 
  1. RelativeSource rs = new RelativeSource(RelativeSourceMode.FindAncestor);  
  2.            rs.AncestorLevel = 1;  
  3.            rs.AncestorType = typeof(Grid);  
  4.            Binding bind = new Binding("Name") { RelativeSource = rs };  
  5.            this.textBox1.SetBinding(TextBox.TextProperty, bind);  

或在XAML代碼中插入等效代碼:

 

 

[html]  view plain copy print ?
 
  1. <TextBox  Name="textBox1"  Margin="10" FontSize="24" Text="{Binding Path=Name, RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type Grid},AncestorLevel=1}}"/>  

AncestorLevel屬性指定的是以Binding目標控件為起點的層級偏移量---gd2的偏移量是1,gd2的偏移量是2,依次類推。AncestorType屬性告訴Binding去找什么類型的對象作為自己的源,不是這個類型的對象會被跳過。上面這段代碼的意思是告訴Binding從自己的第一層依次向外找,找到第一個Grid類型對象后把它當作自己的源。運行效果如下圖:

 


如果把代碼改成如下這樣:

 

[csharp]  view plain copy print ?
 
  1. RelativeSource rs = new RelativeSource(RelativeSourceMode.FindAncestor);  
  2.            rs.AncestorLevel = 2;  
  3.            rs.AncestorType = typeof(DockPanel);  
  4.            Binding bind = new Binding("Name") { RelativeSource = rs };  
  5.            this.textBox1.SetBinding(TextBox.TextProperty, bind);  


或者把XAML代碼改成如下:

 

 

[html]  view plain copy print ?
 
  1. Text="{Binding Path=Name, RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type DockPanel},AncestorLevel=2}}"  

運行效果如下:

 

如果TextBox需要關聯自身的Name屬性,那么代碼應該這樣寫:

 

[csharp]  view plain copy print ?
 
  1. RelativeSource rs = new RelativeSource(RelativeSourceMode.Self);  
  2.             
  3.            Binding bind = new Binding("Name") { RelativeSource = rs };  
  4.            this.textBox1.SetBinding(TextBox.TextProperty, bind);  


對應的XAML代碼如下:

 

 

[html]  view plain copy print ?
 
  1. Text="{Binding Path=Name, RelativeSource={RelativeSource Mode=Self}}"  

運行效果如下圖:

 

RelativeSource類的Mode屬性是RelativeSourceMode枚舉,它的值有:PriviousData、TemplatedParent、Self和FindAncestor。RelativeSource還有3個靜態屬性:PriviousData、Self、TemplatedParent,它們的類型是RelativeSource類。實際上這3個靜態屬性就是創建一個RelativeSource的實例、把實例的Mode設置為相對應的值,然后返回這個實例。之所以准備這3個靜態屬性是為了在XAML代碼里面直接獲取RelativeSource實例。

在DataTemplate中經常用到這這3個靜態屬性,學習DataTemplate的時候請留意它們的使用方法。

1.4      binding對數據的轉換和校驗

前面我們已經知道Binding的作用就是架在Source和Target之間的橋梁,數據可以在這座橋梁的幫助下來流通。就像現實社會中橋梁需要設置安檢和關卡一樣,Binding這座橋上也可以設置關卡對數據進行驗證,不僅如此,如果Binding兩端需要不同的數據類型的時候我們還可以為數據設置轉換器。

Binding用於數據有效性校驗的關卡是他的ValidationRules屬性,用於數據類型轉換的關卡是它的Convert屬性。

1.4.1          Binding的數據校驗

Binding的ValidationRules屬性是Collection<ValidationRule>,從它的名稱和數據類型我們可以得知可以為每個Binding設置多個數據校驗條件,每一個條件是一個ValidationRule對象。ValidationRule是一個抽象類,在使用的時候我們需要創建它的派生類並實現它的Validate方法的返回值是ValidateionResult類型對象,如果通過驗證,就把ValidateionResult對象的IsValidate屬性設為true,反之,則需要將IsValidate設置為false並為其ErrorContent屬性設置一個合適的消息內容(一般是字符串)。

下面這個程序的UI繪制一個TextBox和一個Slider,然后在后台C#代碼中建立Binding把它們關聯起來---- 已Slide為源,TextBox為目標。Slider的取值范圍是0~100,也就是說我們需要驗證TextBox中輸入的值是不是在0~100之間。

程序的XAML部分如下:

 

[html]  view plain copy print ?
 
  1. <Window x:Class="WpfApplication1.Window16"  
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
  4.         Title="Window16" Height="300" Width="300">  
  5.     <StackPanel Background="AliceBlue" Margin="10">  
  6.         <TextBox Height="23" Name="textBox1" Width="200" Margin="20"/>  
  7.         <Slider Height="23" Name="slider1" Width="219" Maximum="100" />  
  8.     </StackPanel>  
  9. </Window>  

為了進行校驗,我們准備一個ValidationRule的派生類,內容如下:

 

 

[csharp]  view plain copy print ?
 
  1. public class RangeValidationRule : ValidationRule  
  2. {  
  3.   
  4.     public override ValidationResult Validate(object value, System.Globalization.CultureInfo cultureInfo)  
  5.     {  
  6.         double d = 0;  
  7.         if(double.TryParse(value.ToString(),out d))  
  8.         {  
  9.             if(d>=0&&d<=100)  
  10.             {  
  11.                 return new ValidationResult(true,null);  
  12.             }  
  13.         }  
  14.         return new ValidationResult(false,"ErrorContent");  
  15.     }  
  16. }  


然后在窗體里面建立Binding:

 

 

[csharp]  view plain copy print ?
 
  1. public Window16()  
  2.        {  
  3.            InitializeComponent();  
  4.            Binding bind =new Binding("Value") { UpdateSourceTrigger= UpdateSourceTrigger.PropertyChanged,Source=slider1, Mode= BindingMode.TwoWay};  
  5.            ValidationRule rule = new RangeValidationRule();  
  6.            rule.ValidatesOnTargetUpdated = true;  
  7.            bind.ValidationRules.Add(rule);  
  8.   
  9.            this.textBox1.SetBinding(TextBox.TextProperty, bind);  
  10.        }  

完成后運行程序,當輸入0~100之間的值的時候程序正常顯示,但是輸入區間之外的值的時候TextBox會顯示為紅色邊框,表示值是錯誤的,不能傳值給Source。效果如下圖:

 

先把Silider的取值范圍從0~100改為-100~200:

你也許回想,在驗證錯誤的時候,ValidationResult會攜帶一條錯誤信息,那么如何使用這條錯誤信息呢?想要用到這一點,需要用到后面會詳細講解到的知識-----路由事件(Routed Event)。

首先在創建Binding 的時候要把Binding的對象的NotifyOnValidationError屬性設置為true,這樣,當數據校驗失敗的時候Binding就像報警器一樣發出一個信號。這個信號會在已Binding對象的Target為起點的UI樹上進行傳播。信號沒到達一個節點,如果這個節點設置了對這種信號的偵聽器(事件處理器),那么這個偵聽器就會被觸發並處理這個信號,信號處理完畢后,還可以是否讓信號繼續沿着UI樹向上傳播---這就是路由事件。信號在UI樹上傳遞的過程稱為路由(Route)。

建立Binding的代碼如下:

 

[csharp]  view plain copy print ?
 
  1. public Window16()  
  2.        {  
  3.            InitializeComponent();  
  4.            Binding bind =new Binding("Value") { UpdateSourceTrigger= UpdateSourceTrigger.PropertyChanged,Source=slider1, Mode= BindingMode.TwoWay};  
  5.            ValidationRule rule = new RangeValidationRule();  
  6.            rule.ValidatesOnTargetUpdated = true;  
  7.            bind.ValidationRules.Add(rule);  
  8.            bind.NotifyOnValidationError = true;  
  9.            this.textBox1.SetBinding(TextBox.TextProperty, bind);  
  10.            this.textBox1.AddHandler(Validation.ErrorEvent, new RoutedEventHandler(ValidationError));  
  11.        }  


用於偵聽校驗錯誤事件的事件處理器如下:

 

 

[csharp]  view plain copy print ?
 
  1. private void ValidationError(object sender, RoutedEventArgs e)  
  2.         {  
  3.             if (Validation.GetErrors(textBox1).Count > 0)  
  4.             {  
  5.                 this.textBox1.ToolTip = Validation.GetErrors(textBox1)[0].ErrorContent.ToString();  
  6.             }  
  7.             else  
  8.             {  
  9.                 this.textBox1.ToolTip = "";  
  10.             }  
  11.         }  


程序如果校驗失敗,就會使用ToolTip提示用戶,如下圖:

 

1.4.2    Binding的數據轉換

前面的很多例子我們都在使用Binding將TextBox和Slider之間建立關聯----Slider控件作為Source(Path的Value屬性),TextBox作為Target(目標屬性為Text)。不知道大家有沒有注意到,Slider的Value屬性是Double類型值,而TextBox的Text屬性是string類型的值,在C#這種強類型語言中卻可以來往自如,是怎么回事呢?

原來Binding還有另外一種機制稱為數據轉換,當Source端指定的Path屬性值和Target端指定的目標屬性不一致的時候,我們可以添加數據轉換器(DataConvert)。上面我們提到的問題實際上就是double和stirng類型相互轉換的問題,因為處理起來比較簡單,所以WPF類庫就自己幫我們做了,但有些數據類型轉換就不是WPF能幫我們做的了,例如下面的這種情況:

 

  • Source里面的值是Y、N、X三個值(可能是Char類型,string類型或者自定義枚舉類型),UI上對應的是CheckBox控件,需要把這三個值映射為它的IsChecked屬性值(bool類型)。
  • 當TextBox里面必須輸入的有類容時候用於登錄的Button才會出現,這是string類型與Visibility枚舉類型或bool類型之間的轉換(Binding的Model將是oneway)。
  • Source里面的值有可能是Male或FeMale(string或枚舉),UI是用於顯示圖片的Image控件,這時候需要把Source里面值轉換為對應的頭像圖片URI(亦是oneway)。

 

當遇到這些情況,我們只能自己動手寫Converter,方法是創建一個類並讓這個類實現IValueConverter接口,IValueConverter定義如下:

 

[csharp]  view plain copy print ?
 
  1. public interface IValueConverter  
  2. {  
  3.     object Convert(object value, Type targetType, object parameters, CultureInfo culture);  
  4.     object ConvertBack(object value, Type targetType, object parameters, CultureInfo culture);  
  5. }  

當數據從Binding的Source流向Target的時候,Convert方法將被調用;反之ConvertBack將被調用。這兩個方法的參數列表一模一樣:第一個參數為Object。最大限度的保證了Convert的重要性。第二個參數用於確定返回參數的返回類型。第三個參數為了將額外的參數傳入方法,若需要傳遞多個信息,則需要將信息做為一個集合傳入即可。

 

Binding對象的Mode屬性將影響這兩個方法的調用;如果Mode為TwoWay或Default行為與TwoWay一致則兩個方法都有可能被調用。如果Mode是OneWay或者Default行為與OneWay一致則只有Convert方法會被調用。其它情況同理。

下面這個例子是一個Converter的綜合實例,程序的用途是向玩家顯示一些軍用飛機的狀態信息。

首先創建幾個自定義數據類型:

 

[csharp]  view plain copy print ?
 
  1. public enum Category  
  2.    {  
  3.        Bomber,  
  4.        Fighter  
  5.    }  
  6.   
  7.    public enum State  
  8.    {  
  9.        Available,  
  10.        Locked,  
  11.        Unknown  
  12.    }  
  13.   
  14.    public class Plane  
  15.    {  
  16.        public Category category { getset; }  
  17.        public State state { getset; }  
  18.        public string name { getset; }  
  19.    }  


在UI里,Category的狀態被映射為圖標,這兩個圖標已經被我放入項目中,如圖:

 

同時飛機的State屬性在UI里面被映射為CheckBox。因為存在以上兩種映射關系。我們需要提供兩個Converter:一個有Categroy類型單向轉換為string類型(XAML會把string解析為圖片資源),另一個是State和bool類型直接的雙向轉換。代碼如下:

 

[csharp]  view plain copy print ?
 
  1. public class CategoryToSourceConverter:IValueConverter  
  2.     {  
  3.   
  4.         public object Convert(object value, Type targetType, object parameters, System.Globalization.CultureInfo culture)  
  5.         {  
  6.             Category category = (Category)value;  
  7.             switch (category)  
  8.             {  
  9.                 case Category.Bomber:  
  10.                     return @"ICONS/Bomber.png";  
  11.                      
  12.                 case Category.Fighter:  
  13.                     return @"ICONS/Fighter.png";  
  14.                      
  15.                 default:  
  16.                     return null;  
  17.                       
  18.             }  
  19.         }  
  20.   
  21.         public object ConvertBack(object value, Type targetType, object parameters, System.Globalization.CultureInfo culture)  
  22.         {  
  23.             throw new NotImplementedException();  
  24.         }  
  25.     }  

 

[csharp]  view plain copy print ?
 
  1. public class StateToNullableBoolConverter:IValueConverter  
  2.     {  
  3.   
  4.         public object Convert(object value, Type targetType, object parameters, System.Globalization.CultureInfo culture)  
  5.         {  
  6.             State state = (State)value;  
  7.             switch (state)  
  8.             {  
  9.                 case State.Available:  
  10.                     return true;  
  11.                       
  12.                 case State.Locked:  
  13.                     return false;  
  14.                 case State.Unknown:  
  15.                       
  16.                 default:  
  17.                     return null;  
  18.             }  
  19.         }  
  20.   
  21.         public object ConvertBack(object value, Type targetType, object parameters, System.Globalization.CultureInfo culture)  
  22.         {  
  23.             bool? nb = (bool?)value;  
  24.             switch (nb)  
  25.             {  
  26.                 case true:  
  27.                     return State.Available;  
  28.                 case false:  
  29.                     return State.Locked;  
  30.                 case null:  
  31.                 default:  
  32.                     return State.Unknown;  
  33.                       
  34.             }  
  35.         }  
  36.     }  


下面我們來看看如何在XAML代碼里面來消費這些Converter:

 

 

[html]  view plain copy print ?
 
  1. <Window x:Class="WpfApplication1.Window17"  
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
  4.         xmlns:local="clr-namespace:WpfApplication1.BLL"  
  5.         Title="Window17" Height="327" Width="460">  
  6.     <Window.Resources>  
  7.         <local:CategoryToSourceConverter x:Key="cts" />  
  8.         <local:StateToNullableBoolConverter x:Key="snb" />  
  9.     </Window.Resources>  
  10.     <StackPanel Name="stackPanel1" Background="AliceBlue" Margin="10">  
  11.         <ListBox  Name="listBox1" Height="160" Margin="5">  
  12.             <ListBox.ItemTemplate>  
  13.                 <DataTemplate>  
  14.                     <StackPanel Orientation="Horizontal">  
  15.                         <Image Height="16" Name="image1" Stretch="Fill" Width="16" Source="{Binding Path=category,Converter={StaticResource cts}}"/>  
  16.                         <TextBlock Height="23" Name="textBlock1" Text="{Binding name}" Margin="8,0" Width="80"/>  
  17.                         <CheckBox  Height="16" Name="checkBox1" IsChecked="{Binding Path=state,Converter={StaticResource snb}}" IsThreeState="True"/>  
  18.                     </StackPanel>  
  19.                 </DataTemplate>  
  20.             </ListBox.ItemTemplate>  
  21.         </ListBox>  
  22.         <Button Content="Load" Height="23" Name="button1" Width="131" Margin="5" Click="button1_Click" />  
  23.         <Button Content="Save" Height="23" Name="button2" Width="131" Margin="5" Click="button2_Click" />  
  24.     </StackPanel>  
  25. </Window>  

Load按鈕的事件處理器負責把一組飛機的數據賦值給ListBox的ItemSource屬性,Save的Click事件負責把用戶修改過的數據寫入文件:

 

 

[csharp]  view plain copy print ?
 
  1. /// <summary>  
  2.         /// Load按鈕事件處理器  
  3.         /// </summary>  
  4.         /// <param name="sender"></param>  
  5.         /// <param name="e"></param>  
  6.         private void button1_Click(object sender, RoutedEventArgs e)  
  7.         {  
  8.             List<Plane> infos = new List<Plane>() {   
  9.             new Plane(){ category= Category.Bomber,name="B-1", state= State.Unknown},  
  10.             new Plane(){ category= Category.Bomber,name="B-2", state= State.Unknown},  
  11.             new Plane(){ category= Category.Fighter,name="F-22", state= State.Locked},  
  12.             new Plane(){ category= Category.Fighter,name="Su-47", state= State.Unknown},  
  13.             new Plane(){ category= Category.Bomber,name="B-52", state= State.Available},  
  14.             new Plane(){ category= Category.Fighter,name="J-10", state= State.Unknown},  
  15.             };  
  16.             this.listBox1.ItemsSource = infos;  
  17.         }  
  18.         /// <summary>  
  19.         /// Save按鈕事件處理器  
  20.         /// </summary>  
  21.         /// <param name="sender"></param>  
  22.         /// <param name="e"></param>  
  23.         private void button2_Click(object sender, RoutedEventArgs e)  
  24.         {  
  25.             StringBuilder sb = new StringBuilder();  
  26.             foreach (Plane item in listBox1.Items)  
  27.             {  
  28.                 sb.AppendLine(string.Format("Categroy={0},State={1},Name={2}",item.category,item.state,item.name));  
  29.             }  
  30.             File.WriteAllText(@"D:\PlaneList.text",sb.ToString());  
  31.         }  


運行程序,單擊CheckBox修改飛機的State,如圖:

 

單擊Save后打開D:\\PlaneList.text數據如下圖:

1.5   MultiBinding(多路Binding)

有時候UI需要顯示的數據來源不止一個數據來源決定,這個時候就需要用到MultiBinding,即多路綁定。MultiBinding與Binding一樣均以BindingBase為基類,也就是說,凡是能用Binding的場合都能使用MultiBinding。MutiBinding具有一個Bindings的屬性,其類型是Connection<BindingBase>,通過這個屬性,MultiBinding把一組Binding對象聚合起來,處在這個Binding結合中的對象可以擁有自己的數據校驗和轉換機制。它們匯集起來的數據將共同決定傳往MultiBinding目標的數據。如下圖:

考慮這樣一個需求,有一個用於新用戶注冊的UI(4個TextBox和一個Button),還有如下一些限定:

 

  • 第一,二個TextBox用於輸入用戶名,要求數據必須一致。
  • 第三,四個TextBox用於顯示輸入的郵箱,要求數據必須一致。
  • 當TextBox的內容全部符合要求的時候,Button可用。

 

此UI的XAML代碼如下:

 

[html]  view plain copy print ?
 
  1. <Window x:Class="WpfApplication1.Window18"  
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
  4.         Title="Window18" Height="300" Width="300">  
  5.     <StackPanel Name="stackPanel1"  Margin="10" Background="AliceBlue">  
  6.         <TextBox Height="23" Name="textBox1" Margin="5" />  
  7.         <TextBox Height="23" Name="textBox2" Margin="5" />  
  8.         <TextBox Height="23" Name="textBox3" Margin="5" />  
  9.         <TextBox Height="23" Name="textBox4" Margin="5" />  
  10.         <Button Content="Regist" Height="23" Name="btnSubmit" Width="75"  Margin="10"/>  
  11.     </StackPanel>  
  12. </Window>  


后台代碼如下:

 

 

[csharp]  view plain copy print ?
 
  1. public Window18()  
  2.        {  
  3.            InitializeComponent();  
  4.            SetBinding();  
  5.        }  
  6.   
  7.        private void SetBinding()  
  8.        {  
  9.            //准備基礎Binding  
  10.            Binding bind1 = new Binding("Text") { Source=textBox1};  
  11.            Binding bind2 = new Binding("Text") { Source = textBox2 };  
  12.            Binding bind3 = new Binding("Text") { Source = textBox3 };  
  13.            Binding bind4 = new Binding("Text") { Source = textBox4 };  
  14.   
  15.            //准備MultiBinding  
  16.            MultiBinding mb = new MultiBinding() { Mode= BindingMode.OneWay};  
  17.            mb.Bindings.Add(bind1);//注意,MultiBinding對子元素的順序是很敏感的。  
  18.            mb.Bindings.Add(bind2);  
  19.            mb.Bindings.Add(bind3);  
  20.            mb.Bindings.Add(bind4);  
  21.            mb.Converter = new MultiBindingConverter();  
  22.            ///將Binding和MultyBinding關聯  
  23.            this.btnSubmit.SetBinding(Button.IsVisibleProperty, mb);  
  24.        }  


注意:

 

 

  • MultiBinding對子元素的順序非常敏感,因為這個數據決定了匯集到Convert里數據的順序。
  • MultiBinding的Converter實現的是IMultiValueConverter。

 

本例的Converter代碼如下:

 

[csharp]  view plain copy print ?
 
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Text;  
  5. using System.Windows.Data;  
  6.   
  7. namespace WpfApplication1.BLL  
  8. {  
  9.     public class MultiBindingConverter:IMultiValueConverter  
  10.     {  
  11.         public object Convert(object[] values, Type targetType, object parameter, System.Globalization.CultureInfo culture)  
  12.         {  
  13.             if(!values.Cast<string>().Any(text=>string.IsNullOrEmpty(text))&&values[0].ToString()==values[1].ToString()&&values[3].ToString()==values[4].ToString())  
  14.             {  
  15.                 return true;  
  16.             }  
  17.             return false;  
  18.         }  
  19.         /// <summary>  
  20.         /// 該方法不會被調用  
  21.         /// </summary>  
  22.         /// <param name="value"></param>  
  23.         /// <param name="targetTypes"></param>  
  24.         /// <param name="parameter"></param>  
  25.         /// <param name="culture"></param>  
  26.         /// <returns></returns>  
  27.         public object[] ConvertBack(object value, Type[] targetTypes, object parameter, System.Globalization.CultureInfo culture)  
  28.         {  
  29.             throw new NotImplementedException();  
  30.         }  
  31.     }  
  32. }  

程序運行效果如圖:

 

    

小結:

WPF的核心理念是變傳統的UI驅動數據變成數據驅動UI,支撐這個理念的基礎就是本章講的Data Binding和與之相關的數據校驗和數據轉換。在使用Binding的時候,最重要的就是設置它的源和路徑。

 

 

Data Binding到此講解完畢。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM