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