[深刻淺出WP8.1(Runtime)]數據綁定的基礎

時間 2019-11-06

標籤深刻 wp8.1 runtime 數據綁定基礎欄目 Microsoft 简体版

原文原文鏈接

11.1 數據綁定的基礎

數據綁定是一種XAML界面和後臺數據通訊的方式，由於界面和後臺數據的通訊的場景有多種，而且數據於數據之間也存在着不同的關聯關係，因此數據綁定的實現技巧和方式也是多種多樣的。下面咱們全面地介紹數據綁定的實現原理和相關的語法基礎。html

11.1.1 數據綁定的原理數組

數據綁定主要包含兩大模塊，一是綁定目標，也就是UI界面這塊，另外一模塊是綁定源，也就是給數據綁定提供數據的後臺代碼。而後這兩大模塊經過某種方式和語法關聯起來，會互相影響或者只是一邊對另外一邊產生影響，這就是數據綁定的基本原理。如圖11.1所示，詳細地描述了這一綁定的過程，不論要綁定什麼元素，不論數據源的特性是什麼，每一個綁定都始終遵循這個圖的模型。微信

圖11.1 數據綁定示意圖ide

如圖數據綁定示意圖所示，數據綁定實質上是綁定目標與綁定源之間的橋樑。該圖演示如下基本的Windows Phone數據綁定概念：this

一般，每一個綁定都具備四個組件：綁定目標對象、目標屬性、綁定源，以及要使用的綁定源中的值的路徑。例如，若是要將TextBox的內容綁定到Employee對象的Name屬性，則目標對象是TextBox，目標屬性是Text屬性，要使用的值是Name，源對象是 Employee 對象。spa

綁定源又稱爲數據源，充當着一個數據中心的角色，是數據綁定的數據提供者，能夠理解爲最底下數據層。數據源是數據的來源和源頭，它能夠是一個UI元素對象或者某個類的實例，也能夠是一個集合。3d

數據源做爲一個實體可能保存着不少數據，具體關注它的哪一個數值呢？這個數值就是路徑（Path）。例如，要用一個Slider控件做爲一個數據源，那麼這個Slider控件會有不少屬性，這些屬性都是做爲數據源來提供的，它擁有不少數據，除了Value以外，還有Width、Height等，這時候數據綁定就要選擇一個最關心的屬性來做爲綁定的路徑。例如，使用的數據綁定是爲了監測Slider控件的值的變化，那麼就須要把Path設爲Value了。使用集合做爲數據源的道理也是同樣，Path的值就是集合裏面的某個字段。code

數據將傳送到哪裏去？這就是數據的目標，也就是數據源對應的綁定對象。綁定目標對象必定是數據的接收者、被驅動者，但它不必定是數據的顯示者。目標屬性則是綁定目標對象的屬性，這個很好理解。目標屬性必須爲依賴項屬性。大多數UIElement對象的屬性都是依賴項屬性，而大多數依賴項屬性（除了只讀屬性）默認狀況下都支持數據綁定。注意只DependencyObject類型能夠定義依賴項屬性，全部UIElement都派生自DependencyObject。htm

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>