《WPF》--DataContext数据双向绑定

最新推荐文章于 2026-05-06 20:07:37 发布
原创 最新推荐文章于 2026-05-06 20:07:37 发布 · 5.6k 阅读 · 9 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#wpf #c# #ui
本文介绍了WPF中数据绑定的概念，包括前端和后台设置DataContext的方法，以及数据双向绑定的最佳实践。接着，文章讨论了Fody库在解决数据变化不更新视图问题中的作用，并提供了安装和配置教程。最后，通过一个移动方块的案例，展示了如何结合数据绑定和键盘事件实现动态交互效果。

文章目录


提示：以下是本篇文章正文内容，下面案例可供参考

一、数据绑定

1）在FrameworkElement类下有两个重要的属性。

  • Resources：获取或设置本地定义的资源字典。
  • DataContext：获取或设置元素参与数据绑定时的数据上下文。

利用这两个属性，可以实现UI数据直接与后台的类进行绑定

2）前端UI界面属性值等动态与后台绑定的方式有多种，此处列出后台设置DataContext以及前端设置DataContext的两种方式，以及数据双向绑定的最佳实践

前端设置DataContext

纯前端的方式好处在于，编译一下，就可以在设计阶段看到效果。
1）先定义好我们的类

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace WpfApp2.entity
{
    public class MyButtton
    {
        public string color { get; set; } = "Red";
    }
}

2）在前端按照步骤引入

<Window x:Class="WpfApp2.login"
        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:WpfApp2"
        xmlns:btn="clr-namespace:WpfApp2.entity"
        mc:Ignorable="d"
        Title="登录页" Height="450" Width="800"
        >
    <Grid Name="g">
        <!-- 1.声明资源位置 xmlns:btn="clr-namespace:WpfApp2.entity" -->
        <!-- 2.绑定类资源，key是别名，value是类 -->
        <Grid.Resources>
            <btn:MyButtton x:Key="myDatasource"/>
        </Grid.Resources>
        
        <!-- 3.将绑定的资源加入到当前上下文（加入后即可使用） -->
        <Grid.DataContext>
            <Binding Source="{StaticResource myDatasource}"/>   
        </Grid.DataContext>
        
        <!-- 4.使用属性，直接使用类的属性名即可 -->
        <Button Background="{Binding Path=color}" Width="100" Height="50" Click="Button_Click_1">按钮</Button>

    </Grid>
</Window>

后台设置DataContext

在设计阶段是看不到效果的，但是灵活性更高，属性值不用写死
1)定义一个类

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace WpfApp2.entity
{
    public class Mytitle
    {
        public string Title { get; set; }
        public string color { get; set; }
    }
}

2）在当前窗口加载时，进行绑定DataContext

private void Window_Loaded(object sender, RoutedEventArgs e)
{
    this.DataContext = new Mytitle() 
    {
        t="我是标题",
        color="Red"
    };
}

3)前端

<Window x:Class="WpfApp2.login"
        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:WpfApp2"
        d:DesignHeight="450" d:DesignWidth="800"
        Loaded="Window_Loaded"
        mc:Ignorable="d"
        >
    <Grid>
        <Label Content="{Binding Path=t}"></Label>
    </Grid>
</Window>

二、Fody

在应用中，会很快发现一个问题，数据绑定只有一次，后续我们的数据变化，并不会引起我们视图的变化，这时候需要引入一个轮子，那就是Fody。Fody包会自动将数据和绑定的UI进行同步刷新，来达到我们的要求

安装

1）引入下面三个包
在这里插入图片描述
2)添加FodyWeavers.xml文件
在这里插入图片描述
配置信息如下：

<?xml version="1.0" encoding="utf-8"?>
<Weavers xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="FodyWeavers.xsd">
  <PropertyChanged />
</Weavers>

如果显示已经存在此文件，则从文件夹打开当前项目，显示的复制到项目里，将配置文件添加到xml中。

测试

设置一个简单布局，通过点击按钮，来使得label中数字递增
在这里插入图片描述
1）创建一个类，继承INotifyPropertyChanged，并且alt+enter进行快速实现即可

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace WpfApp3.src
{
    public class Number: INotifyPropertyChanged
    {
        public int num { get;set; }

        public event PropertyChangedEventHandler PropertyChanged;
    }
}

2）在loaded事件中，添加到DataContext中，在按钮事件中进行++操作

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using WpfApp3.src;

namespace WpfApp3
{
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private static Number number = new Number()
        {
            num = 0,
        };

        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            this.DataContext = number;
        }

        private void addd(object sender, RoutedEventArgs e)
        {
            number.num++;
        }
    }

}

3）前端UI直接使用Binding进行绑定

<Window x:Class="WpfApp3.MainWindow"
        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:WpfApp3"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800"
        Loaded="Window_Loaded"
        >
    <Grid>
        <Label VerticalAlignment="Top" HorizontalAlignment="Left" Width="100" Height="50" Background="Red"
               Content="{Binding Path=num}"></Label>
        <Button Content="button" Width="100" Height="100" Background="Gray" Click="addd"></Button>
    </Grid>
</Window>

三、案例

移动方块

需求：一个白色的方块，通过上下左右键进行操控方块的移动，到达顶部后自动回到当前行或列的起点。
在这里插入图片描述
1)编写数据绑定类

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace WpfApp3.src
{
    public class Number: INotifyPropertyChanged
    {
        public int num { get;set; }//用不到这个
        public int rowNum { get;set; }
        public int colNum { get;set; }

        public event PropertyChangedEventHandler PropertyChanged;
    }
}

2）页面布局和设置响应事件，千万注意：窗口默认不支持keydown,要开启可焦点功能，然后在窗体初始化时，进行当前窗体的直接聚焦。

<Page x:Class="WpfApp3.Page1"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      xmlns:local="clr-namespace:WpfApp3"
      mc:Ignorable="d" 
      d:DesignHeight="450" d:DesignWidth="800"
      Loaded="Page_Loaded"  
      Title="Page1" KeyDown="Grid_KeyDown" Focusable="True">

    <Grid ShowGridLines="True" Background="Green">
        <Grid.ColumnDefinitions>
            <ColumnDefinition>
            </ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Border Grid.Row="{Binding Path=rowNum}" Grid.Column="{Binding Path=colNum}" Background="White"></Border>
    </Grid>
</Page>

3）后台

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using WpfApp3.src;

namespace WpfApp3
{
    /// <summary>
    /// Page1.xaml 的交互逻辑
    /// </summary>
    public partial class Page1 : Page
    {
        public Page1()
        {
            InitializeComponent();
        }

        private static Number num = new Number()
        {
            rowNum = 0,
            colNum = 0,
        };

        private void Page_Loaded(object sender, RoutedEventArgs e)
        {
            this.DataContext = num;
            this.Focus();
        }

        private void Grid_KeyDown(object sender, KeyEventArgs e)
        {
            //MessageBox.Show(e.Key.ToString());
            //num.rowNum++;
            switch (e.Key)
            {
                case Key.Left:
                    num.colNum = (num.colNum +2)%3;
                    break;
                case Key.Right:
                    num.colNum = (num.colNum +1)%3;
                    break;
                case Key.Up:
                    num.rowNum = (num.rowNum +2)%3;
                    break;
                case Key.Down:
                    num.rowNum = (num.rowNum +1)%3;
                    break;
                default:
                    break;
            }
        }
    }
}
WPF基础之数据绑定
yigu4011的博客
06-26 4298
在WPF中，Binding是可以实现数据关联在一起的桥梁，有了Binding，后台可以专心处理程序与算法，前台可以专注于UI设计。控件之间的绑定：通过绑定两个控件，可以实现数据的实时同步，且不需要写后台代码。本例Slider源控件，TextBox为目标控件，通过Text="{Binding ElementName=one, Path=Value,Mode=TwoWay,FallbackValue=0,UpdateSourceTrigger=PropertyChanged}" 实现数据的双向绑定。
WPF双向绑定
ADC06的博客
04-20 2141
一．WPF双向绑定 1.1下载Mvvm配置 点击工具 NuGet ,选择中间的管理解决方案包，查询Mvvm选择MvvmLight 和MvvmLight libraries only进行安装。不能马上关闭网络，需要网络加载引用。 继承MVVM :ViewModelBase 上下文DataContext 1.2 数据库服器名字 (local) sa 本机名称 1.3 双向绑定 RaisePropertyChanged *图片用BitmapImage 普通类型用string ...
WPF 数据绑定+MVVM
最新发布
qq_60972641的博客
05-06 447
WPF数据绑定与MVVM模式在机器视觉开发中的应用 摘要：本文介绍了WPF数据绑定机制和MVVM设计模式在机器视觉软件开发中的实践应用。数据绑定通过自动同步数据源与界面元素，减少了手动更新UI的代码量，支持OneWay/TwoWay等多种绑定模式。MVVM模式将应用分为Model(业务逻辑)、View(UI呈现)和ViewModel(中间层)三层，通过双向数据流实现解耦。在机器视觉场景中，该模式可用于相机参数调整、图像实时显示和检测结果同步等功能，通过INotifyPropertyChanged实现属性变更
C# WPF入门学习主线篇（二十五）—— 单向绑定、双向绑定
weixin_56595425的博客
06-13 3157
单向绑定和双向绑定是WPF中强大的数据绑定机制，简化了数据与UI控件之间的同步。单向绑定适用于只读数据，而双向绑定则适用于可编辑的数据。通过理解和应用这些绑定模式，可以有效地提升WPF应用程序的开发效率和用户体验。
WPF中的DataContext
以梦为马 不负韶华
03-07 3004
类，这意味着所有继承自该类的控件都可以使用。是所有WPF控件都具有的一个依赖属性。提供了UI层和数据层之间的连接点。它是实现数据绑定的基础。
【上位机系列第一阶段 WPF入门到进阶】WPF基础(完整版)
12-03
该课程为上位机系列第一阶段，主要通过一些小案例讲解WPF基本知识及应用。适用于初学者，也适用于有WPF经验进行查漏补缺学习。
【WPF】聊聊WPF中INotifyPropertyChanged [TOC]
记录总结工作过往
05-08 2914
接口用于向客户端发出某一属性值已更改的通知。在应用有两种方式OneTime模式、OneWay模式和TwoWay模式。OneTime模式OneTime模式是一个初始化一次绑定。不常用。OneWay模式绑定源的每一次变化都会通知绑定目标，但是绑定目标的改变不会改变绑定源。当绑定源的数据实体类没有实现INotifyPropertyChanged接口时，当改变了数据源，发现绑定目录的UI上的相应的数据不会立即变化。TwoWay模式TwoWay。
浅谈WPF之绑定和命令
weixin_46400807的博客
07-23 1434
本文简要介绍了WPF中数据绑定和命令系统的基本用法。在数据绑定方面，重点讲解了元素绑定（通过ElementName）和DataContext绑定模式，以及绑定方向（OneWay/TwoWay等）和更新触发机制。在命令系统部分，主要说明了通过实现ICommand接口自定义命令的三种方式：基本命令类、使用Action委托的命令类和使用Func委托的命令类，并展示了前端如何绑定命令和传递参数。这些内容为WPF开发提供了基础的数据驱动UI实现方法。
[WPF]绑定应用
weixin_44545554的博客
06-27 319
绑定对象的属性：Binding对象的属性。 Converter：转换器，ElementName：绑定的源对象， FallbackValue：绑定无法返回有效值时的默认显示 Mode：绑定方式，Path：绑定方式， RelativeSource：常用于自身绑定或者数据模板中来指定绑定的源对象 Source：源对象，StringFormat：格式化表达式，UpdateSourceTrigge...
WPF DataContext
路过
08-25 9092
简介： 获取或设置元素参与数据绑定时的数据上下文。数据上下文是一种概念，允许元素从父元素继承有关用于绑定的数据源以及绑定的其他特征（如路径）的信息。此依赖属性继承属性值。如果有子元素没有通过本地值或样式建立的DataContext的其他值，则属性系统会将该值设置为已分配此值的最近父元素的DataContext值。 在 XAML 中，DataContext通常设置为Binding声明。可以使用属性元素语法或特性语法。还可以使用代码设置DataConte...
WPF中DataContext作用
weixin_41883890的博客
08-04 2106
数据绑定中使用DataContext 数据上下文，DataContext 属性是绑定的默认源，除非你特别声明另一个源。DataContext 属性没有默认源（从一开始就是 null），但是由于 DataContext 是通过控件层次结构向下继承的，因此可以为 Window 本身设置一个 DataContext，然后在所有子控件中使用它。当然，你可以使用事件的方式把所有的业务逻辑代码写到这里，但是我们采用MVVM的时候业务逻辑是与这里解耦的，数据层是DataContext，此时并没有指定。...
WPF中DataContext的绑定技巧-粉丝专栏
故里2130
12-24 2912
（关注博主后，在“粉丝专栏”，可免费阅读此文）先看效果：上面的绑定值都是我们自定义的属性，有了以上的提示，那么我们可以轻松绑定字段，再也不用担心错误了。附带源码。
WPF真入门教程17--双向数据绑定
hqwest的专栏
12-06 2300
在这里的示例，要学习一下双向绑定的模式TwoWay，和更新触发模式UpdateSourceTrigger的使用效果。这个示例是根据ListBox中的选中项，去改变TextBlock的背景色和TextBox的显示内容及背景色，也可以输入颜色类型，（注意不能输入中文，中文不认识）。代码如下(代码是接上一节的代码继续添加的)。
WPF教程（三十五）使用DataContext
热门推荐
刺猬的优雅
11-17 3万+
DataContext属性是绑定的默认源，除非你具体指定了另外一个源，就像上一章里面我们使用了ElementName属性。它由FrameworkElement类定义，大部分UI控件包括WPF窗口都继承于此类。简单地说，它允许你指定一个绑定的基。 DateContext并没有默认源(刚开始的时候是NULL)，但是它贯穿整个空间层次结构，你可以为窗口设置一个DataContext，然后在任意的子控件
WPF数据绑定之DataContext
weixin_41244604的博客
03-30 1857
获取或设置元素参与数据绑定时的数据上下文。数据上下文是一种概念，允许元素从父元素继承有关用于绑定的数据源以及绑定的其他特征（如路径）的信息。此依赖属性继承属性值。如果有子元素没有通过本地值或样式建立的的其他值，则属性系统会将该值设置为已分配此值的最近父元素的值。在XAML中，通常设置为Binding声明。可以使用属性元素语法或特性语法。还可以使用代码设置。是一种可绑定的属性，可用于在一个上下文可能绑定到另一个上下文的情况下实现。但是，如果绑定到，请注意不要创建循环绑定引用（不将绑定到其自身，因为。
WPF中的绑定知识详解（含案例源码分享）
不迁怒，不贰过。小知识，大智慧。
10-24 7249
单向绑定（OneWay Binding）：数据源的更改会自动更新目标元素，但目标元素的更改不会反向更新数据源。 双向绑定（TwoWay Binding）：数据源的更改会自动更新目标元素，同时目标元素的更改也会反向更新数据源。 单向到源绑定（OneWayToSource Binding）：只有目标元素的更改会反向更新数据源，数据源的更改不会更新目标元素。 命令绑定（Command Binding）：将命令与界面元素进行绑定，以便在用户交互时执行特定的操作。
在 WPF 中，如何实现数据的双向绑定？
Leo的博客
11-11 2453
双向绑定是一种常见的绑定方式，当数据源更新时，UI 会自动更新；同样，当 UI 中的元素（如文本框）发生改变时，数据源也会自动更新。
详细说明WPF 资源及其层级 和DataContext
weixin_42590203的博客
08-01 1267
资源通常在 XAML 中通过元素的Resources属性定义（本质是一个字典集合），也可在代码中动态添加。例如：xml-- 在 Window 中定义资源 -->-- 定义一个字符串资源 --><sys:String x:Key="appTitle">我的应用</sys:String>-- 定义一个样式资源 --></Style>每个资源需通过x:Key指定唯一标识（类似字典的键），用于后续引用。sys是命名空间别名，对应，用于定义基础类型资源。资源。
WPF学习笔记（7）数据绑定DataContext
lzt1027的博客
06-16 1287
Binding类的Source属性适合用于指定某个属性绑定的源对象，需要在每个控件上都显示指定绑定源、操作繁琐。通常用于指定某一控件的默认数据上下文，会被该控件及其所有子控件继承和使用，如果几个控件需要绑定到同一个源，使用DataContext将更加简洁。set;set;set;set;set;
WPF之设置DataContext的三种方式
m0_59871062的博客
08-27 4121
在设计时绑定，会有代码提示，不会影响运行时的数据。需要使用一或二方法绑定数据才会真的生效。如果viewmodel不在默认的命名空间中，需要先引入命名空间。缺点：在xaml中没有代码提示。3.使用d:DataContext指定。在Window初始化时设置，如下。这种方式最常见，推荐使用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值