【WPF學習】第二十九章 元素繫結——將元素繫結到一起
資料banding的最簡單情形是,源物件時WPF元素而且源屬性是依賴性屬性。前面章節解釋過,依賴項屬性具有內建的更改通知支援。因此,當在源物件中改變依賴項屬性的值時,會立即更新目標物件中的繫結屬性。這正是我們所需要的行為——而且不必為此構建任何額外的基礎結構。
為理解如何將一個元素繫結到另一個元素,下面建立一個簡單的示例。該示例視窗包含了兩個控制元件:一個Slider控制元件和一個具有單行文字的TextBlock控制元件。如果向右拖動滑動條上的滑塊,文字字型的尺寸會立即隨之增加。如果向左拖動滑塊,字型尺寸會縮小。
顯然,使用程式碼建立這種哦弄個行為不是很難。可簡單地響應Slider.ValueChanged事件,並將滑動條控制元件的當前值複製到TextBlock控制元件來實現這種行為。不過,通過資料繫結實現這種行為更簡單。
一、繫結表示式
當使用資料繫結時,不必對源物件(在本例中是Slider控制元件)做任何改動。只需要配置源物件使其屬性具有正確的值範圍,通常進行如下配置:
<Slider Name="sliderFontSize" Margin="3" Minimum="1" Maximum="40" Value="10" TickFrequency="1" IsSnapToTickEnabled="True" TickPlacement="TopLeft"></Slider>
繫結時在TextBlock元素中定義的。在此沒有使用字面值設定FontSize屬性,而是使用了一個繫結表示式,如下所示:
<TextBlock Margin="10" Name="lblSampleText" FontSize="{Binding ElementName=sliderFontSize, Path=Value}" Text="Simple Text"></TextBlock>
資料繫結表示式使用XAML標記擴充套件(因此具有花括號)。因為正在建立System.Windows.Data.Binding類的一個例項,所以繫結表示式以單詞Binding開頭。儘管可採用多種方式配置Binding物件,但本例中只需要設定兩個屬性:ElementName屬性(指示源元素)和Path屬性(指示源元素中的屬性)。
之所以使用名稱Path而不是Property,是因為Path可能指向屬性的屬性(如FontFamily.Source),也可能指向屬性使用的索引器(如Content.Children[0])。可構建具有多級層次的路徑,使其指向水屬性的屬性的屬性,一次類推。
如果希望引用附加屬性(在另一個類中定義但應用於繫結元素的屬性),那麼需要在圓括號中封裝屬性名稱。例如,如果繫結到Grid控制元件中的某個元素,路徑(Grid.Row)將檢索放置元素的行的行號。
二、繫結錯誤
WPF不會引發因此來通知與資料繫結相關的問題。如果指定的元素或屬性不存在,那麼不會受到任何指示;相反,指示不能在目標屬性中顯示資料。
咋一看,對除錯而言這像是可怕的夢魘。幸運的是,WPF輸出了繫結失敗細節的跟蹤資訊。當除錯應用程式時,該資訊顯示在Visual Studio的Output視窗中。
當試圖讀取源屬性時,WPF會忽略丟擲的任何異常,並不加提示地丟棄因資料無法轉換為目標屬性的資料型別而引發的異常。然而,當處理這些問題時還有一種選擇——可通知WPF改變源元素的外觀以指示發生了錯誤。例如,當使用哦感嘆號圖示或紅色輪廓標識非法輸入。
三、繫結模式
資料繫結的一個特性是目標會被自動更新,而不考慮源的修改方式。在這個示例中,源只能通過一種方式進行修改——通過使用者與滑動條上滑動進行的互動。下面分析該例的一個稍經修改的版本:新增一個按鈕,每個按鈕為滑動條應用一個預先設定的值:
當單擊Set to Large按鈕時,會執行下面的程式碼:
private void cmd_SetLarge(object sender, RoutedEventArgs e) { sliderFontSize.Value = 30; }
上面的程式碼設定滑動條的值,這會通過資料繫結強制改變字型大小。效果與移動滑動條上的滑塊一樣。
然而,下面的程式碼不能正常工作:
private void cmd_SetLarge(object sender, RoutedEventArgs e) { lblSampleText.FontSize = 30; }
上面的程式碼直接設定文字框的字型尺寸。因此,滑動條的位置未響應地更新。更糟的是,上面的程式碼破壞了字型尺寸的繫結,並用字面值代替了繫結。如果現在移動滑動條上的滑塊,文字框根本不會響應地進行改變。
有趣的是,可採用一種方式強制在兩個方向傳遞資料:從源到目標以及從目標到源。技巧是設定Binding物件的Mode屬性。下面的是修訂後過的雙向繫結,該繫結允許為源或目標應用變化,並使整體的其他部分自動更新自身:
<TextBlock Margin="10" Name="lblSampleText" FontSize="{Binding ElementName=sliderFontSize, Path=Value,Mode=TwoWay}" Text="Simple Text"></TextBlock>
在這個示例中,沒有理由使用雙向繫結(這需要更大的開銷),因為可通過使用正確的編碼來解決問題。然而,考慮該例的一個變體,該變體包含一個可在其中精確設定字型尺寸的文字框。這個文字框需要使用雙向繫結,從而當通過另一個方法改變字型尺寸時,該文字框可以應用使用者的改變,並顯示最新的尺寸值。
當設定Binding.Mode屬性時,WPF允許使用5個System.Windows.Data.BindingMode列舉值中的任何一個。下表列出了全部列舉值:
表 BindingMode列舉值
下圖顯示了他們之間的區別。前面已經介紹了OneWay和TwoWay模式。OneTime模式非常簡單。下面對其他兩種模式再進行一些分析。
圖 繫結兩個屬性的不同方式
1、OneWayToSource模式
你可能會好奇,既然有了OneWay模式,為什麼還有OneWayToSource模式選項——畢竟這兩個值都以相同方式建立單向繫結。唯一區別是繫結表示式的放置位置。本質行,OneWayToSource模式允許通過在通常被視為繫結源的物件中放置繫結表示式,從而翻轉源和目標。
使用這一技巧最常見的原因是要設定非依賴項屬性的屬性。前面開始介紹過,繫結表示式只能用於設定依賴項屬性。但通過使用OneWayToSource模式,可克服這一限制,但前提是提供資料的屬性本身是依賴項屬性。
2、Default模式
最後,除非明確指定其他模式,否則可能認為所有繫結都是單向的,這看起來像是符合邏輯的(畢竟,簡單的滑動條示例使用的就是這種方式)。然而,情況並非如此。為了自我驗證這一事實,在此考慮具有能夠改變字型尺寸的繫結文字框的示例。即使刪除了Mode=TwoWay設定,這個示例也仍工作的很好。這是因為WPF使用了一種不同的、預設情況下依賴於所繫結屬性的模式(從技術角度看,在每個依賴項屬性中都有一個元資料——FrameworkPropertyMetadata.BindsTwoWayByDefault標誌——該標誌指示屬性是使用單向繫結還是雙向繫結)。
通常,預設繫結模式也可正是期望的模式。然而,可設想一個示例,該例具有一個只讀的不允許使用者改變的文字框。對於這種情況,通過將模式設定為單向繫結可稍微降低一些開銷。
作為一條常用的經驗法則,明確設定繫結模式永遠不是壞主意。即使在文字框示例中,也值得通過包含Mode屬性來強調希望使用雙向繫結。
四、使用程式碼建立繫結
在構建視窗時,在XAML標記中使用Binding標記擴充套件來宣告繫結表示式通常最高效。然而,也可使用程式碼建立繫結。
下面的程式碼演示了上面示例中顯示的TextBlock元素建立繫結:
Binding binding=new Binding(); binding.Source=sliderFontSize; binding.Path=new PropertyPath("Value"); binding.Mode=BindingMode.TwoWay; lblSampleText.SetBinding(TextBlock.FontSize,binding);
還可通過程式碼使用BindingOperation類的兩個靜態方法移除繫結。ClearBinding()方法使用依賴項屬性(該屬性具有希望刪除的繫結)的引用作為引數,而ClearAllBindings()方法為元素刪除所有資料繫結:
BindingOperations.ClearAllBindings(lblSampleText);
ClearBinding()和ClearAllBindings()方法都使用ClearValue()方法,每個元素都從DependencyObject基類繼承了ClearValue()方法。ClearValue()方法簡單地移除屬性的本地值(對於這種情況,是資料繫結表示式)。
基於標記的繫結比通過程式碼建立的繫結更常見,因為基於指令碼的繫結更清晰並且需要完成的工作更少。一般使用標記建立它們的繫結,但在一些特殊情況下,會希望使用程式碼建立繫結:
- 建立動態繫結:如果希望根據其他執行時資訊修改繫結,或者根據環境建立不同的繫結,這時使用程式碼建立繫結通常更合理(此外,也可在視窗的Resource集合中定義可能希望使用的每個繫結,並只新增是使用合適的繫結物件呼叫SetBinding()方法的程式碼)。
- 刪除繫結:如果希望刪除繫結,從而可以通過普通方式設定屬性,需要藉助ClearBinding()或ClearAllBindings()方法。僅為屬性應用新值是不夠的——如果正在使用雙向繫結,設定的值會傳播到連結的物件,並且兩個屬性保持同步。
- 建立自定義控制元件:為讓他人能更容易地修改你構建的自定義控制元件的外觀,需要將特定細節(如事件處理程式和資料繫結表示式)從標記移到程式碼中。
五、使用程式碼檢索繫結
可使用程式碼檢索繫結並檢查其屬性,而不必考慮繫結最初是用程式碼還是標記建立的。
可採用兩種方式來獲取繫結資訊。第一種方式是使用靜態方法BindingOperations.GetBinding()來檢索相應的Binding物件。這需要提供兩個引數:繫結元素以及具有繫結表示式的屬性。
例如,如果具有如下繫結:
<TextBlock Margin="10" Name="lblSampleText" FontSize="{Binding ElementName=sliderFontSize, Path=Value}" Text="Simple Text"></TextBlock>
可使用如下程式碼來獲取繫結:
Binding binding=BindingOperations.GetBinding(lblSampleText,TextBlock.FontSize);
一旦擁有繫結物件,就可以檢查其屬性。例如,繫結元素名Binding.ElementName提供了繫結表示式的值(這裡是sliderFontSize)。Binding.Path提供的PropertyPath物件從繫結物件提取繫結值,Binding.Path.Path獲取繫結屬性的名稱(這裡是Value)。還有Binding.Mode屬性,用於告知繫結合適更新目標元素。
如果必須在測試時新增診斷程式碼,繫結物件會有趣一些。但WPF還允許通過呼叫BindingOperations.GetBindingExpression()方法獲得更實用的BindingExpression物件,該方法的引數與GetBinding()方法的引數相同:
BindingExpression expression = BindingOperations.GetBindingExpression(lblSampleText, TextBlock.FontSize);
BindingExpression物件包括一些屬性,用於複製Binding物件提供的資訊。但迄今為止,最有趣的是ResolvedSource屬性,該屬性允許計算繫結表示式並獲得其結果——傳遞的本地資料。下面舉一個例子:
//Get the source element Slider boundObject=(Slider)expression.ResolvedSource; //Get any data you need from the source element,including it's bound property string boundData=boundObject.FontSize;
六、多繫結
上面的示例僅包含一個繫結,但如有必要,可設定TextBlock元素從文字框中獲取其文字,從單獨的顏色列表中選擇當前前景色和背景色等等,下面是一個示例:
<Window x:Class="DataBinding.MultipleBindings" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MultipleBindings" Height="300" Width="300"> <Grid Margin="5"> <Grid.RowDefinitions> <RowDefinition Height="Auto"></RowDefinition> <RowDefinition Height="Auto"></RowDefinition> <RowDefinition Height="Auto"></RowDefinition> <RowDefinition Height="Auto"></RowDefinition> <RowDefinition></RowDefinition> </Grid.RowDefinitions> <Slider Name="sliderFontSize" Margin="3" Minimum="1" Maximum="40" Value="10"></Slider> <TextBox Name="txtContent" Margin="3" Grid.Row="2">Sample Content</TextBox> <ListBox Margin="3" Grid.Row="3" Name="lstColors"> <ListBoxItem Tag="Blue">Blue</ListBoxItem> <ListBoxItem Tag="DarkBlue">Dark Blue</ListBoxItem> <ListBoxItem Tag="LightBlue">Light Blue</ListBoxItem> </ListBox> <TextBlock Margin="3" Name="lblSampleText" FontSize="{Binding ElementName=sliderFontSize, Path=Value}" Grid.Row="4" Text="{Binding ElementName=txtContent, Path=Text}" Foreground="{Binding ElementName=lstColors, Path=SelectedItem.Tag}" > </TextBlock> </Grid> </Window>MultipleBindings
最終效果如下圖所示:
七、繫結更新
下面一個簡單的示例,當用戶在文字框中輸入字型大小時,發現文字字型大小並沒有立即變化,而是需要失去當前控制元件的焦點才會觸發。
會發生此問題的願意,是因為他們的行為由Binding.UpdateSourceTrigger屬性控制,該屬性可使用下表列出的某個值。當從文字框中取得文字並用於更新TextBlock.FontSize屬性時,看到的正式使用UpdateSourceTrigger.LostFocus方法從目標向源進行更新的例子:
表 UpdateSourceTrigger列舉值
請記住,上表列出的值不印象目標的更新方式。他們僅控制TwoWay或OneWayToSource模式的繫結中源的更新方式。
根據上面介紹的內容,可改進文字框示例,從而當用戶在文字框中輸入內容時將變化應用於字型尺寸。方式如下:
<TextBox Name="txtBound" Text="{Binding ElementName=lblSampleText, Path=FontSize, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}" Width="100"></TextBox>
要完全控制源物件的更新時機,可選擇UpdateSourceTrigger.Explicit模式。如果在文字框示例中使用這種方法,當文字框失去焦點後不會發生任何事情。反而,由編寫程式碼手動觸發更新。例如,可新增Apply按鈕,呼叫BindingExpression.UpdateSource()方法,觸發立即重新整理行為並更新字型尺寸。
當然,在呼叫BindingExpression.UpdateSource()之前,需要一種方法來獲取BindingExpression物件。BindingExpression物件僅是將兩項內容封裝到一起的較小組裝包,這兩項內容是:已經學習過的Binding物件(通過BindingExpression.ParentBinding屬性提供)和由源繫結的物件(BindingExpression.DataItem)。此外,BindingExpression物件為觸發立即更新繫結的一部分提供了兩個方法:UpdateSource()和UdateTarget()方法。
為獲取BindingExpression物件,需要使用GetBindingExpression()方法,並傳入具有繫結的目標屬性,每個元素都從FrameworkElement基類繼承了該方法。下面的示例根據當前文字框中的文字改變TextBlock的字型大小:
BindingExpression binding=txtFontSize.GetBindingExpression(TextBox.TextProperty); binding.UpdateSource();
八、繫結延遲
在極少數情況下,需要防止資料繫結觸發操作和修改源物件,至少在某一時刻是這樣的。例如,可能想在從文字框複製資訊之前暫停,而不是在每次按鍵後獲取。或者,源物件在資料繫結屬性變化時執行處理器密集型操作。在此情況下,可能更新增短暫的延遲時間,避免過分頻繁地觸發操作。
在這些特殊情況下,可使用Binding物件Delay屬性。等到數毫秒,之後再提交更改。下面是文字框示例的修改版本,會在使用者停止輸入500毫秒後更新源物件:
<TextBox Name="txtBound" Text="{Binding ElementName=lblSampleText, Path=FontSize, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay, Delay=500}" Width="100"></TextBox>
&n