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. 第420期 Python 周刊

    文章.教程或讲座 Python 数据科学教程:分析 Stack Overflow 2019 年开发者调查表** https://www.youtube.com/watch?v=_P7X8tMplsw ...

  2. LeetCode 3: 无重复字符的最长子串 Longest Substring Without Repeating Characters

    题目: 给定一个字符串,请你找出其中不含有重复字符的 最长子串 的长度. Given a string, find the length of the longest substring withou ...

  3. C++ 如何用百行代码实现线程安全的并发队列 | concurrent queue or blocking queue implemented in cpp

    本文首发于个人博客https://kezunlin.me/post/cabccf5c/,欢迎阅读最新内容! concurrent queue or blocking queue implemented ...

  4. C sharp #002# 结构化编程基础

    饮水思源:金老师的自学网站.C# Guide 索引 变量与数据类型 C#中For each的写法 C#控制台程序编程技巧 简易图片浏览器 BigInteger以及浮点数的比较 一.变量与数据类型 us ...

  5. spring源码分析6: ApplicationContext的初始化与BeanDefinition的搜集入库

    先前几篇都是概念的讲解:回顾下 BeanDefinition 是物料 Bean是成品 BeanFactory是仓库,存储物料与成品 ApplicationContext初始化搜集物料入库,触发生产线, ...

  6. 用 Python 实现植物大战僵尸代码!

    前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者: marble_xu GitHub地址:https://github ...

  7. Java生鲜电商平台-电商系统性能指标

    Java生鲜电商平台-电商系统性能指标 1.响应时间和吞吐量 根据应用程序的响应时间可以知道程序完成传输数据所用的时间.也可以从HTTP请求级别,或者成为数据库级别来看.对那些缓慢的查询你需要做一些优 ...

  8. Vue中通过Vue.extend动态创建实例

    Vue中通过Vue.extend动态创建实例 在Vue中,如果我们想要动态地来控制一个组件的显示和隐藏,比如通过点击按钮显示一个对话框或者弹出一条信息.我们通常会提前写好这个组件,然后通过v-if = ...

  9. Linux相关集合

    本篇概述 Linux xshell6 连接 Hadoop 启动关闭 Linux xshell6 连接相关问题 首先,虚拟机 得先能通成网(具体教程可百度) 然后,进行 本机 ip 的查询(xshell ...

  10. Violet音乐社区需求分析说明书

    目录 一.引言 1.1 编写目的 1.2 开发背景 1.3 开发工具 二.项目需求 2.1 角色定义 2.2 模块划分 2.3 功能概述 2.4 数据流图 三.前端页面 四.软件要求 4.1 性能要求 ...