WPF學習03：Element Binding

　　元素綁定是數據綁定的一個子集，關於數據綁定是什麼，園子裏有不少文章都說得很是好，在此不予詳細說明。

　　WPF實現了完善的數據綁定機制，使得元素綁定有簡易的實現步驟。

　　本文的元素指的是WPF中的可視控件。

例子

　　XAML代碼：

<Window x:Class="ElementBinding.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <StackPanel>
        <Slider Name="FontSizeSlider" Minimum="10" Maximum="40"></Slider>
        <TextBlock Name="TextBlock" FontSize="{Binding ElementName=FontSizeSlider, Path=Value}">Hello Wpf</TextBlock>
    </StackPanel>
</Window>

 　　效果：

　　

　　

 

綁定模式

　　在上例中FontSize="{Binding ElementName=FontSizeSlider, Path=Value}"即爲元素綁定所須要的代碼。

　　咱們能夠用C#代碼來實現一樣的綁定，效果是同樣的：

private void SetBinding()
{
    var bindingSetting = new Binding()
    {
       Source = FontSizeSlider,
       Path = new PropertyPath("Value")
      };
    TextBlock.SetBinding(System.Windows.Controls.TextBlock.FontSizeProperty, bindingSetting);
}

　　對於一個屬性，配置Binding，此時，配置Binding的元素在本次綁定中即爲目的元素，ElementName指定源元素，Path指定了源元素綁定到FontSize屬性的對應屬性,本例中爲Slider的Value。

 

     如今咱們對代碼進行改動：增長一個Button,並增長該Button Click 的 Handler。

     C#代碼：

private void Button_Click(object sender, RoutedEventArgs e)
{
    TextBlock.FontSize = 30;
}

　　咱們點擊按鍵，能夠看到文字變大，可是滑動條位置沒有變，這彷佛和預期不一致，這和數據綁定的綁定模式有關。

　　

　　下圖是WPF數據綁定經常使用的三種模式：而TextBlock.FontSize默認是OneWay模式，故而產生了剛纔的效果。

　　

　　咱們只須要對XAML代碼增長一條Mode=TwoWay 便可使效果達到預期：

<TextBlock Name="TextBlock" FontSize="{Binding ElementName=FontSizeSlider, Path=Value, Mode=TwoWay}">Hello Wpf</TextBlock>

　　WPF自帶的控件中，除了TextBox.Text默認Mode爲TwoWay以外，默認Mode皆爲OneWay。雖然如此，顯示標明Mode仍然是一個不錯的編碼方式。

 

      在經常使用的三種模式下，還有另一種模式：OneTime.只有在初始化窗體或者顯示對綁定表達式調用update才能使數據綁定傳輸數據。

      例子：

　　XAML代碼：

<Slider Name="FontSizeSlider" Minimum="10" Maximum="40"></Slider>
<TextBlock Name="TextBlock" FontSize="{Binding ElementName=FontSizeSlider, Path=Value, Mode=OneTime}">Hello Wpf</TextBlock>
<Button Click="Button_Click">Click me</Button>

　　C#代碼:

private void Button_Click(object sender, RoutedEventArgs e)
{
    //只有調用此句，Slider的Value纔會映射到FontSize
    TextBlock.GetBindingExpression(TextBox.FontSizeProperty).UpdateTarget();
}

 

觸發模式

　　咱們再對代碼進行改動,使FontSize和TextBox的輸入值綁定：

<TextBox Name="FontSizeBox" Text="{Binding ElementName=TextBlock, Path=FontSize}"></TextBox>
<TextBlock Name="TextBlock">Hello Wpf</TextBlock>
<Button Click="Button_Click">Click me</Button>

　　咱們會發現仍然實現不了預期，輸入的參數不能引起字體大小的改變。實際上，輸入完後，咱們按一下Tab，使輸入框失去焦點，便可對字體大小更新。緣由是:TextBox.Text 的默認綁定觸發模式爲LostFocus。

     三種觸發模式以下：

　　　

　　因此，咱們只要把代碼改爲：

<TextBox Name="FontSizeBox" Text="{Binding ElementName=TextBlock, Path=FontSize, UpdateSourceTrigger=PropertyChanged}"></TextBox>

　　便可實現實時數據綁定。

 

調試的方法

　　仍是上一個例子，若是咱們在輸入框中輸入非數字，好比說「AA」，數據綁定並不會拋出任何異常，那要如何才能肯定數據綁定沒有出什麼問題呢？

     WPF將數據綁定出的錯誤都打了輸出。。。。