通过Demo学WPF—数据绑定(一)✨

news2024/11/15 4:52:44

前言✨

想学习WPF,但是看视频教程觉得太耗时间,直接看文档又觉得似懂非懂,因此想通过看Demo代码+文档的方式进行学习。

准备✨

微软官方其实提供了WPF的一些Demo,地址为:microsoft/WPF-Samples: Repository for WPF related samples (github.com)

将其克隆到本地,有很多的Demo代码:

image-20240129141054183

新建一个空白解决方案:

image-20240129141201234

添加现有项目:

image-20240129141238024

选择Data Binding 中的 SimpleBinding:

image-20240129141537501

项目文件如下所示:

image-20240129141951318

查看SimpleBinding这个Demo的效果:

SimpleBindingDemo的效果

学习这个Demo✨

数据绑定的概念

首先需要知道数据绑定的基本概念,数据绑定是在应用 UI 与其显示的数据之间建立连接的过程。 如果绑定具有正确的设置,并且数据提供适当的通知,则在数据更改其值时,绑定到该数据的元素会自动反映更改。 数据绑定还意味着,如果元素中数据的外部表示形式发生更改,则基础数据可以自动进行更新以反映更改。 例如,如果用户编辑 TextBox 元素中的值,则基础数据值会自动更新以反映该更改。

现在再来看一下,数据绑定的模型图:

image-20240129142805099

现在我们根据这张模型图,学习这个Demo。

这个模型图表示数据绑定至少需要三个东西:

  • 绑定目标
  • 绑定
  • 绑定源

现在我们分别看看这个demo里面,这三个东西在哪?

绑定目标

我们发现这个demo的绑定目标是元素TextBox的Text属性与TextBlock的Text属性。

绑定

image-20240129143549091

这是一个C#类,查找在该Demo中,哪里出现了Binding?

发现在MainWindow.xaml中出现了Binding,有两处地方,分别是:

  <TextBox>
      <TextBox.Text>
          <Binding Source="{StaticResource MyDataSource}" Path="PersonName"
 UpdateSourceTrigger="PropertyChanged"/>
      </TextBox.Text>
  </TextBox>

 <TextBlock Text="{Binding Source={StaticResource MyDataSource}, Path=PersonName}"/>

这两处都是在 XAML 中声明绑定。

 <TextBox>
      <TextBox.Text>
          <Binding Source="{StaticResource MyDataSource}" Path="PersonName"
 UpdateSourceTrigger="PropertyChanged"/>
      </TextBox.Text>
  </TextBox>

这种使用的是对象元素语法

<TextBlock Text="{Binding Source={StaticResource MyDataSource}, Path=PersonName}"/>

这种使用的是标记扩展

从这里我们接触到了Binding类的三个属性,SourcePathUpdateSourceTrigger

那它们分别是什么意思呢?

先来看下Source

image-20240129144554369

我们发现这个demo里,Source="{StaticResource MyDataSource}StaticResource MyDataSource又是什么呢?

在Window.Resources标签下有一行代码:

image-20240129144901173

<local:Person x:Key="MyDataSource" PersonName="Joe"/>

<Window.Resources>标签在XAML中用于定义可以在整个窗口中重用的资源。这些资源可以是各种类型,包括样式、数据源、数据模板、颜色、画刷等。

<local:Person x:Key="MyDataSource" PersonName="Joe"/>这行代码创建了一个Person对象,并将其命名为"MyDataSource",该对象的PersonName属性设置为"Joe",这样你就可以在窗口的其他地方通过这个键来引用这个对象。

因此Source={StaticResource MyDataSource}的意思就是将Binding对象的Source属性设置为键为"MyDataSource"的资源,在这里也就是一个Person对象。

再来看看Path

image-20240129150048051

表示绑定源属性的路径。

Path="PersonName"表示绑定源是刚刚那个Person对象的PersonName属性。

最后再看看UpdateSourceTrigger

image-20240129150426493

这个属性可能就会难理解一点。

它表示当绑定目标怎么样时,绑定源的值应该被更新。

它的类型为枚举类型,有以下几个值:

含义
Default绑定目标属性的默认 UpdateSourceTrigger 值。 大多数依赖属性的默认值为 PropertyChanged,而 Text 属性的默认值为 LostFocus。
Explicit仅在调用 UpdateSource() 方法时更新绑定源。
LostFocus每当绑定目标元素失去焦点时,都会更新绑定源。
PropertyChanged每当绑定目标属性发生更改时,都会更新绑定源。
 <Label>Enter a Name:</Label>
 <TextBox>
     <TextBox.Text>
         <Binding Source="{StaticResource MyDataSource}" Path="PersonName"
UpdateSourceTrigger="PropertyChanged"/>
     </TextBox.Text>
 </TextBox>

我们会发现在这个demo中,TextBox.Text设置了UpdateSourceTrigger属性。

这是因为大多数依赖项属性的默认值为 PropertyChanged,而 Text 属性的默认值为 LostFocus。在这个demo中,我们不希望失去焦点才更新源数据,而是一发生改变就更新绑定源,因此设置UpdateSourceTrigger属性为PropertyChanged

总结一下,我们遇到的关于Binding类的三个属性SourcePathUpdateSourceTrigger

属性名含义
Source获取或设置要用作绑定源的对象。
Path获取或设置绑定源属性的路径。
UpdateSourceTrigger获取或设置一个值,它可确定绑定源更新的时机。

现在我们已经介绍了绑定目标、绑定就差绑定源了。

绑定源

在数据绑定中,绑定源对象是指用户从其获取数据的对象。

在这个demo中,绑定源是一个Person对象。

查看Person类的代码:

using System.ComponentModel;

namespace SimpleBinding
{
    // This class implements INotifyPropertyChanged
    // to support one-way and two-way bindings
    // (such that the UI element updates when the source
    // has been changed dynamically)
    public class Person : INotifyPropertyChanged
    {
        private string _name;

        public Person()
        {
        }

        public Person(string value)
        {
            _name = value;
        }

        public string PersonName
        {
            get { return _name; }
            set
            {
                _name = value;
                // Call OnPropertyChanged whenever the property is updated
                OnPropertyChanged("PersonName");
            }
        }

        // Declare the event
        public event PropertyChangedEventHandler PropertyChanged;
        // Create the OnPropertyChanged method to raise the event
        protected void OnPropertyChanged(string name)
        {
            var handler = PropertyChanged;
            handler?.Invoke(this, new PropertyChangedEventArgs(name));
        }
    }
}

首先这个Person类实现了INotifyPropertyChanged接口,我们来看下INotifyPropertyChanged接口:

public interface INotifyPropertyChanged
{
    //
    // 摘要:
    //     Occurs when a property value changes.
    event PropertyChangedEventHandler? PropertyChanged;
}

包含一个PropertyChanged事件,因此该Person类必须实现接口的成员PropertyChanged。

当属性值被设置时,会调用OnPropertyChanged方法,从而触发事件。

INotifyPropertyChanged接口定义了一个PropertyChanged事件,当一个属性的值发生变化时,你可以触发这个事件。WPF的数据绑定引擎会监听这个事件,当事件被触发时,它会更新绑定的UI元素的值。
如果你的数据源没有实现这个接口,那么当数据源的属性值发生变化时,WPF的数据绑定引擎将无法知道这个变化,因此它将无法更新UI元素的值。
这意味着,如果你的数据源的属性值在运行时可能会发生变化,并且你希望这些变化能够自动反映到UI上,那么你的数据源就需要实现INotifyPropertyChanged接口。

总结✨

通过这个小Demo,我们明白了WPF中的数据绑定的三要素,绑定对象、绑定、绑定源。在这个demo中,我们学会了如何在xaml中声明绑定,知道了Binding的三个属性SourcePathUpdateSourceTrigger的含义,明白了数据源为什么要实现INotifyPropertyChanged接口,学会了WPF中数据绑定的基本用法,希望对你有所帮助。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1420504.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

仿真APP在金属波纹管液压胀形工艺设计中的应用

一、背景介绍 金属波纹管是带有波纹状截面的金属管状零件&#xff0c;在工业中应用广泛。金属波纹管特殊的截面形状使其具备较好的柔韧性&#xff0c;能够在一定范围内伸缩弯曲。这一特性赋予波纹管两大用途&#xff1a;一是作为变形补偿器&#xff0c;可用于补偿管道设备由于…

MySQL原理(三)锁定机制

一、介绍&#xff1a; 1、锁的本质 业务场景中存在共享资源&#xff0c;多个进程或线程需要竞争获取并处理共享资源&#xff0c;为了保证公平、可靠、结果正确等业务逻辑&#xff0c;要把并发执行的问题变为串行&#xff0c;串行时引入第三方锁当成谁有权限来操作共享资源的判…

Windows Server 2025 LTSC 预览版来了

Windows Server 2025 LTSC 预览版来了 1. 安装 Windows Server 2025 LTSC 预览版2. 安装 VMware Tools3. Windows Server 2025 LTSC 预览版4. Windows Server 2025 LTSC 预览版下载地址 1. 安装 Windows Server 2025 LTSC 预览版 使用 VMware Workstation 安装&#xff0c; 安…

Mysql-事务(隔离级别,事务底层原理,MVCC)

什么是事务&#xff1f;有哪些特性&#xff1f; 事务&#xff1a;事务指的是逻辑上的一组操作&#xff0c;组成这组操作的各个单元要么全都成功&#xff0c;要么全都失败。 事务特性&#xff1a; 原子性&#xff08;Atomicity&#xff09;&#xff1a; 原子性是指事务是一个不…

如何在 Ubuntu 中安装 Microsoft Edge 浏览器

微软终于聪明了一回&#xff0c;也学会了「打不过就加入」。Microsoft Edge 浏览器的 Linux 稳定版已经于 2020 年 10 月 23 日发布&#xff0c;并提供给 Linux 发行版使用。除了官方 Edge APT 源以外&#xff0c;还提供了.deb和.rpm格式的安装包。 Microsoft Edge 基于 Chrom…

###C语言程序设计-----C语言学习(7)#(调试篇)

前言&#xff1a;感谢您的关注哦&#xff0c;我会持续更新编程相关知识&#xff0c;愿您在这里有所收获。如果有任何问题&#xff0c;欢迎沟通交流&#xff01;期待与您在学习编程的道路上共同进步。 一. 程序调试 1.程序调试介绍&#xff1a; 程序调试是软件开发过程中非常重…

大坑!react+thress.js

2. UI交互界面与Canvas画布叠加 | Three.js中文网 (webgl3d.cn) // canvas画布绝对定位 renderer.domElement.style.position absolute; renderer.domElement.style.top 0px; renderer.domElement.style.left 0px; renderer.domElement.style.zIndex -1; 我按照教程设置了…

C#小结:以Winform为例,总结一些C#在桌面开发中一些技巧

目录 一、给列表增加按钮&#xff0c;打印实体信息 二、嵌套子窗体 一、给列表增加按钮&#xff0c;打印实体信息 private void button1_Click(object sender, EventArgs e) {List<Student> studentList new List<Student>(){new Student() { Id 1, Name &quo…

Hadoop-MapReduce-源码跟读-MapTask阶段篇

一、源码下载 下面是hadoop官方源码下载地址&#xff0c;我下载的是hadoop-3.2.4&#xff0c;那就一起来看下吧 Index of /dist/hadoop/core 二、Mapper类 我们先看下我们写的map所继承的Mapper类 public class Mapper<KEYIN, VALUEIN, KEYOUT, VALUEOUT> {/*** 传递…

python二维高斯热力图绘制简单的思路代码

import numpy as np import matplotlib.pyplot as plt from scipy.ndimage import gaussian_filter import cv2# 生成一个示例图像 image_size 100 image np.zeros((image_size, image_size))# 在图像中心创建一个高亮区域 center_x, center_y image_size // 2, image_size …

爱可声助听器参与南湖区价值百万公益助残捐赠活动成功举行

“声音大小合适吗&#xff1f;能听清楚吗&#xff1f;”今天下午&#xff0c;一场助残捐赠活动在南湖区凤桥镇悄然举行&#xff0c;杭州爱听科技有限公司带着验配团队和听力检测设备来到活动现场&#xff0c;为南湖区听障残疾人和老人适配助听器。 家住余新镇的75岁的周奶奶身体…

mac截图翻译软件有哪些?五大超实用翻译软件

mac截图翻译软件有哪些&#xff1f;随着全球化的发展&#xff0c;跨语言沟通已成为日常生活和工作中不可或缺的一部分。然而&#xff0c;语言障碍常常让我们在阅读外文资料时感到困惑。为了解决这一问题&#xff0c;Mac用户需要一款强大的截图翻译软件来帮助他们快速理解外文内…

Docker 搭建MySQL主从复制-读写分离

一. 介绍 MySQL主从复制是一种常用的数据库高可用性解决方案&#xff0c;通过在主数据库上记录的数据变更&#xff0c;同步到一个或多个从数据库&#xff0c;实现数据的冗余备份和读写分离。在Docker环境下搭建MySQL主从复制和读写分离&#xff0c;不仅方便管理&#xff0c;还…

MES和QMS怎么选?

MES&#xff0c;即制造执行系统&#xff0c;主要用于监控和控制生产过程&#xff0c;提升生产效率、减少生产成本。万界星空科技MES可以提供实时的生产数据&#xff0c;帮助企业做出更准确的决策&#xff0c;并且能够自动化地执行生产任务&#xff0c;提高生产线的效率和灵活性…

视频转GIF动图实践, 支持长视频转GIF

背景 找了很多GIF动图制作的工具&#xff0c;比如将视频转成GIF, 或者将一系列图片转成GIF, 增加背景文案等等功能。很多收费或者用的一些三方库有点点卡顿&#xff0c;或者需要安装一个软件&#xff0c;所以就自己做一款纯前端页面级别的 视频转 GIF 动图工具。 最开始找到一…

LLM漫谈(四)| ChatDOC:超越ChatPDF性能并支持更多功能的阅读聊天工具

在过去的一年里&#xff0c;ChatGPT的兴起催生了许多基于GPT的人工智能工具&#xff0c;其中Chat PDF工具得到了广泛关注。这些工具对知识密集型专业人员来说尤其有价值&#xff0c;大大提高了生产力。随着Chat PDF工具的激增&#xff0c;选择正确的工具变得至关重要。 接下来&…

vue-computed 计算属性

一、computed 计算属性 在Vue应用中&#xff0c;在模板中双向绑定一些数据或者表达式&#xff0c;但是表达式如果过长&#xff0c;或者逻辑更为复杂 时&#xff0c;就会变得臃肿甚至难以维护和阅读&#xff0c;例如&#xff1a; <div>写在双括号中的表达式太长了,不利于阅…

Apache Commons Collection3.2.1反序列化分析(CC1)

Commons Collections简介 Commons Collections是Apache软件基金会的一个开源项目&#xff0c;它提供了一组可复用的数据结构和算法的实现&#xff0c;旨在扩展和增强Java集合框架&#xff0c;以便更好地满足不同类型应用的需求。该项目包含了多种不同类型的集合类、迭代器、队…

LiveGBS流媒体平台GB/T28181功能-支持配置开启 HTTPS 服务什么时候需要开启HTTPS服务

LiveGBS功能支持配置开启 HTTPS 服务什么时候需要开启HTTPS服务 1、配置开启HTTPS1.1、准备https证书1.1.1、选择Nginx类型证书下载 1.2、配置 LiveCMS 开启 HTTPS1.2.1 web页面配置1.2.2 配置文件配置 2、验证HTTPS服务3、为什么要开启HTTPS3.1、安全性要求3.2、功能需求 4、搭…

2024 中国(南京)国际口腔设备器械博览会

2024 中国&#xff08;南京&#xff09;国际口腔设备器械博览会 时间&#xff1a;2024 年 7 月 18-20 日 地点&#xff1a;南京国际展览中心 WeChat_20230512134641 主办单位: 南京民营口腔医疗协会 北京铭曼国际展览有限公司 承办单位: 北京铭曼国际展览有限公司 展会介绍 随…