WPF屬性綁定實現雙向變化

　　WPF依賴項屬性能夠實現屬性的綁定，成功綁定以後只要修改後臺綁定的屬性，便可UI同步自動更新綁定的值，無需手動刷新界面；一樣，前臺的值變化後，經過獲取綁定的屬性值也可獲取UI變化後的值，實現雙向變化的效果。屬性綁定使得UI更新很是的方便，下面分享一個小栗子說明使用的方式。

一、先作了一個有一個TextBlock和一個Button的UI，想要實現點擊後TextBlock發生變化。

<Window x:Class="WPFDemo.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WPFDemo"
        mc:Ignorable="d"
        Title="Window1" Height="300" Width="300">
    
    <Grid>
        <Button Name="Button_OK" MaxWidth="50" MaxHeight="20" Click="Button_OK_Click">OK</Button>
        <TextBlock MaxWidth="50" MaxHeight="20" VerticalAlignment="Top"  HorizontalAlignment="Left" Text="{Binding Text}"></TextBlock>
    </Grid>
</Window>

 

二、建立UI更新類(如今是測試，因此屬性比較少，正常開發建議一個UI建立一個UI更新類專門用於UI更新)，以下爲完整代碼

public class PropertyToUI : INotifyPropertyChanged
    {
        #region 私有變量
              
        /// <summary>
        /// 狀態欄顯示文本
        /// </summary>
        private string text = "";

        #endregion

        #region 屬性
              
        /// <summary>
        /// 屬性-顯示文本
        /// </summary>
        public string Text
        {
            get { return text; }
            set 
            { 
                text = value;
                OnPropertyChanged("Text");
            }
        }

        #endregion

        #region 屬性變化通知事件
        
        /// <summary>
        /// 屬性變化通知事件
        /// </summary>
        public event PropertyChangedEventHandler PropertyChanged;

        /// <summary>
        /// 屬性變化通知
        /// </summary>
        /// <param name="e"></param>
        public void OnPropertyChanged(PropertyChangedEventArgs e)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, e);
            }
        }

        /// <summary>
        /// 屬性變化通知事件
        /// </summary>
        /// <param name="PropertyName"></param>
        public void OnPropertyChanged(string PropertyName)
        {
            PropertyChangedEventArgs e = new PropertyChangedEventArgs(PropertyName);
            if (PropertyChanged != null)
            {
                PropertyChanged(this, e);
            }
        }

        #endregion
    }

這個部分有以下幾個關鍵點：

(1)、須要實現INotifyPropertyChanged接口，這是一個屬性更新接口，能夠看一下它的實現，有一個屬性更新事件，因此要說聲明該事件。

namespace System.ComponentModel
{
    //
    // 摘要:
    //     Notifies clients that a property value has changed.
    public interface INotifyPropertyChanged
    {
        //
        // 摘要:
        //     Occurs when a property value changes.
        event PropertyChangedEventHandler PropertyChanged;
    }
}

(2)、建立屬性更新函數

　　　　　/// <summary>
        /// 屬性變化通知
        /// </summary>
        /// <param name="e"></param>
        public void OnPropertyChanged(PropertyChangedEventArgs e)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, e);
            }
        }

參數爲某個屬性的更新事件，然後觸發PropertyChanged(this, e)通知UI更新指定屬性

(3)、包裝屬性

　　　　public string Text
       {
            get { return text; }
            set 
            { 
                text = value;
                OnPropertyChanged("Text");
            }
        }

在設置器中調用屬性更新事件，即當後臺設置值時(想要更新UI值)，就會觸發屬性更新事件，通知前臺綁定的依賴項屬性進行更新(事件中帶有屬性的身份標識和值進行傳遞)。

 

三、前臺依賴項屬性對屬性更新類中的屬性進行綁定(Binding語法)

<TextBlock MaxWidth="50" MaxHeight="20" VerticalAlignment="Top"  HorizontalAlignment="Left" Text="{Binding Text}"></TextBlock>

屬性名綁定便可

 

四、綁定數據源的說明（這是比較容易忘記的地方）

PropertyToUI UI = new PropertyToUI();
this.DataContext = UI;  //事件綁定數據源

以上就是屬性綁定的必要步驟了，若是沒什麼問題基本就成功了，沒成功的再好好檢查一下。

 

以下爲完整的後臺代碼：

/// <summary>
    /// Window1.xaml 的交互邏輯
    /// </summary>
    public partial class Window1 : Window
    {

        /// <summary>
        /// UI更新類對象
        /// </summary>
        PropertyToUI UI = new PropertyToUI();

        /// <summary>
        /// 構造函數
        /// </summary>
        public Window1()
        {
            InitializeComponent();

            this.DataContext = UI;  //事件綁定數據源

            UI.Text = "程序開啓";
        }

        /// <summary>
        /// OK按鍵點擊事件
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void Button_OK_Click(object sender, RoutedEventArgs e)
        {
            UI.Text = "我更新了";
            MessageBox.Show(UI.Text);
        }
       
    }

 

運行效果以下：

 

點擊OK按鍵後：