WPF Binding 绑定

绑定是 wpf 开发中的精髓,有绑定才有所谓的数据驱动。

1 . 背景

目前 wpf 界面可视化的控件,继承关系如下,
在这里插入图片描述

控件的数据绑定,基本上都要借助于 FrameworkElement 的 DataContext 属性。

只有先设置了控件的 DataContext 属性,再设置绑定才能生效(TemplateBinding、使用 RelativeSource、后台 new Binding、静态资源等特殊情况另外讨论)。

2. 绑定的参与对象

绑定过程涉及到两个重要的对象

  1. 绑定目标

数据源绑定到的 依赖属性,只有依赖属性才能作为绑定目标。例如 TextBlock.TextPropertyItemsControl.ItemsSourceProperty

不是只有控件才有依赖属性,普通 CLR 类也可以包括依赖属性。

  1. 绑定源

依赖属性绑定的数据源,例如类中的 属性、界面中的 资源 等。

3. 使用 DataContext 的数据绑定

定义一个包含 2 个只读属性的类型,

public class SampleViewModel
{
    public string Title { get; }
    public int Count { get; }

    public SampleViewModel()
    {
        Title = "Hello~";
        Count = 100;
    }
}

界面以 UserControl 为例,在构造函数中设置整个界面的 DataContext。

DataContext 会自动从父类向子类传递,子元素也可重新设置 DataContext 属性为其它值。

设置界面控件的 DataContext,

public partial class BindingView : UserControl
{
    public BindingView()
    {
        InitializeComponent();

        DataContext = new SampleViewModel();
    }
}

3.1 在前端代码中设置绑定

<UserControl
    x:Class="WpfApp1.Views.BindingView"
    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:viewModels="clr-namespace:WpfApp1.ViewModels"
    d:DataContext="{d:DesignInstance viewModels:SampleViewModel}"
    d:DesignHeight="450"
    d:DesignWidth="800"
    mc:Ignorable="d">
    <Grid Background="DeepPink" Width="100" Height="100">
        <StackPanel>
            <TextBlock Margin="4" Text="{Binding Title}" />
            <TextBlock Margin="4" Text="{Binding Count}" />
        </StackPanel>
    </Grid>
</UserControl>

显示结果,
在这里插入图片描述

3.2 在后端代码中设置绑定

将前端绑定代码去掉,并设置控件的 x:Name 属性值,

<Grid Background="DeepPink" Width="100" Height="100">
    <StackPanel>
        <TextBlock x:Name="Text1" Margin="4" />
        <TextBlock x:Name="Text2" Margin="4" />
    </StackPanel>
</Grid>

在后端中手动绑定,

public BindingView()
{
    InitializeComponent();

    DataContext = new SampleViewModel();

	//后台代码绑定
    var binding1 = new Binding("Title")
    {
        Source = this.DataContext,
    };
    var binding2 = new Binding("Count")
    {
        Source = this.DataContext,
    };

    this.Text1.SetBinding(TextBlock.TextProperty, binding1);
    this.Text2.SetBinding(TextBlock.TextProperty, binding2);
}

同样可以实现绑定。

上面的例子,绑定参与对象是:

绑定目标:TextBlock.TextProperty 依赖属性
绑定源:this.DataContext 即 SampleViewModel 实例
绑定路径:TitleCount

也可以简单点说,

绑定目标:TextBlock.TextProperty 依赖属性
绑定源: SampleViewModel 实例的 TitleCount 属性

一般推荐直接在前端绑定,有特殊业务需求才会在后台动态绑定。

4. 不使用 DataContext 的数据绑定

不设置 DataContext 的情况下, 也可以使用绑定,比如绑定界面控件或控件的属性、页面资源等。

xmlns:system="clr-namespace:System;assembly=mscorlib"
<UserControl.Resources>
    <system:String x:Key="Content">我是静态资源</system:String>
</UserControl.Resources>

<Grid Background="DeepPink" Width="100" Height="100">
    <StackPanel>
        <!-- 绑定 CLR 属性 -->
        <TextBlock x:Name="Text1" Margin="4" Text="{Binding Title}" />

        <!-- 绑定控件 -->
        <TextBlock x:Name="Text2" Margin="4" Text="" Tag="{Binding ElementName=Text1}" />

        <!-- 绑定控件属性 -->
        <TextBlock x:Name="Text3" Margin="4" Text="{Binding ElementName=Text2, Path=Tag.Text}" />

        <!-- 绑定页面资源 -->
        <TextBlock x:Name="Text4" Margin="4" Text="{Binding ., Source={StaticResource Content}}" />
    </StackPanel>
</Grid>

显示,
在这里插入图片描述

总结,

绑定目标必须是依赖属性,绑定源可以是依赖属性也可以是普通 CLR 属性、静态资源。

5. 绑定模式

以上演示的是简单的数据绑定,仅仅是用来显示,如果我还想把界面数据传回数据源,该如何操作?

以 CheckBox 勾选框为例,

<Grid Background="DeepPink" Width="100" Height="100">
    <CheckBox Margin="4" Content="Mark" IsChecked="{Binding Mark}" />
</Grid>

在这里插入图片描述
绑定源:

public class BindingModeViewModel
{
    private bool _mark = true; //默认勾选
    public bool Mark
    {
        get => _mark;
        set
        {
            if (_mark != value)
            {
                _mark = value;
                Console.WriteLine($"Mark changed to {_mark}");
            }
        }
    }
}

取消勾选并再次勾选,结果,

Mark changed to False
Mark changed to True

接下来对控件绑定做一些改动,

<CheckBox Margin="4" Content="Mark" IsChecked="{Binding Mark, Mode=OneWay}" />

发现操作 CheckBox,不再会打印信息了。那是因为设置绑定模式 Mode=OnWay 就表示只支持从数据源到界面目标的单向绑定。

绑定模式有如下几种,

public enum BindingMode
{
  TwoWay, //双向绑定
  OneWay, //单向绑定:从数据源到目标
  OneTime, //单次绑定:只绑定一次
  OneWayToSource, //单向绑定:从目标到数据源
  Default, //默认绑定:根据数据源和目标自动决定
}

所以,这里我把 Mode 设置为 TwoWay、OneWayToSource、Default(不设置就是默认绑定)都可以打印出来信息。

到此,演示了:

  1. 从数据源获取数据到目标(如 TextBlock)
  2. 从目标设置数据到数据源(如 CheckBox)

那如果,我要从数据源设置动态数据到目标,该如何操作?这就要用到一个接口。

6. INotifyPropertyChanged 接口

public interface INotifyPropertyChanged
{
  event PropertyChangedEventHandler PropertyChanged;
}

INotifyPropertyChanged 是一个接口,用于在属性值发生变化时通知绑定的客户端。在 WPF 应用程序中,这通常用于实现数据绑定,使得 UI 元素能够在源数据动态变化时自动更新。

简单实现,

public class MyNotifyClass : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    public void RaisePropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

改动一下数据源,

public class BindingModeViewModel : MyNotifyClass
{
    private bool _mark = true;
    private string _printMessage;
    
    public bool Mark
    {
        get => _mark;
        set
        {
            if (_mark != value)
            {
                _mark = value;

                PrintMessage = $"Mark changed to {_mark}";
            }
        }
    }

    public string PrintMessage
    {
        get => _printMessage;
        set
        {
            _printMessage = value;
            RaisePropertyChanged(nameof(PrintMessage));
        }
    }
}

调整一下界面,

<Grid Background="DeepPink" Width="200" Height="100">
    <StackPanel>
        <CheckBox Margin="4" Content="Mark" IsChecked="{Binding Mark}" />
        <TextBlock Margin="4" Text="{Binding PrintMessage}" />
    </StackPanel>
</Grid>

点击 CheckBox , TextBlock 会动态显示信息。
在这里插入图片描述
CheckBox 只是通过绑定属性,利用属性 Set 方式触发数据源变化。

如果要像按钮 Button 那样,直接通过方法来触发数据源变化,如果操作呢?就要用到命令绑定。

7. 命令绑定

在 WPF 中,命令绑定是 MVVM 模式的核心部分之一,它允许开发者将视图中的事件如按钮点击与 ViewModel 中的命令逻辑相绑定。这样,当用户界面上的按钮被点击时,可以触发 ViewModel 中定义的命令执行相应的操作,而不需要在代码后面编写事件处理函数。

以按钮 Button 控件为例,按钮的 Command 属性类型是一个 ICommand 接口类型,

public ICommand Command
{
  get => (ICommand) this.GetValue(ButtonBase.CommandProperty);
  set => this.SetValue(ButtonBase.CommandProperty, (object) value);
}
  public interface ICommand
  {
    /// <summary>当出现影响是否应执行该命令的更改时发生。</summary>
    event EventHandler CanExecuteChanged;

    /// <summary>定义确定此命令是否可在其当前状态下执行的方法。</summary>
    /// <param name="parameter">此命令使用的数据。  如果此命令不需要传递数据,则该对象可以设置为 <see langword="null" />。</param>
    /// <returns>如果可执行此命令,则为 <see langword="true" />;否则为 <see langword="false" />。</returns>
    bool CanExecute(object parameter);

    /// <summary>定义在调用此命令时要调用的方法。</summary>
    /// <param name="parameter">此命令使用的数据。  如果此命令不需要传递数据,则该对象可以设置为 <see langword="null" />。</param>
    void Execute(object parameter);
  }

因此我们只要实现一下 ICommand 接口即可使用自己的命令。

例如,

public class MyCommand : ICommand
{
    private readonly Action<object> _executeAction;
    private readonly Func<object, bool> _canExecuteFunc;

    public event EventHandler CanExecuteChanged;

    public MyCommand(Action<object> executeAction, Func<object, bool> canExecuteFunc = null)
    {
        _executeAction = executeAction;
        _canExecuteFunc = canExecuteFunc;
    }

    public void Execute(object parameter)
    {
        _executeAction?.Invoke(parameter);
    }

    public bool CanExecute(object parameter)
    {
        return _canExecuteFunc == null || _canExecuteFunc(parameter);
    }
    
	public void RaiseCanExecute()
	{
	    CanExecuteChanged?.Invoke(this, EventArgs.Empty);
	}
}

在数据源增加相应的命令属性,

public class BindingModeViewModel : MyNotifyClass
{
    private bool _mark = true;
    private string _printMessage;
    public bool Mark
    {
        get => _mark;
        set
        {
            if (_mark != value)
            {
                _mark = value;

                PrintMessage = $"Mark changed to {_mark}";

                //更新按钮可点击状态
                PrintCommand.RaiseCanExecute();
            }
        }
    }

    public string PrintMessage
    {
        get => _printMessage;
        set
        {
            _printMessage = value;
            RaisePropertyChanged(nameof(PrintMessage));
        }
    }

    public MyCommand PrintCommand { get; }

    public BindingModeViewModel()
    {
        PrintCommand = new MyCommand(Print, CanPrint);
    }

    private void Print(object obj)
    {
        PrintMessage = "This is Button Print.";
    }

    private bool CanPrint(object arg)
    {
        return _mark;
    }
}

界面增加一个按钮,

<Grid Background="DeepPink" Width="200" Height="100">
    <StackPanel>
        <CheckBox Margin="4" Content="Mark" IsChecked="{Binding Mark}" />
        <TextBlock Margin="4" Text="{Binding PrintMessage}" />
        <Button Content="Print" Width="80" Height="32" Command="{Binding PrintCommand}" />
    </StackPanel>
</Grid>

点击按钮,命令调用成功,
在这里插入图片描述
取消勾选, 按钮变灰,不可执行命令,
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

datasets笔记:两种数据集对象

Datasets 提供两种数据集对象&#xff1a;Dataset 和 ✨ IterableDataset ✨。 Dataset 提供快速随机访问数据集中的行&#xff0c;并支持内存映射&#xff0c;因此即使加载大型数据集也只需较少的内存。IterableDataset 适用于超大数据集&#xff0c;甚至无法完全下载到磁盘或…

【Python】【数据分析】深入探索 Python 数据可视化:Seaborn 可视化库详解

目录 引言一、Seaborn 简介二、安装 Seaborn三、Seaborn 的基本图形3.1 散点图&#xff08;Scatter Plot&#xff09;3.2 线图&#xff08;Line Plot&#xff09;3.3 条形图&#xff08;Bar Plot&#xff09;3.4 箱型图&#xff08;Box Plot&#xff09;3.5 小提琴图&#xff0…

如何构建机器学习数据集

1. 常见数据集网站 论文开源代码/数据集&#xff1a;Paperswithcodes 竞赛数据集&#xff1a;Kaggle Dataset 数据集搜索工具&#xff1a;Google Dataset Search HuggingFace&#xff1a;Hugging Face 魔塔&#xff1a;Model Scope 开源工具包自带&#xff1a;Pytorch, tensor…

EMQX V5 使用API 密钥将客户端踢下线

在我们选用开源的EMQX作为mqtt broker&#xff0c;我们可能会考虑先让客户端连接mqtt broker成功&#xff0c;再去校验客户端的有效性&#xff0c;当该客户端认证失败&#xff0c;再将其踢下线。例如&#xff1a;物联网设备连接云平台时&#xff0c;我们会将PK、PS提前烧录到设…

Ubuntu搭建ES8集群+加密通讯+https访问

目录 写在前面 一、前期准备 1. 创建用户和用户组 2. 修改limits.conf文件 3. 关闭操作系统swap功能 4. 调整mmap上限 二、安装ES 1.下载ES 2.配置集群间安全访问证书密钥 3.配置elasticsearch.yml 4.修改jvm.options 5.启动ES服务 6.修改密码 7.启用外部ht…

电子电气架构---基于PREEvision的线束设计工作流程优化

我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 所谓鸡汤,要么蛊惑你认命,要么怂恿你拼命,但都是回避问题的根源,以现象替代逻辑,以情绪代替思考,把消极接受现实的懦弱,伪装成乐观面对不幸的…

【活动邀请·深圳】深圳COC社区 深圳 AWS UG 2024 re:Invent re:Cap

re:Invent 是全球云计算领域的顶级盛会&#xff0c;每年都会吸引来自世界各地的技术领袖、创新者和实践者汇聚一堂&#xff0c;分享最新的技术成果和创新实践&#xff0c;深圳 UG 作为亚马逊云科技技术社区的重要组成部分&#xff0c;将借助 re:Invent 的东风&#xff0c;举办此…

从零搭建纯前端飞机大战游戏(附源码)

目录 前言 一、游戏概览与技术选型 二、HTML 结构搭建和CSS样式美化 三、JavaScript 核心逻辑 1.变量声明与初始化 2.玩家飞机控制函数 3.射击与子弹管理函数 4.敌机生成与管理函数 5.碰撞检测与得分更新函数 6.游戏主循环与启动函数 四、完整代码 前言 在前端开发的…

【MAC】深入浅出 Homebrew 下 Nginx 的安装与配置指南

硬件&#xff1a;Apple M4 Pro 16寸 系统&#xff1a; macos Sonoma 15.1.1 Nginx 是一款高性能的 Web 服务器和反向代理服务器&#xff0c;广泛应用于全球各地的网站和企业应用中。本文将详细介绍如何在 macOS 环境下使用 Homebrew 安装、启动、管理以及优化配置 Nginx&#x…

简单了解图注意力机制

简单了解图注意力机制 如果对传统的图匹配的聚合方式进行创新的话&#xff0c;也就是对h这一个节点的聚合方式进行创新。 h i ( l 1 ) Norm ⁡ ( σ ( h i ( l ) α ∥ h i ( l ) ∥ m i ( l ) ∥ m i ( l ) ∥ ) ) , \mathbf{h}_{i}^{(l1)}\operatorname{Norm}\left(\sigm…

aosp15 - App冷启动

纸上得来终觉浅&#xff0c;绝知此事要躬行。 —— [宋]陆游 基于aosp_cf_x86_64_phone-trunk_staging-eng &#xff0c; 下面是具体断点位置。 第一部分&#xff0c;桌面launcher进程 com.android.launcher3.touch.ItemClickHandler onClickonClickAppShortcutstartAppShor…

arcgisPro相接多个面要素转出为完整独立线要素

1、使用【面转线】工具&#xff0c;并取消勾选“识别和存储面邻域信息”&#xff0c;如下&#xff1a; 2、得到的线要素&#xff0c;如下&#xff1a;

树莓派4B 搭建openwrt内置超多插件docker,nas等等使用教程

刷入固件 (想要固件的加我vx wyy7293) bleachwrt-plus-20241112-bcm27xx-bcm2711-rpi-4-squashfs-factory.img上电,并且把网线两头分别插在pi网口上和电脑的网口上(电脑必须断网) 等待网口灯亮,进入192.168.1.1 默认账密 root password 进入系统后更改openwrt的网关地址相关…

Java开发经验——数据库开发经验

摘要 本文主要介绍了Java开发中的数据库操作规范&#xff0c;包括数据库建表规范、索引规约、SQL规范和ORM规约。强调了在数据库设计和操作中应遵循的最佳实践&#xff0c;如字段命名、数据类型选择、索引创建、SQL语句编写和ORM映射&#xff0c;旨在提高数据库操作的性能和安…

springboot462学生心理压力咨询评判(论文+源码)_kaic

摘 要 传统办法管理信息首先需要花费的时间比较多&#xff0c;其次数据出错率比较高&#xff0c;而且对错误的数据进行更改也比较困难&#xff0c;最后&#xff0c;检索数据费事费力。因此&#xff0c;在计算机上安装学生心理压力咨询评判软件来发挥其高效地信息处理的作用&am…

练习题:一维数组

练习题 第一题 键盘录入一组数列&#xff0c;利用冒泡排序将数据由大到小排序 代码 #include <stdio.h>int arr_home01() {int arr[10];int i,j,temp;printf("请输入10个测试整数&#xff1a;\n");int len sizeof(arr) / sizeof(arr[0]);for(i 0;i < …

基于LR/GNB/SVM/KNN/DT算法的鸢尾花分类和K-Means算法的聚类分析

花瓣轮廓&#xff1a; 分类与聚类 使用各种模型进行鸢尾花分类和聚类 1. | 介绍 &#x1f44b; &#x1f914; 数据集问题 鸢尾花分类项目是使用简单数据集实现机器学习模型的实际演示。数据集本身包含有关花瓣和萼片大小的信息&#xff0c;包括鸢尾属物种。通过分析鸢尾花的…

创新驱动医疗变革:SSM+Vue 医院预约挂号系统的设计与实践

1系统概述 1.1 研究背景 随着计算机技术的发展以及计算机网络的逐渐普及&#xff0c;互联网成为人们查找信息的重要场所&#xff0c;二十一世纪是信息的时代&#xff0c;所以信息的管理显得特别重要。因此&#xff0c;使用计算机来管理医院预约挂号系统的相关信息成为必然。开发…

【Java】HashMap的简单教程

HashMap 是 Java 中最常用的数据结构之一&#xff0c;属于 java.util 包&#xff0c;主要用于以键值对&#xff08;key-value&#xff09;形式存储数据。 基本用法 1.创建 HashMap 使用泛型&#xff0c;存储键值对。 import java.util.HashMap;HashMap<KeyType, ValueTy…

windwos defender实现白名单效果(除了指定应用或端口其它一律禁止)禁止服务器上网

一、应用场景说明 当我们的一台windows服务器中毒&#xff0c;变成别人肉鸡&#xff0c;不断向外请示非法网站或攻击其它服务器。 要彻底清除相关木马或病毒往往需要的时间比较长&#xff0c;比较有效的方法是禁止服务器主动向外发包除了网站端口和远程程序除外。 其实这就是一…