当前位置： 首页 > news >正文

CH07_数据绑定

news 2025/7/4 23:29:37

第7章：数据绑定

本章目标

  • 理解路由事件

  • 掌握键盘输入事件

  • 掌握鼠标输入事件

  • 掌握多点触控输入事件

数据绑定概述

什么是数据绑定

​ 将WPF中的至少一个带有依赖项属性的两个对象的两个属性进行绑定，使某一个依赖项属性可以更新和它绑定的属性的功能。

​ 数据绑定涉及两个方面：一个是绑定源，再一个是绑定目标。绑定源即空间绑定所使用的源数据，绑定目标即数据显示的控件。

对于绑定源，在WPF中可以是以下4种：

  • CLR对象：可以绑定到CLR类的公开属性/子属性/索引器上
  • ADO.net 对象：例如DataTable/DataView 等。
  • XML文件：使用XPath 进行解析
  • DependencyObject: 绑定到依赖项属性上，即控件绑定控件。

对于绑定目标，必须是WPF中的DependencyObject,将数据绑定到其依赖项属性上。

在这里插入图片描述

数据绑定的绑定源

  • 使用接口 INoitfyPropertyChanged
  • 使用依赖属性 DependecyProperty

数据绑定的语法

{Binding ElementName=元素名,Path=属性,Mode=绑定模式}

绑定DependencyObject对象

根据元素名称绑定

在这里插入图片描述

<Window x:Class="WPF_CH07_Demo01.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:WPF_CH07_Demo01"mc:Ignorable="d"Title="MainWindow" Height="450" Width="800"><StackPanel><TextBox x:Name="txt1" TextWrapping="Wrap" Height="100"></TextBox><TextBlock Text="{Binding ElementName=txt1,Path=Text}"></TextBlock></StackPanel></Window>

相对于自身或父元素绑定

在这里插入图片描述

<Window x:Class="WPF_CH07_Demo01.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:WPF_CH07_Demo01"mc:Ignorable="d"Title="MainWindow" Height="450" Width="800"><StackPanel Height="150"><Button Height="40" Content="{Binding RelativeSource={RelativeSource Mode=Self},Path=Height}" /><Button Height="40" Content="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=StackPanel},Path=Height}"/></StackPanel></Window>

绑定CLR对象

绑定到单个对象

在这里插入图片描述

xaml:

<Window x:Class="WPF_CH07_Demo01.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:WPF_CH07_Demo01"mc:Ignorable="d"Name="mainWindow"Title="MainWindow" Height="450" Width="800"><StackPanel><Label HorizontalAlignment="Center" FontSize="20">学生信息</Label><Grid><Grid.RowDefinitions><RowDefinition/><RowDefinition/><RowDefinition/></Grid.RowDefinitions><Grid.ColumnDefinitions><ColumnDefinition Width="200"/><ColumnDefinition/></Grid.ColumnDefinitions><Label Grid.Row="0" Grid.Column="0" Content="名字" HorizontalAlignment='Right'/><TextBox Grid.Row="0" Grid.Column="1" Text="{Binding Name}" /><Label Grid.Row="1" Grid.Column="0" Content="性别" HorizontalAlignment='Right'/><TextBox Grid.Row="1" Grid.Column="1" Text="{Binding Sex}" /><Label Grid.Row="2" Grid.Column="0" Content="年龄" HorizontalAlignment='Right'/><TextBox Grid.Row="2" Grid.Column="1" Text="{Binding Age}" /></Grid></StackPanel>
</Window>

cs:

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel;
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;namespace WPF_CH07_Demo01
{/// <summary>/// MainWindow.xaml 的交互逻辑/// </summary>public partial class MainWindow : Window{public MainWindow(){InitializeComponent();//初始化数据Student student = new Student() { Name = "孙悟空", Sex = "男", Age = 18 };//指定数据上下文this.DataContext = student;}}/// <summary>/// 学生类/// </summary>public class Student{public string Name { get; set; }public string Sex { get; set; }public int Age { get; set; }}
}

绑定到集合元素-1

在这里插入图片描述

xaml代码：

<Window x:Class="WPF_CH07_Demo01.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:WPF_CH07_Demo01"mc:Ignorable="d"Title="MainWindow" Height="450" Width="800"><StackPanel><TextBlock>姓名：</TextBlock><ListBox ItemsSource="{Binding NameList}"></ListBox></StackPanel></Window>

cs代码：

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
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;namespace WPF_CH07_Demo01
{/// <summary>/// MainWindow.xaml 的交互逻辑/// </summary>public partial class MainWindow : Window{public MainWindow(){InitializeComponent();//初始化数据this.NameList = new ObservableCollection<string>();this.NameList.Add("孙悟空");this.NameList.Add("猪八戒");this.NameList.Add("沙悟净");//指定数据上下文this.DataContext = this;}/// <summary>/// 姓名集合/// </summary>public ObservableCollection<string> NameList { get; set; }}
}

绑定到集合元素-2

在这里插入图片描述

xaml:

<Window x:Class="WPF_CH07_Demo01.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:WPF_CH07_Demo01"mc:Ignorable="d"Title="MainWindow" Height="450" Width="800"><StackPanel><TextBlock>学生：</TextBlock><ListBox ItemsSource="{Binding StuList}"><ListBox.ItemTemplate><DataTemplate><UniformGrid Columns="3"><TextBlock Text="{Binding Name}" Margin="5"/><TextBlock Text="{Binding Sex}" Margin="5"/><TextBlock Text="{Binding Age}" Margin="5"/></UniformGrid></DataTemplate></ListBox.ItemTemplate></ListBox></StackPanel></Window>

cs:

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
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;namespace WPF_CH07_Demo01
{/// <summary>/// MainWindow.xaml 的交互逻辑/// </summary>public partial class MainWindow : Window{public MainWindow(){InitializeComponent();//初始化数据this.StuList = new ObservableCollection<Student>();this.StuList.Add(new Student {  Name="孙悟空",Sex="男",Age=150});this.StuList.Add(new Student { Name = "猪八戒", Sex = "男", Age = 120 });this.StuList.Add(new Student { Name = "沙悟净", Sex = "男", Age = 100 });//指定数据上下文this.DataContext = this;}/// <summary>/// 姓名集合/// </summary>public ObservableCollection<Student> StuList { get; set; }}/// <summary>/// 学生类/// </summary>public class Student{/// <summary>/// 姓名/// </summary>public string Name { get; set; }/// <summary>/// 性别/// </summary>public string Sex { get; set; }/// <summary>/// 年龄/// </summary>public int Age { get; set; }}
}

MVVM模式实现数据绑定

在这里插入图片描述

xaml:

<Window x:Class="WPF_CH07_Demo01.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:WPF_CH07_Demo01"mc:Ignorable="d"Title="MainWindow" Height="450" Width="800"><StackPanel><TextBlock Text="{Binding School}" /><TextBlock Text="{Binding TeacherCount}" /><TextBlock Text="{Binding StudentCount}" /></StackPanel>
</Window>

cs:

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
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;namespace WPF_CH07_Demo01
{/// <summary>/// MainWindow.xaml 的交互逻辑/// </summary>public partial class MainWindow : Window{public MainWindow(){InitializeComponent();//初始化数据MainViewModel mvm = new MainViewModel();mvm.School = "广创";mvm.TeacherCount = 20;mvm.StudentCount = 500;//指定数据上下文this.DataContext = mvm;}}/// <summary>/// 页面视图 数据 模型/// </summary>public class MainViewModel{/// <summary>/// 学校/// </summary>public string School { get; set; }/// <summary>/// 教师人数/// </summary>public int TeacherCount { get; set; }/// <summary>/// 学生人数/// </summary>public int StudentCount { get; set; }}
}

属性改变通知进行数据绑定

在这里插入图片描述

xaml:

<Window x:Class="WPF_CH07_Demo01.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:WPF_CH07_Demo01"mc:Ignorable="d"Name="mainWindow"Title="MainWindow" Height="450" Width="800"><StackPanel><Label HorizontalAlignment="Center" FontSize="20">学生信息</Label><Grid><Grid.RowDefinitions><RowDefinition/><RowDefinition/><RowDefinition/><RowDefinition/><RowDefinition/></Grid.RowDefinitions><Grid.ColumnDefinitions><ColumnDefinition Width="200"/><ColumnDefinition/></Grid.ColumnDefinitions><Label Grid.Row="0" Grid.Column="0" Content="名字" HorizontalAlignment='Right'/><TextBox Grid.Row="0" Grid.Column="1" Text="{Binding Name}" /><Label Grid.Row="1" Grid.Column="0" Content="性别" HorizontalAlignment='Right'/><TextBox Grid.Row="1" Grid.Column="1" Text="{Binding Sex}" /><Label Grid.Row="2" Grid.Column="0" Content="年龄" HorizontalAlignment='Right'/><TextBox Grid.Row="2" Grid.Column="1" Text="{Binding Age}" /><Button Name="btn1" Grid.Row="3" Grid.Column="1" Width="120" Height="40" Margin="5" Click="btn1_Click">显示对象信息</Button><Button Name="btn2" Grid.Row="4" Grid.Column="1" Width="120" Height="40" Margin="5" Click="btn2_Click">清除对象信息</Button></Grid></StackPanel>
</Window>

cs:

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel;
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;namespace WPF_CH07_Demo01
{/// <summary>/// MainWindow.xaml 的交互逻辑/// </summary>public partial class MainWindow : Window{Student student;public MainWindow(){InitializeComponent();//初始化数据student = new Student() { Name = "孙悟空", Sex = "男", Age = 18 };//指定数据上下文this.DataContext = student;}/// <summary>/// 显示对象信息/// </summary>/// <param name="sender"></param>/// <param name="e"></param>private void btn1_Click(object sender, RoutedEventArgs e){MessageBox.Show(this.student.ToString());}/// <summary>/// 清空对象内容/// </summary>/// <param name="sender"></param>/// <param name="e"></param>private void btn2_Click(object sender, RoutedEventArgs e){this.student.Name = null;this.student.Sex = null;this.student.Age = null;}}/// <summary>/// 页面视图 数据 模型/// </summary>public class Student : INotifyPropertyChanged{private string name;public string Name{get { return name; }set{name = value;OnPropertyChanged("Name");//引发事件}}private string sex;public string Sex{get { return sex; }set{sex = value;OnPropertyChanged("Sex");//引发事件}}private int? age;public int? Age{get { return age; }set{age = value;OnPropertyChanged("Age");//引发事件}}/// <summary>/// 属性改变事件/// </summary>public event PropertyChangedEventHandler PropertyChanged;/// <summary>/// 事件处理函数/// </summary>/// <param name="property"></param>public void OnPropertyChanged(string property){PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(property));}public override string ToString(){return string.Format("姓名：{0},性别：{1}，年龄：{2}", Name, Sex, Age);}}
}

绑定ADO.NET 对象

在这里插入图片描述

xaml:

<Window x:Class="WPF_CH07_Demo01.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:WPF_CH07_Demo01"mc:Ignorable="d"Name="mainWindow"Title="MainWindow" Height="450" Width="800"><StackPanel><TextBlock>学生：</TextBlock><ListBox ItemsSource="{Binding StuListData}"><ListBox.ItemTemplate><DataTemplate><UniformGrid Columns="3"><TextBlock Text="{Binding Name}" Margin="5"/><TextBlock Text="{Binding Sex}" Margin="5"/><TextBlock Text="{Binding Age}" Margin="5"/></UniformGrid></DataTemplate></ListBox.ItemTemplate></ListBox></StackPanel>
</Window>

cs:

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Data;
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;namespace WPF_CH07_Demo01
{/// <summary>/// MainWindow.xaml 的交互逻辑/// </summary>public partial class MainWindow : Window{public MainWindow(){InitializeComponent();//初始化数据this.InitialData();//指定数据上下文this.DataContext = this;}/// <summary>/// 初始化数据/// </summary>public void InitialData(){this.StuListData = new DataTable();//列this.StuListData.Columns.Add("Name", typeof(string));this.StuListData.Columns.Add("Sex", typeof(string));this.StuListData.Columns.Add("Age", typeof(int));//行DataRow row1 = this.StuListData.NewRow();row1["Name"] = "孙悟空";row1["Sex"] = "男";row1["Age"] = 18;DataRow row2 = this.StuListData.NewRow();row2["Name"] = "猪八戒";row2["Sex"] = "男";row2["Age"] = 19;DataRow row3 = this.StuListData.NewRow();row3["Name"] = "沙悟净";row3["Sex"] = "男";row3["Age"] = 20;//添加到数据表this.StuListData.Rows.Add(row1);this.StuListData.Rows.Add(row2);this.StuListData.Rows.Add(row3);}/// <summary>/// 学生数据表/// </summary>public DataTable StuListData { get; set; }}}

绑定XML对象

在这里插入图片描述

xaml:

<Window x:Class="WPF_CH07_Demo01.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:WPF_CH07_Demo01"mc:Ignorable="d"Name="mainWindow"Title="MainWindow" Height="450" Width="800"><StackPanel><ListBox ItemsSource="{Binding Source={StaticResource PeopleData}}"><ListBox.ItemTemplate><DataTemplate><UniformGrid Columns="2"><TextBlock Width="200" Text="{Binding XPath='@Name'}"/><TextBlock Width="200" Text="{Binding XPath='@Age'}"/></UniformGrid></DataTemplate></ListBox.ItemTemplate></ListBox></StackPanel>
</Window>

xml:

<?xml version="1.0" encoding="utf-8" ?>
<People><Person Name="孙悟空" Age="30" /><Person Name="猪八戒" Age="25" /><Person Name="沙悟净" Age="35" />
</People>

App.xaml:

<Application x:Class="WPF_CH07_Demo01.App"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:local="clr-namespace:WPF_CH07_Demo01"StartupUri="MainWindow.xaml"><Application.Resources><XmlDataProvider x:Key="PeopleData"  XPath="People/Person" Source="data.xml"/></Application.Resources>
</Application>

WPF的5种绑定模式

  1. OneWay（源变就更新目标属性）
  2. TwoWay（源变就更新目标并且目标变就更新源）
  3. OneTime（只根据源来设置目标，以后都不会变）
  4. OneWayToSource（与OneWay相反）
  5. Default（可以单向或双向，是靠被值定的源或目标是否有get或set来指定的）

在这里插入图片描述

xaml:

<Window x:Class="WPF_CH07_Demo01.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:WPF_CH07_Demo01"mc:Ignorable="d"Name="MainWindow1"Title="MainWindow" Height="450" Width="800"><StackPanel><Slider Name="sb1" Minimum="0" Maximum="100" Value="50" Width="300" Height=" 30" SmallChange="1"/><Grid><Grid.RowDefinitions><RowDefinition/><RowDefinition/><RowDefinition/><RowDefinition/></Grid.RowDefinitions><Grid.ColumnDefinitions><ColumnDefinition Width="300"/><ColumnDefinition/></Grid.ColumnDefinitions><Label Grid.Row="0" Grid.Column="0" Content="OneWay"/><TextBox Grid.Row="0" Grid.Column="1" Text="{Binding ElementName=sb1,Path=Value,Mode=OneWay}"/><Label Grid.Row="1" Grid.Column="0" Content="OneWayToSource"/><TextBox Grid.Row="1" Grid.Column="1" Text="{Binding ElementName=sb1,Path=Value,Mode=OneWayToSource}"/><Label Grid.Row="2" Grid.Column="0" Content="TwoWay"/><TextBox Grid.Row="2" Grid.Column="1" Text="{Binding ElementName=sb1,Path=Value,Mode=TwoWay}"/><Label Grid.Row="3" Grid.Column="0" Content="OneTime"/><TextBox Grid.Row="3" Grid.Column="1" Text="{Binding ElementName=sb1,Path=Value,Mode=OneTime}"/></Grid></StackPanel>
</Window>

课后作业

略

http://www.lryc.cn/news/418446.html

相关文章：

  • 24.python基础（8.8）
  • 【论文阅读】MobileNetV4 - Universal Models for the Mobile Ecosystem
  • 大模型日报 2024-08-07
  • 区块链ddos防护怎么做
  • 在Linux中认识pthread库
  • LVS 负载均衡
  • 在Excel中启用宏 (～￣▽￣)～
  • 连接投影仪/显示器只能扩展不能复制的解决方案
  • 数据库基础知识
  • java JVM 锁消除
  • 基于 Java Supplier与Predicate 封装自动重试机制通用接口
  • Java面试题（基础篇）②
  • 【docker快捷部署系列二】用docker-compose快速配置多个容器，docker部署Springboot+Vue项目和mysql数据库
  • Java新手指南：从菜鸟到编程大师的趣味之路-类和对象
  • 计算机毕业设计选题推荐-房屋租赁系统-Java/Python项目实战
  • LeetCode 3131.找出与数组相加的整数 I：最小值之差（多语言一行版）
  • Win32注册表操作
  • 白骑士的PyCharm教学高级篇 3.3 Web开发支持
  • SpringAOP-底层实现源码解析
  • 【C语言初阶】C语言操作符全攻略：提升编程效率的关键步骤
  • 2007-2023年上市公司金融化程度测算数据（含原始数据+计算代码+计算结果）
  • 【时时三省】(C语言基础)操作符
  • 常用API（三）
  • 内存管理问题总结
  • 十七、Intellij IDEA2022.1.1下载、安装、激活
  • 【Material-UI】Button Group 中的 Disabled Elevation 功能
  • Java RESTful API 测试：使用 RestAssured
  • 将nestjs项目迁移到阿里云函数
  • 边缘计算×AI：绘制未来实时智能的宏伟蓝图
  • 实现关系运算符的重载