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="" Width="">

    <Grid>

        <Button Name="Button_OK" MaxWidth="" MaxHeight="" Click="Button_OK_Click">OK</Button>

        <TextBlock MaxWidth="" MaxHeight="" 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="" MaxHeight="" 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按键后：

巴特西

WPF属性绑定实现双向变化

最新文章

热门文章