11.1 數據綁定的基礎
數據綁定是一種XAML界面和后台數據通信的方式，因為界面和后台數據的通信的場景有多種，並且數據於數據之間也存在着不一樣的關聯關系，所以數據綁定的實現技巧和方式也是多種多樣的。下面我們全面地介紹數據綁定的實現原理和相關的語法基礎。
11.1.1 數據綁定的原理
數據綁定主要包含兩大模塊，一是綁定目標，也就是UI界面這塊，另一模塊是綁定源，也就是給數據綁定提供數據的后台代碼。然后這兩大模塊通過某種方式和語法關聯起來，會互相影響或者只是一邊對另一邊產生影響，這就是數據綁定的基本原理。如圖11.1所示，詳細地描述了這一綁定的過程，不論要綁定什么元素，不論數據源的特性是什么，每個綁定都始終遵循這個圖的模型。
圖11.1 數據綁定示意圖
如圖數據綁定示意圖所示，數據綁定實質上是綁定目標與綁定源之間的橋梁。 該圖演示以下基本的Windows Phone數據綁定概念：
通常，每個綁定都具有四個組件：綁定目標對象、目標屬性、綁定源，以及要使用的綁定源中的值的路徑。例如，如果要將TextBox的內容綁定到Employee對象的Name屬性，則目標對象是TextBox，目標屬性是Text屬性，要使用的值是Name，源對象是 Employee 對象。
綁定源又稱為數據源，充當着一個數據中心的角色，是數據綁定的數據提供者，可以理解為最底下數據層。數據源是數據的來源和源頭，它可以是一個UI元素對象或者某個類的實例，也可以是一個集合。
數據源作為一個實體可能保存着很多數據，具體關注它的哪個數值呢？這個數值就是路徑（Path）。例如，要用一個Slider控件作為一個數據源，那么這個Slider控件會有很多屬性，這些屬性都是作為數據源來提供的，它擁有很多數據，除了Value之外，還有Width、Height等，這時候數據綁定就要選擇一個最關心的屬性來作為綁定的路徑。例如，使用的數據綁定是為了監測Slider控件的值的變化，那么就需要把Path設為Value了。使用集合作為數據源的道理也是一樣，Path的值就是集合里面的某個字段。
數據將傳送到哪里去？這就是數據的目標，也就是數據源對應的綁定對象。綁定目標對象一定是數據的接收者、被驅動者，但它不一定是數據的顯示者。目標屬性則是綁定目標對象的屬性，這個很好理解。目標屬性必須為依賴項屬性。大多數UIElement對象的屬性都是依賴項屬性，而大多數依賴項屬性（除了只讀屬性）默認情況下都支持數據綁定。注意只DependencyObject類型可以定義依賴項屬性，所有UIElement都派生自DependencyObject。
11.1.2 創建綁定
在Windows Phone的應用程序中創建一個數據綁定主要會有下面的三個步驟：
（1）定義源對象:源對象會給界面UI提供數據，在這一步就要創建與程序相關的數據類，通過這個類的對象來作為數據綁定的源。
（2）通過設置DataContext屬性綁定到源對象， DataContext屬性表示Windows Phone的UI元素的數據上下文，可以給UI元素提供數據，如果對當前的頁面最頂層的Page設置其DataContext屬性綁定到源對象，那么整個頁面都可是使用該數據源提供的數據。
（3）使用Binding標記擴展來綁定數據源對象的屬性，把UI的屬性和數據源的屬性關聯起來。Binding是標記擴展，可以用Binding來聲明包含一系列子句，這些子句跟在Binding關鍵字后面，並由逗號分隔。
下面給出創建綁定的示例：通過一個最簡單的數據綁定程序來理解創建綁定的步驟。
代碼清單11-1：創建綁定（源代碼：第11章\Examples_11_1）
首先定義源對象，創建了一個MyData類，該類里面只有一個字符床屬性Title，在這里要注意的是要實現綁定必須是屬性類型，如果只是Title變量那么是實現不了綁定的。
MyData.cs文件主要代碼 ---------------------------------------------------------------------------------------- public class MyData { public string Title { get; set; } }
然后我們再創建一個MyData類的對象，把該對象賦值給Page頁面的DataContext屬性，表示使用了這個對象作為該頁面的數據上下文，在該頁面里面就可以綁定MyData類對象的相關屬性了。
MainPage.xaml.cs文件主要代碼 ---------------------------------------------------------------------------------------- public MyData myData = new MyData { Title = "這是綁定的標題！" }; public MainPage() { this.InitializeComponent(); this.DataContext = myData; }
最后在界面上使用Binding實現UI和數據源屬性之間的綁定關系，如在示例中把TextBlock控件的Text屬性綁定到MyData對象的Title屬性，這樣就可以把Title屬性的字符串顯示在TextBlock控件上了。
MainPage.xaml文件主要代碼 ---------------------------------------------------------------------------------------- <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> <TextBlock Text="{Binding Title}" Margin="12,100,0,28" FontSize="50"></TextBlock> </Grid>
11.1.3 用元素值綁定
在上一小節里面我們的數據綁定源是一個自定義的數據對象，那么其實還可以使用UI控件的元素對象作為數據源，這樣就可以實現了用元素值實現的數據綁定。用元素值進行綁定就是將某一個控件元素作為綁定的數據源，綁定的對象是控件元素，而綁定的數據源同時也是控件元素，這種綁定的方式，可以輕松地實現兩個控件之間的值的交互影響。用元素值進行綁定時通過設置Binding的ElementName屬性和Path屬性來實現的，ElementName屬性賦值為數據源控件的Name的值，Path 屬性則賦值為數據源控件的某個屬性，這個屬性就是數據源控件的一個數據變化的反映。
在上一小節使用了“Binding Title”作為綁定擴展標志的語法，那么這個是最簡單的綁定語法來的，其實我們可以利用Path屬性實現更加豐富和靈活的綁定關聯的語法，相關的語法情況如下所示：
（1）在最簡單的情況下，Path屬性值是要用於綁定的源對象的屬性名，如 Path=PropertyName，那么{Binding Title}其實是{Binding Path=Title}的簡寫形式。
（2）在C#中可以通過類似語法指定屬性的子屬性。例如，子句 Path=ShoppingCart.Order 設置與對象或屬性ShoppingCart的Order屬性的綁定，也就是說ShoppingCart是你綁定數據源的屬性，而Order則是ShoppingCart的屬性，相當於是數據源的屬性的屬性。
（3）若要綁定到附加屬性，應在附加屬性周圍放置圓括號。例如，若要綁定到附加屬性Grid.Row，則語法是Path=(Grid.Row)。
（4）可以使用數組的索引器來實現數據的綁定。例如，子句 Path=ShoppingCart[0]將綁定設置為與數組屬性的內部對應的索引的數值。
（5）可以在Path子句中混合索引器和子屬性，例如，Path=ShoppingCart.ShippingInfo[MailingAddress,Street].
（6）在索引器內部，可以有多個由逗號分隔的索引器參數。可以使用圓括號指定每個參數的類型。例如， Path="[(sys:Int32)42,(sys:Int32)24]"，其中sys映射到System命名空間。
（7）如果源為集合視圖，則可以用斜杠“/”指定當前項。例如，子句 Path=/用於設置到視圖中當前項的綁定。如果源為集合，則此語法指定默認集合視圖的當前項。
（8）可以結合使用屬性名和斜杠來遍歷作為集合的屬性。例如，Path=/Offices/ManagerName指定源集合的當前項，該源集合包含也作為集合的 Offices 屬性。 其當前項是一個包含ManagerName屬性的對象。
（9）也可以使用句點“.”路徑綁定到當前源。例如，Text="{Binding}" 等效於 Text="{Binding Path=.}"。
下面給出控制圓的半徑的示例：圓形的半徑綁定到Slider控件的值，從而實現通過即時改變Slider控件的值來改變圓的大小。
代碼清單11-2：控制圓的半徑（源代碼：第11章\Examples_11_2）
MainPage.xaml文件主要代碼 ------------------------------------------------------------------------------------------------------------------ <StackPanel x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <TextBlock FontSize="25" Name="textBlock1" Text="圓形的半徑會根據slider控件的值而改變" /> <Slider Name="slider" Value="50" Maximum="400"/> <TextBlock FontSize="25" Name="textBlock2" Text="半徑為:"/> <TextBlock Name="txtblk" Text="{Binding ElementName=slider, Path=Value}" FontSize="48"/> <Ellipse Height="{Binding ElementName=slider, Path=Value}" Width="{Binding ElementName=slider, Path=Value}" Fill="Red" Name="ellipse1" Stroke="Black" StrokeThickness="1"/> </StackPanel>
本文來源於《深入淺出Windows Phone 8.1 應用開發》
WP8.1 Runtime文章列表：http://www.cnblogs.com/linzheng/p/3998037.html
源代碼下載：http://vdisk.weibo.com/s/zt_pyrfNHb99O
歡迎關注我的微博@WP林政 微信公眾號：wp開發（號：wpkaifa）
WP8.1技術交流群：372552293