在 WPF 中,如何实现数据的双向绑定?

news2024/11/21 23:09:25

在 WPF 中,数据绑定是一个非常重要的特性,它允许 UI 与数据源之间自动同步。双向绑定是一种常见的绑定方式,当数据源更新时,UI 会自动更新;同样,当 UI 中的元素(如文本框)发生改变时,数据源也会自动更新。

如何实现双向绑定

我们可以通过以下步骤来实现 WPF 中的数据双向绑定。

步骤 1: 创建一个 WPF 项目

  1. 打开 Visual Studio。
  2. 点击 创建新项目。
  3. 选择 WPF 应用,然后点击 下一步。
  4. 输入项目名称和存储路径,点击 创建。

步骤 2: 创建数据源类

数据源类可以是一个简单的 C# 类,用于存储我们要绑定的数据。为了实现双向绑定,通常需要让这个类实现 INotifyPropertyChanged 接口,这样当属性值发生变化时,UI 就会自动更新。

using System.ComponentModel;

namespace WpfApp
{
    // 创建数据源类
    public class Person : INotifyPropertyChanged
    {
        private string _name;
        private int _age;

        public string Name
        {
            get { return _name; }
            set
            {
                if (_name != value)
                {
                    _name = value;
                    // 每当属性的值改变时,会调用 OnPropertyChanged 方法,通知 UI 更新。
                    OnPropertyChanged(nameof(Name));  // 通知 UI 更新
                }
            }
        }

        public int Age
        {
            get { return _age; }
            set
            {
                if (_age != value)
                {
                    _age = value;
                    OnPropertyChanged(nameof(Age));
                }
            }
        }

        //实现 INotifyPropertyChanged 接口,这样当属性值发生变化时,UI 就会自动更新。
        public event PropertyChangedEventHandler? PropertyChanged;

        protected virtual void OnPropertyChanged(string propertyName)
        {
        	// 展示数据变化
            MessageBox.Show($"属性更改: {propertyName}");
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

在这里插入图片描述

在上面的代码中,Person 类有两个属性:Name 和 Age。每当这两个属性的值改变时,我们会调用 OnPropertyChanged 方法,通知 UI 更新。

步骤 3: 设置数据绑定

接下来,我们需要将 Person 类的实例绑定到 XAML 中的控件。双向绑定可以通过 TextBox 控件与数据源中的属性进行绑定。以下是具体的步骤。

3.1. 修改 MainWindow.xaml

在 MainWindow.xaml 中,我们需要设置绑定。假设我们想要将 Name 和 Age 绑定到两个 TextBox 控件,并实现双向绑定。

<Window x:Class="WpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="双向绑定示例" Height="200" Width="400">

    <Grid>
        <StackPanel>
            <TextBox Text="{Binding Name,Mode=TwoWay}" Width="120" Margin="10" />
			<TextBox Text="{Binding Age,Mode=TwoWay}" Width="120" Margin="10" />
			<Button Content="修改" Width="120" Margin="10" Click="Button_Click" />
        </StackPanel>
    </Grid>
</Window>

3.2. 设置数据上下文

为了实现绑定,我们需要将 Person 实例设置为 Window 的数据上下文。可以在 MainWindow.xaml.cs 文件中完成。

using System.Windows;

namespace WpfApp
{
    public partial class MainWindow : Window
	{
	    public MainWindow()
	    {
	        InitializeComponent();
	
	        // 为了实现绑定,我们需要将 Person 实例设置为 Window 的数据上下文。
	        var person = new Person { Name = "张三", Age = 25 };
	        DataContext = person;
	    }
	
	    private void Button_Click(object sender, RoutedEventArgs e)
	    {
	        // 修改数据源中的值
	        (DataContext as Person).Name = "李四";
	        (DataContext as Person).Age = 30;
	    }
	}
}

在上面的代码中,我们创建了一个 Person 对象并将其作为数据上下文设置给 Window。这样,所有的绑定都会指向 Person 对象。

在这里插入图片描述

在运行调试中,数据绑定对象赋值给了person对象。person绑定给数据上下文(DataContext)。

步骤 4: 运行程序

当你运行应用程序时,你会看到两个文本框,分别用于显示 Name 和 Age 的值。如果你在这些文本框中输入新的值,Person 类中的属性也会自动更新,反之,当属性值在代码中发生变化时,UI 也会自动反映。
在这里插入图片描述

总结

  1. 数据源类实现 INotifyPropertyChanged 接口:这样可以确保属性变化时通知 UI。
  2. 绑定控件属性:使用 {Binding PropertyName, Mode=TwoWay} 语法来进行双向绑定。
  3. 设置数据上下文:通过设置 Window.DataContext 来指定数据源。

双向绑定的关键点在于 Mode=TwoWay,这确保了数据和 UI 之间的双向同步。如果你只需要从数据源更新 UI(单向绑定),则可以省略 Mode=TwoWay,或者使用 Mode=OneWay。

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

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

相关文章

DAY6 线程

作业1&#xff1a; 多线程实现文件拷贝&#xff0c;线程1拷贝一半&#xff0c;线程2拷贝另一半&#xff0c;主线程回收子线程资源。 代码&#xff1a; #include <myhead.h> sem_t sem1; void *copy1()//子线程1函数 拷贝前一半内容 {int fd1open("./1.txt",O…

# filezilla连接 虚拟机ubuntu系统出错“尝试连接 ECONNREFUSED - 连接被服务器拒绝, 失败,无法连接服务器”解决方案

filezilla连接 虚拟机ubuntu系统出错“尝试连接 ECONNREFUSED - 连接被服务器拒绝&#xff0c; 失败&#xff0c;无法连接服务器”解决方案 一、问题描述&#xff1a; 当我们用filezilla客户端 连接 虚拟机ubuntu系统时&#xff0c;报错“尝试连接 ECONNREFUSED - 连接被服务…

网安数学基础-同余关系

文章目录 参考等价关系实例 同余同余和等价同余的运算 乘法逆元一次同余方程消去律 剩余类中国剩余定理欧拉函数欧拉定理 费马小定理 参考 【一口气学完】密码学的数学基础2&#xff0c;《同余关系》&#xff0c;一小时学完 等价关系 三角形里的全等关系 等价关系定义 下面这…

高校数字校园建设的数字身份管理难题

近年来&#xff0c;我国高等院校在《中国教育现代化2035》战略的要求下&#xff0c;在《高等学校数字校园建设规范&#xff08;试行&#xff09;》的指引下&#xff0c;掀起了数字校园建设高潮。借助教学、科研、管理、服务等种类的业务应用&#xff0c;高校提升了业务的数字化…

HDLC和PPP原理与配置

HDLC:高级数据链路控制 PPP:点到点协议 PPP:包括LCP链路控制协议,用于各种链路协议层参数的协商内容包括最大接收单元MRU,认证方式,魔术字等选项. NCP:网络控制协议,用于各网络层参数的协商,更好地支持了网络层协议. PAP:口令认证. CHAP:质询握手认证协议 PPP有两种验证方式…

Oracle数据库 查看SQL执行计划的几种方法

前言 在日常的运维工作中&#xff0c;SQL优化是DBA的进阶技能&#xff0c;SQL优化的前提是要看SQL的执行计划是否正确&#xff0c;下面分享几种查看执行计划的方法&#xff0c;每一种方法都各有各的好处&#xff0c;可以根据特定场景选择某种方法。 一.使用AUTOTRACE查看执行…

Hbase Shell

一、启动运行HBase 首先登陆SSH&#xff0c;由于之前在Hadoop的安装和使用中已经设置了无密码登录&#xff0c;因此这里不需要密码。然后&#xff0c;切换至/usr/local/hadoop&#xff0c;启动Hadoop&#xff0c;让HDFS进入运行状态&#xff0c;从而可以为HBase存储数据&#…

31-2 智能驾驶系统

智能驾驶功能分类 安全类功能 纵向 FCW/AEB FCTA/FCTB/RCTA/RCTB RVW/RVB 横向 ESA LSS LKA/LDW/ELK 盲区安全辅助 BSD LCA DOW CVW 舒适功能类 纵向 ACC CSA TSR ISA 横向 LCC ILC ALC 横纵向 TJA/HWA NOP 泊车功能 RAP 蓝牙通信&#xff0c;环视超车波 HPA 记忆泊车…

ubuntu20.04_从零LOD-3DGS的复现

环境要求 dependencies:- cudatoolkit11.6- plyfile0.8.1- python3.7.13- pip22.3.1- pytorch1.12.1- torchaudio0.12.1- torchvision0.13.1- tqdm1. 安装conda创建环境 conda create -n lod-3dgs python3.7.132. 安装CUDA11.6和相应cuDNN。 2.1 CUDA CUDA安装参考CUDA10.1…

Linux:网络协议socket

我们之前学的通信是本地进程间通信&#xff0c;如果我们想在网络间通信的话&#xff0c;就需要用到二者的ip地址&#xff0c;分别被称为源IP地址和目的IP地址&#xff0c;被存入ip数据包中&#xff0c;其次我们还需要遵循一些通信协议。 TCP协议&#xff1a;传输层协议&#x…

Leetcode - 143双周赛

目录 一&#xff0c;3345. 最小可整除数位乘积 I 二&#xff0c;3346. 执行操作后元素的最高频率 I 1.差分数组 2.同向三指针 滑动窗口 三&#xff0c; 3348. 最小可整除数位乘积 II 一&#xff0c;3345. 最小可整除数位乘积 I 本题直接暴力枚举&#xff0c;题目求 >n…

Springboot3 配置Swargger3.0版本

一、swagger 版本配置&#xff0c;我用的3.0.0 <dependency><groupId>io.springfox</groupId><artifactId>springfox-swagger2</artifactId><version>${swagger.version}</version></dependency>二、说明&#xff1a;springdo…

error MSB3325:无法导入以下密钥文件xxx,该密钥文件可能受密码保护

错误提示信息(类似如下)&#xff1a; error MSB3325: 无法导入以下密钥文件: F:\...\Common.pfx。该密钥文件可能受密码保护。若要更正此问题&#xff0c;请尝试再次导入证书&#xff0c;或手动将证书安装到具有以下密钥容器名称的强名称 CSP: VS_KEY_A65F207BE95F57D0 出现此…

喜报|超维机器人荣获昇腾AI创新大赛铜奖

近日&#xff0c;在备受瞩目的昇腾AI创新大赛中&#xff0c;超维机器人凭借扎实的技术实力和创新产品&#xff0c;荣获大赛铜奖。这一荣誉不仅展现了超维机器人在智能巡检领域的技术创新与突破&#xff0c;也标志着超维机器人的智能巡检解决方案在人工智能领域获得了广泛认可&a…

[[nodiscard]] 使用说明

1 作用 [[nodiscard]] 属性&#xff1a;这个属性可以用于函数或者返回类型。它的作用是告诉编译器&#xff1a;调用这个函数时&#xff0c;它的返回值不应被忽略。如果程序员调用了这样的函数但没有使用它的返回值&#xff0c;编译器会发出警告。这对于那些返回重要状态或错误…

golang分布式缓存项目 Day4 一致性哈希

注&#xff1a;该项目原作者&#xff1a;https://geektutu.com/post/geecache-day1.html。本文旨在记录本人做该项目时的一些疑惑解答以及部分的测试样例以便于本人复习 为什么使用一致性哈希 我该访问谁 对于分布式缓存来说&#xff0c;当一个节点接收到请求&#xff0c;如…

MySQL数据库专栏(四)MySQL数据库链接操作C#篇

摘要 本篇文章主要介绍C#链接MySQL数据库的接口介绍&#xff0c;使用实例及注意事项&#xff0c;辅助类的封装及调用实例&#xff0c;可以直接移植到项目里面使用。 目录 1、添加引用 2、接口介绍 2.1、MySqlConnection 2.2、MySqlCommand 2.3、MySqlDataReader…

借助 Pause 容器调试 Pod

借助 Pause 容器调试 Pod 在 K8S 中&#xff0c;Pod 是最核心、最基础的资源对象&#xff0c;也是 Kubernetes 中调度最小单元。在介绍 Pause 容器之前需要先说明下 Pod 与容器的关系来理解为什么需要 Pause 容器来帮助调试 1. Pod 与 容器的关系 Pod 是一个抽象的逻辑概念&…

UE5 umg学习(四) 将UI控件切换到关卡中

视频资料 7、将UI控件渲染到关卡_哔哩哔哩_bilibili 在前三节里&#xff0c;创建了用户的控件蓝图Widget_BP 目标是运行的时候&#xff0c;开始运行这个蓝图&#xff0c;因此需要在开始事件触发运行 首先&#xff0c;回到主页&#xff0c;点击关卡蓝图 要从事件开始运行时 …

React Hooks在现代前端开发中的应用

&#x1f493; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4dd; Gitee主页&#xff1a;瑕疵的gitee主页 ⏩ 文章专栏&#xff1a;《热点资讯》 React Hooks在现代前端开发中的应用 React Hooks在现代前端开发中的应用 React Hooks在现代前端开发中的应用 引言 React Hooks …