第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种绑定模式
- OneWay（源变就更新目标属性）
- TwoWay（源变就更新目标并且目标变就更新源）
- OneTime（只根据源来设置目标，以后都不会变）
- OneWayToSource（与OneWay相反）
- 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>
课后作业
略
