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

原文地址:https://www.cnblogs.com/xiaomengshan/p/11564368.html

时间: 2024-11-05 14:47:56

WPF属性绑定实现双向变化的相关文章

2-4 Vue中的属性绑定和双向数据绑定

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>属性绑定和双向数据绑定</title> <script src="./vue.js"></script> </head> <body> <div id="root"

vue中的属性绑定和双向数据绑定

<html lang="en"> <head> <meta charset="UTF-8"> <title>属性绑定和双向数据绑定</title> <script src="./vue.js"></script> </head> <body> <div id="root"> <div title=&qu

Vue学习之vue属性绑定和双向数据绑定

··· <!DOCTYPE html> vue <!-- vue中的属性绑定和双向数据绑定 属性绑定: v-bind:title="title" 或 :title="title" 双向数据绑定: v-model --> <div id="root"> <div :title="title">hi man</div> <input v-model="co

vue属性绑定和双向数据绑定

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>属性绑定和双向数据绑定</title> <script src="Vue.js"></script> </head> <body> <div id="root"&g

【WPF】如何把一个枚举属性绑定到多个RadioButton

一.说明 很多时候,我们要把一个枚举的属性的绑定到一组RadioButton上.大家都知道是使用IValueConverter来做,但到底怎么做才好? 而且多个RadioButton的Checked和UnChecked都会触发绑定,这样就会调多次的Set. 二.目的 实现一个枚举属性绑定到多个RadioButton, 属性的Set方法不会被触发多次. 三.实现 方法大家都知道,就是利用Converter和ConevertParamter属性. 因为多个控件绑定一个属性,Checked和UnChe

学习WPF——元素绑定

概念 从源对象提取一些信息,并用这些信息设置目标对象的属性 示例 在给TextBlock控件的FontSize属性赋值时,我们使用了绑定表达式 数据绑定表达式使用XAML的标记扩展(因此具有花括号)(参见:) 这里创建了一个System.Windows.Data.Binding对象,所以绑定表达式以单词binding开头 在本例中只设置了Binding对象的两个属性ElementName和Path属性 ElementName 指定源元素 Path 指定源元素中的属性 Mode OneWay: 当

WPF - 属性系统 (3 of 4)

依赖项属性元数据 在前面的章节中,我们已经介绍了WPF依赖项属性元数据中的两个组成:CoerceValueCallback回调以及PropertyChangedCallback.而在本节中,我们将对其它元数据属性进行讲解. 首先让我们来看看元数据对默认值的支持.在元数据的构造函数中,软件开发人员可以通过它的defaultValue参数指定该依赖项属性的默认值.如果在元数据中并没有指定依赖项属性的默认值,那么WPF属性系统会自动根据依赖项属性的类型为该依赖项属性指定一个默认值: private s

wpf样式绑定 行为绑定 事件关联 路由事件实例

代码说明:我要实现一个这样的功能  有三个window窗口  每个窗体有一个label标签  当我修改三个label标签中任意一个字体颜色的时候  其他的label标签字体颜色也变化 首先三个窗体不用贴代码了  直接添加三个就行了 样式绑定: 先添加数据源  代码如下: (注:为了防止propertyName硬编码写死   可以使用CallerMemberName附加属性来获取默认的属性名称 或者使用表达式目录树Expression<Func<T>>的方式来获取) 1 public

WPF元素绑定

原文:WPF元素绑定 数据绑定简介:数据绑定是一种关系,该关系告诉WPF从源对象提取一些信息,并用这些信息设置目标对象的属性.目标属性是依赖项属性.源对象可以是任何内容,从另一个WPF元素乃至ADO.NET数据对象(如DataTable)或自行创建出数据对象.绑定用的是Binding类的一个实例,用的名称空间是:System.Windows.Data: 1.绑定表达式. 数据绑定表达式使用的是XAML标记扩展(因此具有花括号),用到的是System.Windows.Data.Bingding类的