WPF中DataContext的绑定技巧

故里21302023-10-10 12:46

先看效果：

上面的绑定值都是我们自定义的属性，有了以上的提示，那么我们可以轻松绑定字段，再也不用担心错误了。附带源码。

目录

1.建立mvvm项目

2.cs后台使用DataContext绑定

3.xaml前台使用DataContext绑定

4.xaml前台使用DataContext单例模式绑定

1.建立mvvm项目

1.首先建立一个项目，采用mvvm模式，其中MainWindow.xaml相当于View层，其余各层都比较简单。

2.BindingBase.cs

cs 复制代码 
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Runtime.CompilerServices;
using System.Text;
using System.Threading.Tasks;

namespace WpfDataContextDemo.Common
{
    public class BindingBase : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;
        //protected virtual void OnPropertyChanged(string propertyName)
        protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = "")//此处使用特性
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

3.StudentInfo.cs

cs 复制代码 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using WpfDataContextDemo.Common;

namespace WpfDataContextDemo.Model
{
    public class StudentInfo : BindingBase
    {
        private int id;

        public int Id
        {
            get { return id; }
            set { id = value; OnPropertyChanged(); }
        }

        private string name;

        public string Name
        {
            get { return name; }
            set { name = value; OnPropertyChanged(); }
        }

        private int age;

        public int Age
        {
            get { return age; }
            set { age = value; OnPropertyChanged(); }
        }
        private bool b;

        public bool B
        {
            get { return b; }
            set { b = value; OnPropertyChanged(); }
        }
    }
}

4.MainWindowViewModel.cs

cs 复制代码 
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using WpfDataContextDemo.Model;

namespace WpfDataContextDemo.ViewModel
{
    public class MainWindowViewModel
    {
        public ObservableCollection<StudentInfo> Infos { get; set; }
        public MainWindowViewModel()
        {
            Infos = new ObservableCollection<StudentInfo>()
            {
                new StudentInfo(){ Id=1, Age=11, Name="Tom",B=false},
                new StudentInfo(){ Id=2, Age=12, Name="Darren",B=false},
                new StudentInfo(){ Id=3, Age=13, Name="Jacky",B=false},
                new StudentInfo(){ Id=4, Age=14, Name="Andy",B=false}
            };
        }
    }
}

2.cs后台使用DataContext绑定

1.MainWindow.xaml.cs

只有一句话最重要

cs 复制代码 
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 WpfDataContextDemo.ViewModel;

namespace WpfDataContextDemo
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            this.DataContext = new MainWindowViewModel();
        }
    }
}

2.其中MainWindow.xaml

cs 复制代码 
<Window x:Class="WpfDataContextDemo.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:WpfDataContextDemo"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <StackPanel Height="295" HorizontalAlignment="Left" Margin="10,10,0,0" Name="stackPanel1" VerticalAlignment="Top" Width="427">
            <TextBlock  Text="{Binding Infos.Count  }" Margin="5" />
            <TextBlock Height="23" Name="textBlock1" Text="学员编号:" />
            <TextBox Height="23" Name="txtStudentId"  Width="301" HorizontalAlignment="Left"   />
            <TextBlock Height="23" Name="textBlock2" Text="学员列表:" />
            <ListBox Height="156" Name="lbStudent" Width="305" HorizontalAlignment="Left" ItemsSource="{Binding   Infos}">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Name="stackPanel2" Orientation="Horizontal">
                            <TextBlock  Text="{Binding Id  ,Mode=TwoWay}" Margin="5" Background="Red"/>
                            <TextBlock x:Name="aa" Text="{Binding Name,Mode=TwoWay, UpdateSourceTrigger=Explicit}" Margin="5"/>
                            <TextBlock  Text="{Binding  Age,Mode=TwoWay}" Margin="5"/>
                            <TextBlock  Text="{Binding B,Mode=TwoWay}" Margin="5"/>
                        </StackPanel>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
        </StackPanel>
    </Grid>
</Window>

此时，我们输入Binding的时候，不会显示Id，Name这些字段。

3.xaml前台使用DataContext绑定

1.先屏蔽后台cs的代码

2.前台MainWindow.xaml

cs 复制代码 
<Window x:Class="WpfDataContextDemo.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:WpfDataContextDemo" 
        xmlns:local1="clr-namespace:WpfDataContextDemo.ViewModel"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Window.DataContext>
        <local1:MainWindowViewModel />
    </Window.DataContext>
    <Grid>
        <StackPanel Height="295" HorizontalAlignment="Left" Margin="10,10,0,0" Name="stackPanel1" VerticalAlignment="Top" Width="427">
            <TextBlock  Text="{Binding Infos.Count  }" Margin="5" />
            <TextBlock Height="23" Name="textBlock1" Text="学员编号:" />
            <TextBox Height="23" Name="txtStudentId"  Width="301" HorizontalAlignment="Left"   />
            <TextBlock Height="23" Name="textBlock2" Text="学员列表:" />
            <ListBox Height="156" Name="lbStudent" Width="305" HorizontalAlignment="Left" ItemsSource="{Binding  in}">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Name="stackPanel2" Orientation="Horizontal">
                            <TextBlock  Text="{Binding Id  ,Mode=TwoWay}" Margin="5" Background="Red"/>
                            <TextBlock x:Name="aa" Text="{Binding Name,Mode=TwoWay, UpdateSourceTrigger=Explicit}" Margin="5"/>
                            <TextBlock  Text="{Binding  Age,Mode=TwoWay}" Margin="5"/>
                            <TextBlock  Text="{Binding B,Mode=TwoWay}" Margin="5"/>
                        </StackPanel>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
        </StackPanel>
    </Grid>
</Window>

3.最主要的是，可以点击出来，非常的清晰明了

4.xaml前台使用DataContext单例模式绑定

1.MainWindowViewModel.cs

cs 复制代码 
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using WpfDataContextDemo.Model;

namespace WpfDataContextDemo.ViewModel
{
    public class MainWindowViewModel
    {
        //public ObservableCollection<StudentInfo> Infos { get; set; }
        //public MainWindowViewModel()
        //{
        //    Infos = new ObservableCollection<StudentInfo>()
        //    {
        //        new StudentInfo(){ Id=1, Age=11, Name="Tom",B=false},
        //        new StudentInfo(){ Id=2, Age=12, Name="Darren",B=false},
        //        new StudentInfo(){ Id=3, Age=13, Name="Jacky",B=false},
        //        new StudentInfo(){ Id=4, Age=14, Name="Andy",B=false}
        //    };
        //}

        private static readonly MainWindowViewModel instance = new MainWindowViewModel();
        public static MainWindowViewModel Instance
        {
            get { return instance; }
        }
        public ObservableCollection<StudentInfo> Infos { get; set; }
        public MainWindowViewModel()
        {
            Infos = new ObservableCollection<StudentInfo>()
                {
                    new StudentInfo(){ Id=1, Age=11, Name="Tom",B=false},
                    new StudentInfo(){ Id=2, Age=12, Name="Darren",B=false},
                    new StudentInfo(){ Id=3, Age=13, Name="Jacky",B=false},
                    new StudentInfo(){ Id=4, Age=14, Name="Andy",B=false}
                };
        }
    }
}

2.MainWindow.xaml

cs 复制代码 
<Window x:Class="WpfDataContextDemo.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:WpfDataContextDemo" 
        xmlns:local1="clr-namespace:WpfDataContextDemo.ViewModel"
        mc:Ignorable="d"
        DataContext="{x:Static local1:MainWindowViewModel.Instance}"
        Title="MainWindow" Height="450" Width="800">
    <!--<Window.DataContext>
        <local1:MainWindowViewModel />
    </Window.DataContext>-->
    <Grid>
        <StackPanel Height="295" HorizontalAlignment="Left" Margin="10,10,0,0" Name="stackPanel1" VerticalAlignment="Top" Width="427">
            <TextBlock  Text="{Binding Infos.Count  }" Margin="5" />
            <TextBlock Height="23" Name="textBlock1" Text="学员编号:" />
            <TextBox Height="23" Name="txtStudentId"  Width="301" HorizontalAlignment="Left"   />
            <TextBlock Height="23" Name="textBlock2" Text="学员列表:" />
            <ListBox Height="156" Name="lbStudent" Width="305" HorizontalAlignment="Left" ItemsSource="{Binding  Infos}">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Name="stackPanel2" Orientation="Horizontal">
                            <TextBlock  Text="{Binding Id  ,Mode=TwoWay}" Margin="5" Background="Red"/>
                            <TextBlock x:Name="aa" Text="{Binding Name ,Mode=TwoWay, UpdateSourceTrigger=Explicit}" Margin="5"/>
                            <TextBlock  Text="{Binding  Age,Mode=TwoWay}" Margin="5"/>
                            <TextBlock  Text="{Binding B,Mode=TwoWay}" Margin="5"/>
                        </StackPanel>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
        </StackPanel>
    </Grid>
</Window>

源码：https://download.csdn.net/download/u012563853/88407490

来源：WPF中DataContext的绑定技巧_故里2130的博客-CSDN博客

相关推荐
唐青枫12 小时前
别只会看日志：C#.NET SOS 调试扩展从 Dump 到内存泄漏排查
c#·.net
yswenli19 小时前
基于C#开发网站视频嗅探下载工具——BrowserVideoGrabber
c#·videodownload·webvideodownload·videograbber
Lost of 程序猿19 小时前
M2 实战：询价与采购订单聚合落地——跨聚合一致性、领域事件与 Outbox
开发语言·c#·asp.net·.net
Polevne21 小时前
C# GRPC 一元与双向流
linux·算法·c#
clz131452121 小时前
如何设计一个优雅可靠的金融级联机接口
wpf
闲云自留地2 天前
云平台存储管理员：Cinder 创建挂载卷 + Swift 分布式存储原理
分布式·wpf·swift
XiaoZhenHua982 天前
C#工业机器视觉Recipe配方系统设计：多型号、多相机、多工位参数如何统一管理
c#·软件架构·机器视觉·工业自动化·工业软件·recipe
fujisheng6612 天前
FUI 导航实践：拆开 Layer、History、Coverage 与 Cache 的组合语义
c#·unity3d
淡海水2 天前
10-05-高级-模式匹配-CSharp如何改变与数据结构的交互方式
数据结构·算法·c#·模式匹配
XiaoZhenHua982 天前
C# WinForms + 西门子S7 + SQLite + EPPlus生产数据采集系统架构设计
系统架构·sqlite·c#
热门推荐
01国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）02蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接03微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新04历年考研数学一、数学二、数学三真题试卷及答案PDF05GitHub 镜像站点062026 国产 AI 大模型横评：DeepSeek、通义千问、Kimi、文心一言、星火、豆包谁更能打？07【一等奖版】2026 国赛 A题 药材的烘干问题08人工智能（AI）发展史：详细里程碑09ZCode 周末送额度活动开启：3 亿 Token 免费领取10Agnes AI 免费 API 接入指南：文本、生图、生视频，一套接口全免费