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属性绑定实现双向变化的更多相关文章

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

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

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

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. vuejs属性绑定和双向绑定

    属性绑定 html <div v-bind:title="title">hello world</div> js new Vue({ el:'#root', ...

  4. WPF使用MVVM(一)-属性绑定

    WPF使用MVVM(一)-属性绑定 简单介绍MVVM MVVM是Model(数据类型),View(界面),ViewModel(数据与界面之间的桥梁)的缩写,是一种编程模式,优点一劳永逸,初步增加一些逻 ...

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

    一.说明 很多时候,我们要把一个枚举的属性的绑定到一组RadioButton上.大家都知道是使用IValueConverter来做,但到底怎么做才好? 而且多个RadioButton的Checked和 ...

  6. 学习WPF——元素绑定

    概念 从源对象提取一些信息,并用这些信息设置目标对象的属性 示例 在给TextBlock控件的FontSize属性赋值时,我们使用了绑定表达式 数据绑定表达式使用XAML的标记扩展(因此具有花括号)( ...

  7. WPF - 属性系统 (3 of 4)

    依赖项属性元数据 在前面的章节中,我们已经介绍了WPF依赖项属性元数据中的两个组成:CoerceValueCallback回调以及PropertyChangedCallback.而在本节中,我们将对其 ...

  8. 控制文本和外观------Attr Binding(attr属性绑定)

    Attr Binding(attr属性绑定) 目的 attr 绑定提供了一种方式可以设置DOM元素的任何属性值.你可以设置img的src属性,连接的href属性.使用绑定,当模型属性改变的时候,它会自 ...

  9. 【Angular 5】数据绑定、事件绑定和双向绑定

    本文为Angular5的学习笔记,IDE使用Visual Studio Code,内容是关于数据绑定,包括Property Binding.Class Binding.Style Binding. 在 ...

随机推荐

  1. SpringData JPA实现增删改

    一.创建实体类并自动生成数据库表 二.dao层继承JpaRepository 三.controller中增加操作 四.controller中删除操作 五.controller中修改操作

  2. 【RTOS】基于V7开发板的uCOS-III,uCOS-II,RTX4,RTX5,FreeRTOS原版和带CMSIS-RTOS V2封装层版全部集齐

    RTOS模板制作好后,后面堆各种中间件就方便了. 1.基于V7开发板的最新版uCOS-II V2.92.16程序模板,含MDK和IAR,支持uC/Probe https://www.cnblogs.c ...

  3. Eureka工作原理及它和ZooKeeper的区别

    1.Eureka 简介: Eureka 是 Netflix 出品的用于实现服务注册和发现的工具. Spring Cloud 集成了 Eureka,并提供了开箱即用的支持.其中, Eureka 又可细分 ...

  4. jQuery 源码解析(二十六) 样式操作模块 样式详解

    样式操作模块可用于管理DOM元素的样式.坐标和尺寸,本节讲解一下样式相关,样式操作通过jQuery实例的css方法来实现,该方法有很多的执行方法,如下: css(obj)            ;参数 ...

  5. ROS基础-基本概念和简单工具(1)

    1.什么是ROS? Robot operating System ,简单说机器人操作系统,弱耦合的分布式进程框架,通过进程间的消息传递和管理.实现硬件抽象和设备控制. 2.节点(node) node ...

  6. 【重拾基础】耐人寻味的CSS属性white-space

    <耐人寻味的CSS属性white-space>,本文说的white-space是一个控制换行和空白处理的CSS属性.我曾经被这个属性烦死,一直没记住,今天决定还是写下来好好琢磨下. 属性值 ...

  7. Java每日一面(Part1:计算机网络)[19/10/14]

    作者:故事我忘了¢个人微信公众号:程序猿的月光宝盒 1.1 说一说TCP的四次挥手 ​ "挥手",即终止TCP连接,断开一个TCP连接池. ​ 需要客户端和服务端总共发出四个包,以 ...

  8. linux中服务(service)管理

    一.介绍 服务(service) 本质就是进程,但是是运行在后台的,通常都会监听某个端口,等待其它程序的请求,比如(mysql , sshd 防火墙等),因此我们又称为守护进程,是Linux 中非常重 ...

  9. Vue中调用另一个组件中自定义事件

    之前在一个场景中,遇到组件需要调用父组件中的方法tableInit(),字组件调用父组件常用的有三种方法,具体参考:https://www.cnblogs.com/jin-zhe/p/9523782. ...

  10. ApiPost——国产postman,中文版,好用

    一款类似postman的接口测试平台,中文版,很好用 参考链接: https://www.cnblogs.com/phpwechat/p/10487077.html ApiPost下载地址: http ...