首页 > 其他分享 >通过Demo学WPF—数据绑定(一)✨

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

时间:2024-01-29 16:58:14浏览次数:28  
标签:PropertyChanged Demo 绑定 Person WPF 属性

前言✨

想学习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中数据绑定的基本用法,希望对你有所帮助。

标签:PropertyChanged,Demo,绑定,Person,WPF,属性
From: https://www.cnblogs.com/mingupupu/p/17994859

相关文章

  • 3.数据绑定
    什么是MVVM?看一张图。View负责数据的输入与输出;ViewModel负责业务逻辑;Model则表示程序中具体要处理的数据。所以,Model将作为属性存在于ViewModel中,而Model最终是要显示在Ul界面(View)上的,怎么办呢?将ViewModel赋值给View的DataContext(数据上下文)属性,View就可以引用ViewModel中的那......
  • 动态绑定组件时 v-model:value 的使用
    //requireimportcomponentsconstfiles=require.context("@/components/control",true,/\index.vue$/);//console.log('files:',files.keys())//files:['./cascader/index.vue','./control/cascader/index.vue',......
  • WPF应用程序窗口
    窗口可用于1显示窗口2配置窗口的大小、位置和外观3托管特定于应用程序的内容4管理窗口的生存期窗口的属性WindowStartupLocation:窗口首次显示时的位置ShowInTaskbar:窗口是否具有任务栏按钮WindowState:指示窗口是最大化、最小化或者正常尺寸显示Topmost:是否在最顶层Icon:......
  • FluentValidation在C# WPF中的应用
    1.引言在.NET开发领域,FluentValidation以其优雅、易扩展的特性成为开发者进行属性验证的首选工具。它不仅适用于Web开发,如MVC、WebAPI和ASP.NETCORE,同样也能完美集成在WPF应用程序中,提供强大的数据验证功能。本文将深入探讨如何在C#WPF项目中运用FluentValidation进行属性验证,......
  • 2.WPF中控件类之间的继承关系
    在WPF中所有的控件都是继承DispatcherObject类,可以说在wpf中DispatcherObject是所有控件类的基类,而DispatcherObject却继承Object,而它所在的程序集是在WindowsBase.dll里。看一张图,wpf控件继承关系图 1.Shape类形状控件是WPF一大系列控件。WPF所有的形状控件都继承于Shape基......
  • Vue模板语法——数据绑定指令
    一、数据绑定指令v-text填充纯文本相比插值表达式更加简洁v-html填充HTML片段存在安全问题本网站内部数据可以使用,来自第三方的数据不可以用v-pre填充原始信息显示原始信息,跳过编译过程(分析编译过程)二、v-text填充纯文本v-text用法在需填充的标签中添加......
  • Vue模板语法——v-model 双向数据绑定
    双向数据绑定单向数据绑定是什么?数据模型(Module)和视图(View)之间的单向绑定。需要我们先写好模板,然后把模板和数据(可能来自后台)整合到一起形成HTML代码,然后把这段HTML代码插入到文档流里面。简单的来说就是DOM操作html元素。单向数据绑定的缺点:一旦HTML代码生成好后,就没有办......
  • Vue模板语法——v-on 事件绑定
    一、v-on事件绑定v-on指令用于绑定事件v-on用法转=>最底层的技术渣--Vue基础语法之v-on转=>一瓶怡宝矿泉水--v-on指令直接绑定事件:注意:绑定的事件是对应的方法不是定义在data里面,而是定义在vue实例的methods里绑定的函数可直接绑定函数名——fun,也可以直接调用......
  • C# 动态对象 灵活数据绑定
    //当不想创建类,或者这个类的字段是动态变化的(不确定有多少字段)//可以考虑动态对象,方便好用//此处示例是用DataGrid用的数据源动态绑定ObservableCollection<dynamic>dataSource=newObservableCollection<dynamic>();//创建动态对象dynamicdynamicObject=newExpandoObject(......
  • 大文件分片上传demo,前端基于Uppy,
    实现分片上传并且支持断点续传需要基于TusTus是一种开放协议,用于基于HTTP构建的可恢复上传。这意味着意外关闭选项卡或失去连接,让您继续,对于实例,您的10GB上传,而不是重新开始。后端后端变化挺大的,你需要将你的服务器变得支持Tus,刚好官方提供了对应的插件(Java后台、php后......