《深入浅出WPF》笔记——绑定篇（一）
上一节，有记录写到：在WPF里，数据驱动UI，数据占核心地位，UI次之。怎么恢复数据的核心地位，那就要先了解一下Binding。
一、Binding 基础
1.1WPF中Data Binding的带来的方便
在设计架构的时间，大家都很重视分层，为什么分层呢，其实分层就是为了更好的复用共同的类库、更好的分工，以便更好的施工。。。，无论是为什么，就算它是一种时尚吧。为了追逐它，先记录一下一般程序的层次：数据层，逻辑处理层，表现层。具体的每一个层可以再去细分。很多时间对于逻辑处理层和表现层经常混成一片，最终成了邯郸学步。在WPF中，如果绑定用的好的话，这种不好的结果将会很简单的避免。具体是怎么样避免的呢？让我们先总体的把握一下Binding。为了更好的理解Binding，让我们先举个例子，Binding就像一条河流，可以用来划分界限，又能作为通往两个地方的必经之路。翻译过来就是Binding是逻辑层和UI的分界线，当逻辑层处理了的数据，通过Binding界面能很快能感应得到，如果界面上的数据发生了变化，Binding会通知逻辑层做出相应的操作。（关于这一段，我只能弱弱的说，感觉不是特别的官方，因为对分层的理解我还处于菜鸟级的水平，希望大家狂喷啊，让我能成长的更快）。
1.2 Binding基础
我们可以把Binding比喻成一座数据桥梁，当一辆汽车要经过桥的话，就需要指明出发地-源（Source）和目的地-目标（Target），数据的从哪里来是源，到哪里去是Target，一般情况下，Binding源是逻辑层的对象，目标是UI层的控件对象。这样数据不断的通过Binding送达UI层，被UI层所展示也就完成了数据驱动UI的过程。我们可以想象在Binding这座桥上铺了高速公路，不仅可以设置其方向是否是单向，还可以为双向的，不仅如此，在双向绑定的时间甚至可以设置一些"关卡"，用来转化数据类型或者是检查数据的正确性。说了这么多，我想用一个例子，能更好的理解Binding。需求是：通过Binding，每次按一下按钮为文本框的Age加1.具体的代码说明在注释里面已经写明了。下面直接上代码：
Person.cs
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.ComponentModel; namespace Chapter_04 { class Person : INotifyPropertyChanged {//INotifyPropertyChanged向客户端发出某一属性值已更改的通知。 public event PropertyChangedEventHandler PropertyChanged; private int age; public int Age { get { return age; } set { age = value; if (this.PropertyChanged != null) { this.PropertyChanged.Invoke(this, new PropertyChangedEventArgs("Age")); // 通知Binding是“Age”这个属性的值改变了 } } } } }
XAML
<Window x:Class="Chapter_04.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="230" Width="250"> <Grid Background="Azure"> <TextBlock Height="23" HorizontalAlignment="Left" Margin="12,39,0,0" Name="textBlock1" Text="年龄:" VerticalAlignment="Top" Width="44" /> <TextBox Height="23" HorizontalAlignment="Left" Margin="62,36,0,0" x:Name="txtAge" VerticalAlignment="Top" Width="120" Text="22" /> <Button Content="年龄加1" Height="23" HorizontalAlignment="Left" Margin="107,114,0,0" Name="button1" VerticalAlignment="Top" Width="75" Click="button1_Click" /> </Grid> </Window>
cs
using System; using System.Collections.Generic; using System.Linq; using System.Text; 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 Chapter_04 { /// <summary> /// MainWindow.xaml 的交互逻辑 /// </summary> public partial class MainWindow : Window { Person p; public MainWindow() { InitializeComponent(); //定义一个人的实例对象，并设置其初始值为文本框的值； p = new Person(); p.Age = Convert.ToInt32(txtAge.Text); //准备binding 设置其源为刚刚创建的对象，并指定其访问路径为对象的Age字段， // Binding binding = new Binding(); binding.Source = p; binding.Path = new PropertyPath("Age"); //将数据源与目标连接在一起---其中把txtAge设置为绑定目标，并指定目标的属性为 //静态只读DependencyProperty类型的依赖属性TextBox.TextProperty.（运行是可以赋值的，注意与const的区别） //这类属性的值可以通过binding依赖在其他对象的属性值上，被其他队形的属性值所驱动。 BindingOperations.SetBinding(this.txtAge, TextBox.TextProperty, binding); } private void button1_Click(object sender, RoutedEventArgs e) { p.Age += 1; } } }
其中Cs的代码可以把InitializeComponent();后面的代码去掉，一句就搞定的
this.txtAge.SetBinding(TextBox.TextProperty, new Binding("Age") {Source= p=new Person(){Age=Convert.ToInt32(txtAge.Text)}});
最后的效果图为图1，并且点击按钮年龄加1：
图1
这个不是跟以前的winform差不多吗？初看差不多，但是这里让年龄加1的是对象的属性，而不是平时用的txtAge+=1。这样做有个明显得好处是，如果两个文本框都绑定的p.Age，那么点击下按钮，两个文本框都会加1.在这里源是p对象（没有使用逻辑层），目标是txtAge控件。是不是对Binding有点感觉了。接下来介绍Binding的路径（Path）和源（Source）。
二、Binding的路径和源
2.1把控件作为Binding的源与Binding标记扩展的完美结合
除了逻辑层对象可以作为Binding的源外，控件也可以作为Binding的源，这样是不仅能使UI元素产生联动的效果，也会使Binding在控件间建立关联。下面给出一个TextBox的值随着Slider的值得变化而变化的例子。效果图如图2：
图2
代码如下：
XAML
<Window x:Class="Chapter_04.ControlBinding" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="ControlBinding" Height="300" Width="300"> <StackPanel> <TextBox x:Name="textBox1" Text="{Binding Path=Value,ElementName=slider1}"/> <Slider x:Name="slider1" Maximum="100" Minimum="0" Margin="5"/> </StackPanel> </Window>
下面讲解主要代码：
<TextBox x:Name="textBox1" Text="{Binding Path=Value,ElementName=slider1}"/>
前面的文章XAML的语法记录中已介绍过标签扩展：特征是含有引号中{}而且开始部分是其类型。咋一看好像是Binding类型的变量赋值给Text了，在这里可以把Binding看成一个函数，整体的{}标签扩展为一个函数，返回值为Value。由于Binding带一个路径参数的构造函数，所以path=可以省略，写成这样<TextBox x:Name="textBox1" Text="{Binding Value,ElementName=slider1}"/>，如果改成后台代码（C#）的话可以这么写：
this.textBox1.SetBinding(TextBox.TextProperty, new Binding("Value") { ElementName="slider1"});
我们前面说过，绑定是可以双向的，这里如果先输入值会不会让slider1根据文本框中的值指到相应的位置呢，答案是肯定的。那就去试试吧，试试的话好像没有发现slider移动啊？在这里还需要知道一点，那就是Binding提供了数据流向的方向的属性：Mode，它的类型为BindingMode的枚举类型，可以取TwoWay、OneWay、OnTime、OneWayToSource、Default。在此肯定是默认的了，Default是根据情况来确定的。其实在上面的例子中是双向的，slider为什么不能移动呢，是因为没有textBox没有失去焦点，按一下Tab就可以看到效果了,每次想让Slider移动是不是必须要按一下Tab呢？肯定否定的，因为微软对应Binding还提供了UpdateSourceTrigger属性（描述绑定源更新的执行时间）,其值可以为PropertyChanged（当绑定目标属性更改时，立即更新绑定源，因为是更新源，用于目标对源的绑定，否则无效。多数依赖项属性的默认值为PropertyChanged，TextBox默认值为LostFocus），Explicit（仅在调用 System.Windows.Data.BindingExpression.UpdateSource() 方法时更新绑定源），LostFocus。在这里，只需要在绑定里面加UpdateSourceTrigger=PropertyChanged就可以实现我们想要的结果了。除此之外Binding还有NotifyOnSourceUpdated和NotifyOnTargetUpdated属性,设置为true的话，当源或目标被更新后会激发相应的SourceUpdated事件和TargetUpdated事件，实际工作中，我们还可以监听两个事件来找出有哪些数据更新了，或者是控件更新了。具体的用的时间在来细究，目前只记录一下有这么一回事。
2.2 Binding的路径（Path）
Binding的源是一个对象，一个对象又会有多个属性，通常我们要显示的对象的某个属性，就用Binding的路径（Path）属性来指定(有的时候也可以不指定Path），Path的实际类型为PropertyPath。除此之外，有的对象的属性也是对象、对象里面含有多个相同类型的属性取默认值以及对象的索引，我们同样可以指定它，下面通过例子来说明，效果为图3：
图3
下面给出代码：
XAML
<Window x:Class="Chapter_04.Path" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Path" Height="500" Width="805"> <Grid Background="Gold"> <Grid.RowDefinitions> <RowDefinition Height="1*" /> <RowDefinition Height="1*" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition/> <ColumnDefinition/> </Grid.ColumnDefinitions> <!--源的属性作Path--> <Grid Background="Azure"> <Grid.RowDefinitions> <RowDefinition Height="1*" /> <RowDefinition Height="1*" /> <RowDefinition Height="1*" /> <RowDefinition Height="1*" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="1*"/> <ColumnDefinition Width="2*"/> </Grid.ColumnDefinitions> <TextBlock Name="txtBlockPath1" Text="源的属性作Path" VerticalAlignment="Bottom" HorizontalAlignment="Center" Grid.ColumnSpan="2" Grid.Row="0" /> <TextBlock Name="txtBlock1" Text="计算文本框字符串的长度" Height="25" VerticalAlignment="Bottom" HorizontalAlignment="Center" Grid.ColumnSpan="2" Grid.Row="1" /> <TextBlock Name="textBlockString" Text="请输入字符:" Height="25" Width="67" HorizontalAlignment="Right" Grid.Row="2" Grid.Column="0"/> <TextBox Name="textBox" Width="240" Height="25" Grid.Column="2" Grid.Row="2" /> <TextBlock Name="textBlockStringLong" Text="字符串长度为:" HorizontalAlignment="Right" Height="23" Grid.Row="3" Grid.Column="0"/> <TextBox Name="textBox1" Text="{Binding Path=Text.Length,ElementName=textBox,Mode=OneWay}" Width="240" Height="25" Grid.Row="3" Grid.Column="1" /> </Grid> <!--源的索引作Path--> <Grid Background="Azure" Grid.Row="1" > <Grid.RowDefinitions> <RowDefinition Height="1*" /> <RowDefinition Height="1*" /> <RowDefinition Height="1*" /> <RowDefinition Height="1*" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="1*"/> <ColumnDefinition Width="2*"/> </Grid.ColumnDefinitions> <TextBlock Name="txtBlockPath2" Text="源的索引作Path" VerticalAlignment="Bottom" HorizontalAlignment="Center" Grid.ColumnSpan="2" Grid.Row="0" /> <TextBlock Name="txtBlock2" Text="查看文本框字符串的第一个字符" Height="25" VerticalAlignment="Bottom" HorizontalAlignment="Center" Grid.ColumnSpan="2" Grid.Row="1" /> <TextBlock Name="textBlockString1" Text="请输入字符:" Height="25" Width="67" HorizontalAlignment="Right" Grid.Row="2" Grid.Column="0"/> <TextBox Name="txtString1" Width="240" Height="25" Grid.Column="1" Grid.Row="2" /> <TextBlock Name="textBlockStringLong1" Text="第一个字符为:" HorizontalAlignment="Right" Height="23" Grid.Row="3" Grid.Column="0"/> <TextBox Name="txtFirstChar" Text="{Binding Path=Text.[0],ElementName=txtString1,Mode=OneWay}" Width="240" Height="25" Grid.Row="3" Grid.Column="1" /> </Grid> <!--默认元素当path--> <Grid Background="Azure" Grid.Row="0" Grid.Column="1"> <Grid.RowDefinitions> <RowDefinition Height="1*" /> <RowDefinition Height="1*" /> <RowDefinition Height="1*" /> <RowDefinition Height="1*" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="1*"/> <ColumnDefinition Width="2*"/> </Grid.ColumnDefinitions> <TextBlock Name="txtBlock3" Text="默认元素当path" Height="25" VerticalAlignment="Bottom" HorizontalAlignment="Center" Grid.ColumnSpan="2" Grid.Row="0" Grid.Column="1"/> <TextBlock Name="textBlockString2" Text="名字:" Height="25" HorizontalAlignment="Right" Grid.Row="1" Grid.Column="0"/> <TextBox Name="txtName" Width="240" Height="25" Grid.Column="1" Grid.Row="1" /> <TextBlock Name="txtBlockSecondChar" Text="名字的第二个字符:" HorizontalAlignment="Right" Height="23" Grid.Row="2" Grid.Column="0"/> <TextBox Name="txtSecondChar" Width="240" Height="25" Grid.Row="2" Grid.Column="1" /> <TextBlock Name="textBlockStringLong3" Text="字符长度为:" HorizontalAlignment="Right" Height="23" Grid.Row="3" Grid.Column="0"/> <TextBox Name="txtLength" Width="240" Height="25" Grid.Row="3" Grid.Column="1" /> </Grid> <!--多级默认元素当path--> <Grid Background="Azure" Grid.Row="1" Grid.Column="1"> <Grid.RowDefinitions> <RowDefinition Height="1*" /> <RowDefinition Height="1*" /> <RowDefinition Height="1*" /> <RowDefinition Height="1*" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="1*"/> <ColumnDefinition Width="2*"/> </Grid.ColumnDefinitions> <TextBlock Name="txtBlock4" Text="多级默认元素当path" Height="25" VerticalAlignment="Bottom" HorizontalAlignment="Center" Grid.ColumnSpan="2" Grid.Row="0" Grid.Column="1"/> <TextBlock Name="textBlockCountry" Text="国家:" Height="25" HorizontalAlignment="Right" Grid.Row="1" Grid.Column="0"/> <TextBox Name="txtCountry" Width="240" Height="25" Grid.Column="1" Grid.Row="1" /> <TextBlock Name="txtBlockProvince" Text="省份:" HorizontalAlignment="Right" Height="23" Grid.Row="2" Grid.Column="0"/> <TextBox Name="txtProvince" Width="240" Height="25" Grid.Row="2" Grid.Column="1" /> <TextBlock Name="textBlockCity" Text="城市:" HorizontalAlignment="Right" Height="23" Grid.Row="3" Grid.Column="0"/> <TextBox Name="txtCity" Width="240" Height="25" Grid.Row="3" Grid.Column="1" /> </Grid> </Grid> </Window>
CS
using System; using System.Collections.Generic; using System.Linq; using System.Text; 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.Shapes; namespace Chapter_04 { /// <summary> /// Path.xaml 的交互逻辑 /// </summary> public partial class Path : Window { public Path() { InitializeComponent(); //后台代码绑定路径为属性或者索引（索引也可以理解为特殊的属性），当绑定源本身就为string，int类型数据时 //XAML中可以省略路径，后台代码中用"."代替,注意与下面“/”的区别 //string str = "123"; //this.txtName.SetBinding(TextBox.TextProperty, new Binding(".") { Source = str }); //this.txtLength.SetBinding(TextBox.TextProperty, new Binding("Length") { Source = str, Mode = BindingMode.OneWay }); //this.txtSecondChar.SetBinding(TextBox.TextProperty, new Binding("[1]") { Source = str, Mode = BindingMode.OneWay }); //让一个集合或者是DataView的第一个元素作为binding的路径。如果路径是集合的话可以继续"/"下去=============================== List<string> strList = new List<string>() { "Tim", "Tom", "Blog" }; this.txtName.SetBinding(TextBox.TextProperty, new Binding("/") { Source = strList }); this.txtLength.SetBinding(TextBox.TextProperty, new Binding("/Length") { Source = strList, Mode = BindingMode.OneWay }); this.txtSecondChar.SetBinding(TextBox.TextProperty, new Binding("/[1]") { Source = strList, Mode = BindingMode.OneWay }); //实现多级默认集合作为binding的源========================================================================================= //定义一个国家列表 List<Country> ListCountry = new List<Country>(); //定义一个省份列表 List<Province> ListProvince = new List<Province>(); //定义一个城市列表 List<City> ListCity1 = new List<City>(); List<City> ListCity2 = new List<City>(); //为城市列表中添加城市 ListCity1.Add(new City() { Name = "郑州" }); ListCity1.Add(new City() { Name = "许昌" }); ListCity2.Add(new City() { Name = "福州" }); ListCity2.Add(new City() { Name = "厦门" }); //为省份列表添加省 ListProvince.Add(new Province() { Name = "河南", CityList = ListCity1 }); ListProvince.Add(new Province() { Name = "福建", CityList = ListCity2 }); Country country = new Country() { Name = "中国", ProvinceList = ListProvince }; ListCountry.Add(country); //当默认集合为对象的话，注意指明其属性，注意与上面的区分 this.txtCountry.SetBinding(TextBox.TextProperty, new Binding("/Name") { Source = ListCountry }); this.txtProvince.SetBinding(TextBox.TextProperty, new Binding("/ProvinceList/Name") { Source = ListCountry }); this.txtCity.SetBinding(TextBox.TextProperty, new Binding("/ProvinceList/CityList/Name") { Source = ListCountry }); } } #region 创建国家、省份、城市类 class City { public string Name { get; set; } } class Province { public string Name { get; set; } public List<City> CityList { get; set; } } class Country { public string Name { get; set; } public List<Province> ProvinceList { get; set; } } #endregion }
相对比较简单，代码里面含有注释，如有疑问和不足的地方，欢迎留言。
2.3 为Binding指定源的方式
Binding指定源的方式有多种，总的概括一句话：只要一个对象包含数据并能通过属性把数据暴露出来，就能当做Banding的源。下面列出常用的方法：
- 把CLR类型单个对象指定为Source，包括自带的类型对象和用户自定义的对象，必要时使用INotifyPropertyChanged接口。可以通过在属性的set语句里激发PropertyChanged事件来通知Binding数据已经发生改变。
- 把依赖对象指定为Source。一般情况依赖对象是用来作为Binding的目标的，如果是作为源的话，就形成了Binding链（源-目标(源)-目标）。
- 把DataContext指定为Source，由于每个WPF控件都含有DataContext属性，DataContext常用于：如果不能确定Binding从哪里获取数据，只知道路径Path的话，他就会一直沿着控件树往根的方向找下去，从而找到含有Path的元素的DataContext作为源。
- 把普通CLR集合类型对象指定为Source：包括数组、泛型等集合类型。一般是把控件的ItemsSource属性使用Binding关联到一个集合对象上。
- 把ADO.NET数据对象指定为Source：包括DataTable和DataView等对象。
- XmlDataProvider把XML数据指定为source，经常和TreeView和Menu结合着用（除了TreeView,还涉及到DataTemplate相关的内容，如果不理解的话，到“话模板“的时间在具体记录）。
- ObjectDataProvider对象指定为Source，当数据源的属性不是通过属性而是通过方法来暴露的话，就可以用ObjectDataProvider对象。
- 通过Binding的RelativeSource属性相对的指定Source，主要用于当控件想关注自己或者自己容器的以及自己内部元素的某个值就需要这个方法。
由于前两个已经使用过，下面就直接从第三个开始逐个介绍。
2.4使用DataContext作为Binding的源
先重点记录一下DataContext，DataContext是每一个继承FrameworkElement类的控件都有的属性，所以每一个UI控件都有此属性（包括布局控件），Binding只知道Path不知道Source的话就会向UI树的根部找过，直到找到含有Path所指定的属性的对象然后“借过来”用一下，如果最终没有找到那么就不会得到数据。为了初步认识一下DataContext，下面看一个例子：
<Window x:Class="Chapter_04.ContextSource" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:Chapter_04" Title="ContextSource" Height="150" Width="219"> <StackPanel Background="Beige"> <StackPanel.DataContext> <local:Student Id="2008101132" Age="24" Name="李占朋"/> </StackPanel.DataContext> <Grid> <StackPanel> <TextBox Text="{Binding Path=Id}" Margin="5" BorderBrush="Black"/> <TextBox Text="{Binding Path=Name}" Margin="5" BorderBrush="Black"/> <TextBox Text="{Binding Path=Age}" Margin="5" BorderBrush="Black"/> </StackPanel> </Grid> </StackPanel> </Window>
后台代码为：
CS
XAML using System; using System.Collections.Generic; using System.Linq; using System.Text; 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.Shapes; namespace Chapter_04 { /// <summary> /// ContextSource.xaml 的交互逻辑 /// </summary> public partial class ContextSource : Window { public ContextSource() { InitializeComponent(); } } public class Student { public int Id { get; set; } public int Age { get; set; } public string Name { get; set; } } }
效果图为图4：
图4 图5
在上面的例子中一个Student实例作为下面TextBox的绑定源。当然{Binding Path=Age}部分可以把"Path="省略掉即{Binding Age}。突然发现DataContext指定源是没有Source的Binding。是否能和没有path（当源为string或int类型时）的连用，如果可以，是怎么样的效果呢？为了验证没有找到Source只是不显示数据但是不会报错，我还用上面的部分代码（图5为效果图）：
<Window x:Class="Chapter_04.ContextSource" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:sys="clr-namespace:System;assembly=mscorlib" xmlns:local="clr-namespace:Chapter_04" Title="ContextSource" Height="150" Width="219"> <StackPanel Background="Beige"> <StackPanel.DataContext> <!--<local:Student Id="2008101132" Age="24" Name="李占朋"/>--> <sys:String>红色部分为没有Path的测试！</sys:String> </StackPanel.DataContext> <Grid> <StackPanel> <TextBlock Text="{Binding}" Background="Red"/> <TextBox Text="{Binding Path=Id}" Margin="5" BorderBrush="Black"/> <TextBox Text="{Binding Path=Name}" Margin="5" BorderBrush="Black"/> <TextBox Text="{Binding Path=Age}" Margin="5" BorderBrush="Black"/> </StackPanel> </Grid> </StackPanel> </Window>
嘿嘿，既没有指定Source有没有指定path的Binding出现了。下面看一下控件是怎么借用DataContext的。
主要的XAML代码为
<Grid DataContext="借用测试"> <Grid> <Grid> <Grid> <Button x:Name="btn" Content="Ok" Click="btn_Click"/> </Grid> </Grid> </Grid> </Grid>
点击按钮事件代码为：
private void btn_Click(object sender, RoutedEventArgs e)
{
MessageBox.Show(btn.DataContext.ToString());
}
点击按钮效果图为图6：
图6
到这里应该来说基本上认识了DataContext。而且从第一个例子中我们还可以看出：当UI上多个控件使用Binding关注同一个对象，可以使用DataContext作为Binding的源。其实DataContext还是一个依赖属性，我们可以使用Binding把他关联到一个数据源上（先记着有这么一回事，在以后的记录中会详细分析）。
2.5 集合类型对象指定列表控件的为ItemsSource
前面的笔记中已经记录了ItemsControl控件，应该有些熟悉了，它有个ItemsSource属性，可以接受一个IEnumerable接口派生类的实例作为自己的值。我们现在想办法把指定的Path
显示在ListBox中，先实现单个属性的实现，然后在实现多个属性的显示。单属性显示的代码为：
XAML
<Window x:Class="Chapter_04.ItemsSource" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="ItemsSource" Height="300" Width="300"> <Grid Background="Beige"> <TextBlock Text="所选学生的学号："></TextBlock> <TextBox x:Name="textBoxid" Margin="0,1,93,234" HorizontalAlignment="Right" Width="82"></TextBox> <ListBox x:Name="listview" Margin="0,89,62,0" Background="Azure"> <!--<ListBox.ItemTemplate> <DataTemplate> <StackPanel Orientation="Horizontal"> <TextBlock Text="{Binding Path=Id}" Width="30"/> <TextBlock Text="{Binding Path=Name}" Width="30"/> <TextBlock Text="{Binding Path=Age}" Width="30"/> </StackPanel> </DataTemplate> </ListBox.ItemTemplate>--> </ListBox> <Button Content="添加学生" Height="23" HorizontalAlignment="Left" Margin="191,0,0,0" VerticalAlignment="Top" Width="75" Click="button1_Click" /> </Grid> </Window>
CS
using System; using System.Collections.Generic; using System.Linq; using System.Text; 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.Shapes; using System.Collections.ObjectModel; namespace Chapter_04 { /// <summary> /// ItemsSource.xaml 的交互逻辑 /// </summary> public partial class ItemsSource : Window { //注意ObservableCollection与List的区别 List<Student> stuList = new List<Student>() { new Student(){Id=0,Name="Tim",Age=19}, new Student(){Id=1,Name="Tom",Age=29}, new Student(){Id=2,Name="jim",Age=39}, }; public ItemsSource() { InitializeComponent(); listview.ItemsSource = stuList; this.listview.DisplayMemberPath = "Name"; Binding binding = new Binding("SelectedItem.Id") { Source = this.listview }; this.textBoxid.SetBinding(TextBox.TextProperty, binding); } private void button1_Click(object sender, RoutedEventArgs e) { this.stuList.Add(new Student() { Id = 2, Name = "jim", Age = 39 }); } } }
在CS代码中，我们看到了一句this.listview.DisplayMemberPath = "Name"中有一个DisplayMemberPath，这个就是指定绑定源的属性。如果想显示多个属性，应该怎么做呢？答案是使用DataTemplate，因为在以后的笔记中还会记录到DataTemplate，在此提出来知道有这么一回事就好了，接触过webFrom的人或许会理解的更快点。具体的做法是把上面的XAML代码中的注释部分去掉，后台代码的this.listview.DisplayMemberPath = "Name";去掉就可以实现显示多个属性。除此之外我在UI上还放了一个Button，主要用来区别ObservableCollection<T>与List<T>,因为ObservableCollection<T>实现了INotifyColletionChanged和INotifyProperty接口，能把集合的变化立即显示给控件。可以把后台代码的List用ObservableCollection替代，点击按钮查看两者的区别（添加的条目会理解显示出来，用list却没有这个效果）。
2.6 把ADO.NET数据对象指定为Source
基本上和上面的用法相同，但是注意格式，特别是GridView的用法.
View Code
<Window x:Class="Chapter_04.Ado" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Ado" Height="300" Width="400"> <StackPanel> <ListView x:Name="listView1"> <ListView.View> <GridView> <GridViewColumn Header="学号" Width="60" DisplayMemberBinding="{Binding UserNo}"/> <GridViewColumn Header="昵称" Width="60" DisplayMemberBinding="{Binding UserName}"/> <GridViewColumn Header="姓名" Width="60" DisplayMemberBinding="{Binding UserRealName}"/> <GridViewColumn Header="邮箱" Width="120" DisplayMemberBinding="{Binding UserEmail}"/> </GridView> </ListView.View> </ListView> </StackPanel> </Window>
CS
View Code using System; using System.Collections.Generic; using System.Linq; using System.Text; 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.Shapes; using System.Data; namespace Chapter_04 { /// <summary> /// Ado.xaml 的交互逻辑 /// </summary> public partial class Ado : Window { public DataTable dt = null; public Ado() { IntiData(); InitializeComponent(); //this.listView1.ItemsSource = dt.DefaultView; this.listView1.DataContext = dt; this.listView1.SetBinding(ListView.ItemsSourceProperty,new Binding()); } private void IntiData() { dt = new DataTable("T_User"); dt.Columns.Add("UserNo", typeof(string)); dt.Columns.Add("UserName", typeof(string)); dt.Columns.Add("UserRealName", typeof(string)); dt.Columns.Add("UserEmail", typeof(string)); dt.Columns.Add("UserAddress", typeof(string)); for (int i = 0; i < 10; i++) { DataRow dr = dt.NewRow(); dr["UserNo"] = "10000" + i.ToString(); dr["UserName"] = "haiziguo"; dr["UserRealName"] = "李占朋"; dr["UserEmail"] = "lizhpeng@126.com"; dt.Rows.Add(dr); } } } }
显示结果如图7：
图7
通过上面的一个演示，我们应该知道ListView和GridView不是同一级别的控件，GridView是作为ListView的View属性的值，其中View和GridView都是属于ViewBase类型对象。如果不是很理解的话，在模板笔记里面还会具体的记录。还有个地方是"this.listView1.ItemsSource = dt.DefaultView;“DataTable是不能直接赋值给ItemsSource的，如果赋值可以用DefaultView属性。把这一句取消注释，然后注释掉下面的两行，可以看到相同的结果。
2.7 XmlDataProvider把XML数据指定为source
XML是什么以及xml的用途，在此不作为重点，本文重点介绍怎么把XML绑定到UI控件中。 XmlDataProvider就是把XML数据作为数据源提供给Binding。下面实现一个需求，就是把XML的数据显示在TreeViewItem里面。先给出XML文件，然后分别给出XAML和CS代码：
XML
<?xml version="1.0" encoding="utf-8" ?> <Department Name="公司部门"> <Department Name="软件组"> <Department Name="Tom"/> <Department Name="Tom1"/> </Department> <Department Name="客服组"> <Department Name="Tim"/> <Department Name="Tim1"/> </Department> </Department>
XAML
<Window x:Class="Chapter_04.Source" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Source" Height="312" Width="1090"> <StackPanel Orientation="Horizontal"> <Grid Width="150"> <TreeViewItem> <TreeViewItem.Header>各个部门以及其成员</TreeViewItem.Header> <TreeView x:Name="treeViewDepartment"> <TreeView.ItemTemplate> <HierarchicalDataTemplate ItemsSource="{Binding XPath=Department}"> <TextBlock Text="{Binding XPath=@Name}"/> </HierarchicalDataTemplate> </TreeView.ItemTemplate> </TreeView> </TreeViewItem> </Grid> </StackPanel> </Window>
CS
using System; using System.Collections.Generic; using System.Linq; using System.Text; 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.Shapes; namespace Chapter_04 { /// <summary> /// Source.xaml 的交互逻辑 /// </summary> public partial class Source : Window { public Source() { InitializeComponent(); XmlDataProvider xdp = new XmlDataProvider(); xdp.Source = new Uri(@"E:\WPFCode\Chapter_04\Chapter_04\Department.xml"); xdp.XPath = @"/Department"; treeViewDepartment.DataContext = xdp; treeViewDepartment.SetBinding(TreeView.ItemsSourceProperty, new Binding()); } } }
另外一种写法思路是把XML文件当做资源，然后在前台绑定：
View Code
<Window x:Class="Chapter_04.Source" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Source" Height="312" Width="1090"> <StackPanel Orientation="Horizontal"> <Grid Width="150"> <TreeViewItem> <TreeViewItem.Header>各个部门以及其成员</TreeViewItem.Header> <TreeView x:Name="treeViewDepartment" ItemsSource="{Binding Source={StaticResource ResourceKey=xmlDepartment}}"> <TreeView.ItemTemplate> <HierarchicalDataTemplate ItemsSource="{Binding XPath=Department}"> <TextBlock Text="{Binding XPath=@Name}"/> </HierarchicalDataTemplate> </TreeView.ItemTemplate> </TreeView> </TreeViewItem> </Grid> </StackPanel> </Window>
CS
using System; using System.Collections.Generic; using System.Linq; using System.Text; 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.Shapes; namespace Chapter_04 { /// <summary> /// Source.xaml 的交互逻辑 /// </summary> public partial class Source : Window { public Source() { InitTreeView(); InitializeComponent(); } protected void InitTreeView() { XmlDataProvider xdp = new XmlDataProvider(); xdp.Source = new Uri(@"E:\WPFCode\Chapter_04\Chapter_04\Department.xml"); xdp.XPath = @"/Department"; this.Resources.Add("xmlDepartment",xdp); } } }
效果图为图8：
图8
简单的实现了让XML的文件显示到了TreeViewItem，但是美中不足的是这里用到了HierarchicalDataTemplate模板，不过作为一个参考吧，或者等到介绍完Template再回来看看也不错。最后要注意的是：关于绑定的时间<TextBlock Text="{Binding XPath=@Name}"/> 里面加@表示Attribute，不加@的话表示子集元素。
2.8 ObjectDataProvider对象指定为Source
Binding的源不仅可以是通过XmlDataProvider提供的XML数据，还可以是ObjectDataProvider类提供的类的实例。XmlDataProvider与ObjectDataProvider都是继承于抽象类DataSourceProvider。下面用个图来解释一下ObjectDataProvider对象，如图9：
图9
其中ObjectDataProvider对象的ObjectInstance属性是类的实例化对象（Obj），MethodParamers属性为Obj的方法，其中方法中还可以含有参数。最后返回结果为ObjectDataProvider对象的Data属性。 这样做的结果是更方便了程序员的分工，很简单的就绑定了一个返回值。 下面实现一个加法的运算：
Calculator.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
namespace Chapter_04
{
public class Calculator
{
public string Add(string arg1, string arg2)
{
double x = 0; double y = 0; double z = 0;
if (double.TryParse(arg1, out x) && double.TryParse(arg2, out y))
{
z = x + y;
return z.ToString();
}
return "input Error";
}
}
}
XAML
<Window x:Class="Chapter_04.ObjectDataProviderTest" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="ObjectDataProviderTest" Height="300" Width="300"> <StackPanel Background="LightBlue"> <TextBox Name="FristParam" Margin="5" ></TextBox> <TextBox Name="SecondParam" Margin="5" ></TextBox> <TextBox Name="Result" Margin="5"></TextBox> </StackPanel> </Window>
CS
using System; using System.Collections.Generic; using System.Linq; using System.Text; 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.Shapes; namespace Chapter_04 { /// <summary> /// ObjectDataProviderTest.xaml 的交互逻辑 /// </summary> public partial class ObjectDataProviderTest : Window { public ObjectDataProviderTest() { InitializeComponent(); SetBinding(); } private void SetBinding() { ObjectDataProvider odp = new ObjectDataProvider(); odp.ObjectInstance = new Calculator(); odp.MethodName = "Add"; odp.MethodParameters.Add("0"); odp.MethodParameters.Add("0"); //MessageBox.Show(odp.Data.ToString()); Binding bindArg1 = new Binding("MethodParameters[0]") { Source = odp, //把UI元素收集到的元素直接赋给source BindsDirectlyToSource = true, //当目标更改时，立即设置新的源 UpdateSourceTrigger = UpdateSourceTrigger.PropertyChanged }; Binding bindArg2 = new Binding("MethodParameters[1]") { Source = odp, BindsDirectlyToSource = true, UpdateSourceTrigger = UpdateSourceTrigger.PropertyChanged }; Binding bindingToResult = new Binding(".") { Source = odp }; this.FristParam.SetBinding(TextBox.TextProperty, bindArg1); this.SecondParam.SetBinding(TextBox.TextProperty, bindArg2); this.Result.SetBinding(TextBox.TextProperty, bindingToResult); } } }
运行，如果在前两个文本框里面填上数字，结果就会出现了；如图10
图10
ObjectDataProvider对象作为绑定源还是很遵守“使用数据对象作为源，UI控件作为绑定对象”的原则，但是关于this.Result.SetBinding(TextBox.TextProperty,new Binding(".") { Source=odp});用“.”而不用“Data”来表示路径，我不是很理解，如果有大牛知道的话，欢迎留言。
2.9 通过Binding的RelativeSource属性相对的指定Source
绑定的源不仅用"绝对"的对象，还可以用“相对”的作为源。例如有的时间我们需要显示出上级的控件的宽度。需求是：将上级的第一个（从自身向上数起第一个）Grid的宽度显示在TextBox里面，由于比较简单，现在直接贴出代码。
XAML
<Window x:Class="RelativeSounceOfBinding.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525"> <Grid x:Name="g1" Background="Red" Margin="10"> <DockPanel x:Name="d1" Background="Orange" Margin="10"> <Grid x:Name="g2" Background="Yellow" Margin="10" Width="300"> <DockPanel x:Name="d2" Background="LawnGreen" Margin="10"> <TextBox Name="textBox1" FontSize="24" Margin="10" Background="AliceBlue" /> </DockPanel> </Grid> </DockPanel> </Grid> </Window>
CS
using System; using System.Collections.Generic; using System.Linq; using System.Text; 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 RelativeSounceOfBinding { /// <summary> /// MainWindow.xaml 的交互逻辑 /// </summary> public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); RelativeSource rs = new RelativeSource(); rs.AncestorLevel = 1; rs.AncestorType = typeof(Grid); Binding bind=new Binding("Width"){RelativeSource=rs}; this.textBox1.SetBinding(TextBox.TextProperty, bind); } } }
效果图如图11：
图11
RelativeSource rs = new RelativeSource();
rs.AncestorLevel = 1;
rs.AncestorType = typeof(Grid);
此处的源是RelativeSource类型的实例。AncestorLevel是指定向上查第几个类型为AncestorType的控件。顺便附上XAML实现的方法：
<TextBox Name="textBox1" FontSize="24" Margin="10" Background="AliceBlue" Text="{Binding RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type Grid},AncestorLevel=1},Path=Width}" />
三、总结
由于绑定与模板联系比较紧密，所以有的地方会用到模板，难免会有似懂非懂的感觉，不过等做完模板的笔记的话，再回来看，应该会慢慢的消化的。绑定在WPF中是比较重要的一章，在本文中仅仅是几个记录。鉴于文章写的太长自己坚持不住写，另一方面到时间复习的话也没有耐心看，所以就把绑定分为两篇去记录，下一篇《深入浅出WPF》笔记——绑定篇（二）会记录Binding对数据的转化和校验以及多路绑定。
