WPF屬性綁定實現雙向變化

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

1、先做了一個有一個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>

 

2、創建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值)，就會觸發屬性更新事件，通知前台綁定的依賴項屬性進行更新(事件中帶有屬性的身份標識和值進行傳遞)。

 

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

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

屬性名綁定即可

 

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

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按鍵后：