WPF中DataContext的绑定技巧

news2024/10/1 21:40:00

先看效果:

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

目录

1.建立mvvm项目

2.cs后台使用DataContext绑定

3.xaml前台使用DataContext绑定

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


1.建立mvvm项目

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

2.BindingBase.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

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

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

只有一句话最重要

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

<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 

<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

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

<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博客

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

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

相关文章

红队专题-Cobalt strike4.5二次开发

红队专题 招募六边形战士队员原版CS反编译破解jar包反编译拔掉暗桩初始环境效果 招募六边形战士队员 一起学习 代码审计、安全开发、web攻防、逆向等。。。 私信联系 原版CS反编译破解 jar包反编译 CobaltStrike二次开发环境初探CobaltStrike 4.5原版 2022年5月1日 发布 破…

C++对象模型(2)-- 进程内存空间布局

在前面Base类的对象模型中&#xff0c;有base对象实例&#xff0c;虚函数表&#xff0c;静态变量和函数等&#xff0c;这些信息在内存中都有各自的保存位置。了解进程的内存空间布局&#xff0c;比如内存空间分成几大块&#xff0c;各种不同的数据分别保存在内存空间的哪个位置…

婚庆行业通过微信小程序开发可以实现什么功能

婚庆微信小程序是一种针对结婚人群提供一站式婚礼服务的移动应用&#xff0c;包括婚礼策划、酒店预订、婚车租赁、婚纱摄影、婚礼用品等多个方面。随着互联网技术的发展和移动设备的普及&#xff0c;婚庆微信小程序已经成为越来越多新人选择婚礼服务的重要渠道。那么&#xff0…

动态规划-杨辉三角(leetcode)

1. 题目 给定一个非负整数 numRows&#xff0c;生成「杨辉三角」的前 numRows 行。 在「杨辉三角」中&#xff0c;每个数是它左上方和右上方的数的和。 示例 1: 输入: numRows 5 输出: [[1],[1,1],[1,2,1],[1,3,3,1],[1,4,6,4,1]] 示例 2: 输入: numRows 1 输出: [[1]] …

airflow的使用

安装&#xff1a; pip install airflow 初始化数据库 airflow db init 添加用户 airflow users create \ --username admin \ --firstname admin \ --lastname admin \ --role Admin \ --email adminadmin.com 运行airflow&#xff0c;只需要这一个命令即可。 airflow sta…

修炼k8s+flink+hdfs+dlink(三:安装dlink)

一&#xff1a;mysql初始化。 mysql -uroot -p123456 create database dinky; grant all privileges on dinky.* to dinky% identified by dinky with grant option; flush privileges;二&#xff1a;上传dinky。 上传至目录/opt/app/dlink tar -zxvf dlink-release-0.7.4.t…

美团面试:Redis怎么做高可用、高并发架构?

说在前面 在40岁老架构师 尼恩的读者交流群(50)中&#xff0c;最近有小伙伴拿到了一线互联网企业如阿里、滴滴、极兔、有赞、希音、百度、网易、美团的面试资格&#xff0c;遇到很多很重要的面试题&#xff1a; 如果使用 Redis 的场景很简单&#xff0c;只使用单机版 Redis 会…

探索未来绘画:AI 的视觉创造力 | 开源专题 No.30

这一系列开源项目代表了开源社区在图像处理和创造性媒体生成方面的突出成就。它们的共同特点在于&#xff0c;它们都致力于提供出色的用户体验&#xff0c;让用户能够轻松实现复杂的图像处理和生成任务。这些项目坚守着开放源代码的理念&#xff0c;通过活跃的社区支持和高度灵…

docker compose的安装和使用

docker-copose 介绍 docker-compose 是一个容器编排工具&#xff08;自动化部署、管理&#xff09;; 它用来在单台 Linux 服务器上运行多个 Docker 容器; docker-compose 使用YAML文件来配置所有需要运行的 Docker 容器&#xff0c;该 YAML 文件的默认名称为 docker-compose.…

阿里云服务器ECS是什么?云服务器详细介绍

阿里云服务器ECS英文全程Elastic Compute Service&#xff0c;云服务器ECS是一种安全可靠、弹性可伸缩的云计算服务&#xff0c;阿里云提供多种云服务器ECS实例规格&#xff0c;如经济型e实例、通用算力型u1、ECS计算型c7、通用型g7、GPU实例等&#xff0c;阿里云服务器网分享阿…

2023/10/8总结

安装Sass pnpm i sass -D 电商 网站 的首页 通常会比较长 用户 不一定能访问到 页面靠下面的图片 &#xff0c;这类图片可以通过 懒加载 优化手段可以做到 只有 进入视口区域才发送图片请求 指令写法&#xff1a; <img v-img-lazy"item.picture"/> 路由缓存…

推荐几个技术学习的网站

USB中文网 点击打开 USB中文网 - USB技术开发交流USB中文网是国内领先的专业USB技术网站&#xff0c;提供USB开发入门教程&#xff0c;USB设备开发&#xff0c;USB驱动开发&#xff0c;USB摄像头&#xff0c;USB麦克风&#xff0c;USB存储设备&#xff0c;USB-HID设备&#x…

AI驱动的3D模型无缝纹理生成

创建无缝纹理一直是一个需要艺术技巧的劳动密集型过程。 然而&#xff0c;随着稳定扩散模型&#xff08;Stable Diffusion&#xff09;的出现&#xff0c;情况发生了变化。 通过将文本转换为逼真、无边界的图像&#xff0c;稳定扩散彻底改变了纹理创建&#xff0c;使其变得易于…

计算机体系结构中的8个伟大思想

一、面向摩尔定律的设计 计算机设计者面临的一个永恒的问题就是摩尔定律。摩尔定律指出&#xff1a;集成电路上可容纳的晶体管数每18~24个月就会翻一番。由于计算机设计通常需要几年时间&#xff0c;因此项目结束时芯片的集成度较之项目开始时&#xff0c;很容易翻一番甚至翻两…

数据结构与算法设计分析——分治法

目录 一、分治法的定义二、分治法的基本步骤三、分治法的应用&#xff08;一&#xff09;查找算法二分&#xff08;折半&#xff09;查找 &#xff08;二&#xff09;排序算法1、交换排序——快速排序2、归并排序 一、分治法的定义 分而治之可称为分治法&#xff0c;即逐个击破…

Qt开发学习笔记02

将窗口设为提示框 Qt::ToolTipQt 数据库连接池 #ifndef SQLITE_H #define SQLITE_H#include <QSqlDatabase> #include <QSqlError> #include <QSqlQuery> #include <QQueue> #include <QMutex> #include <QDebug> #include "../con…

安装spark并配置高可用

0、说明 上一篇文章讲了如何安装hadoop&#xff0c;这里将spark的详细安装步骤记录在这里。 其中实现了spark的高可用配置&#xff0c;即将zookeeper配置到spark集群中。对于资源管理也配置了yarn模。并开启了spark-sql的配置&#xff0c;可以通过jdbc链接spark。 spark 集群…

Three.js真实相机畸变效果模拟

有没有想过如何在 3D Web 应用程序中模拟物理相机&#xff1f; 在这篇博文中&#xff0c;我将向你展示如何使用 Three.js和 OpenCV 来完成此操作。 我们将从模拟针孔相机模型开始&#xff0c;然后添加真实的镜头畸变。 具体来说&#xff0c;我们将仔细研究 OpenCV 的两个失真模…

【C++】Stack Queue -- 详解

一、stack的介绍和使用 1、stack的介绍 https://cplusplus.com/reference/stack/stack/?kwstack 1. stack 是一种容器适配器&#xff0c;专门用在具有后进先出操作的上下文环境中&#xff0c;其删除只能从容器的一端进行元素的插入与提取操作。 2. stack 是作为容器适配器被…

改变世界-生成式人工智能

麦肯锡在其《生成人工智能的经济潜力&#xff1a;下一个生产力前沿》中声称&#xff0c;“ChatGPT、GitHub Copilot、Stable Diffusion 等生成式人工智能应用程序以 AlphaGo 没有的方式吸引了世界各地人们的想象力&#xff0c;这要归功于它们广泛的实用性——几乎任何人都可以使…