欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

WPF属性绑定实现双向变化

程序员文章站 2022-05-03 14:12:52
WPF依赖项属性可以实现属性的绑定,成功绑定之后只要修改后台绑定的属性,即可UI同步自动更新绑定的值,无需手动刷新界面;同样,前台的值变化后,通过获取绑定的属性值也可获取UI变化后的值,实现双向变化的效果。属性绑定使得UI更新非常的方便,下面分享一个小栗子说明使用的方式。 1、先做了一个有一个Tex ......

  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);
        }
       
    }

 

运行效果如下:

WPF属性绑定实现双向变化

 

点击ok按键后:

WPF属性绑定实现双向变化