4. 绑定到集合
在实际开发中,我们通常是将一个集合数据对象 (比如数据表) 绑定到一个 DataGrid 或者 ListBox 列表控件上,这时候我们就需要使用到集合绑定方式。WPF 特意为我们实现了一个 System.Collections.ObjectModel.ObservableCollection<T> 泛型集合,省却了我们写具备变更通知功能集合代码的时间。
Window1.xaml
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1">
<Grid>
<StackPanel>
<ListBox x:Name="listbox1"></ListBox>
</StackPanel>
</Grid>
</Window>
Window1.xaml.cs
{
public string Name { get; set; }
public int Age { get; set; }
public string Sex { get; set; }
}
public class PersonalList : ObservableCollection<Personal>
{
}
public partial class Window1 : Window
{
public Window1()
{
InitializeComponent();
var list = new PersonalList
{
new Personal { Name = "Tom", Age = 10, Sex = "Male" },
new Personal { Name = "Mary", Age = 15, Sex = "Female" },
new Personal { Name = "Jack", Age = 12, Sex = "Male" },
};
var binding = new Binding{ Source = list };
this.listbox1.SetBinding(ListBox.ItemsSourceProperty, binding);
this.listbox1.DisplayMemberPath = "Name";
}
}
注意使用 DisplayMemberPath 属性指定 ListBoxItem 的内容,否则会调用 ToString() 来显示结果。
当然,我们也可以直接绑定逻辑资源中的列表数据。
Window1.xaml
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:my="clr-namespace:Learn.WPF"
Title="Window1">
<Window.Resources>
<my:PersonalList x:Key="personals" >
<my:Personal Name="Tom" Age="10" Sex="Male" />
<my:Personal Name="Mary" Age="15" Sex="Female" />
<my:Personal Name="Jack" Age="12" Sex="Male" />
</my:PersonalList>
</Window.Resources>
<Grid>
<StackPanel>
<ListBox x:Name="listbox2"
ItemsSource="{Binding Source={StaticResource personals}}"
DisplayMemberPath="Name">
</ListBox>
</StackPanel>
</Grid>
</Window>
为了使用 Personal 和 PersonalList,我们引入了一个 CLR Namespace。
在主从结构 (Master-Detail) 显示中,我们通常要实现 "选择项跟踪" 功能,也就是说当我们选中主表的某个记录时,其他细节控件要同步刷新该记录的细节内容。
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:my="clr-namespace:Learn.WPF"
Title="Window1">
<Window.Resources>
<my:PersonalList x:Key="personals" >
<my:Personal Name="Tom" Age="10" Sex="Male" />
<my:Personal Name="Mary" Age="15" Sex="Female" />
<my:Personal Name="Jack" Age="12" Sex="Male" />
</my:PersonalList>
</Window.Resources>
<Grid>
<StackPanel>
<ListBox x:Name="listbox1"
ItemsSource="{Binding Source={StaticResource personals}}"
DisplayMemberPath="Name"
IsSynchronizedWithCurrentItem="True">
</ListBox>
<Label x:Name="lblName" Content="{Binding Source={StaticResource personals}, Path=Name}" />
<Label x:Name="lblAge" Content="{Binding Source={StaticResource personals}, Path=Age}"/>
<Label x:Name="lblSex" Content="{Binding Source={StaticResource personals}, Path=Sex}"/>
</StackPanel>
</Grid>
</Window>
我们将 ListBox.IsSynchronizedWithCurrentItem 置为 True,这样当我们改变 ListBox 选择项时,下面三个标签会自动同步变更为被选中记录的信息。
当然,我们还可以使用多个 ListBox,就像真正的主从表显示那样相互影响。
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:my="clr-namespace:Learn.WPF"
Title="Window1">
<Window.Resources>
<my:PersonalList x:Key="personals" >
<my:Personal Name="Tom" Age="10" Sex="Male" />
<my:Personal Name="Mary" Age="15" Sex="Female" />
<my:Personal Name="Jack" Age="12" Sex="Male" />
</my:PersonalList>
</Window.Resources>
<Grid>
<StackPanel>
<ListBox x:Name="listbox1"
ItemsSource="{Binding Source={StaticResource personals}}"
DisplayMemberPath="Name"
IsSynchronizedWithCurrentItem="True">
</ListBox>
<ListBox x:Name="listbox2"
ItemsSource="{Binding Source={StaticResource personals}}"
DisplayMemberPath="Age"
IsSynchronizedWithCurrentItem="True">
</ListBox>
</StackPanel>
</Grid>
</Window>
有一点需要说明,IsSynchronizedWithCurrentItem 不支持多项选择同步。
5. DataContext 共享源
在 上面的例子中,我们需要将同一资源绑定到多个 UI 元素上,很显然到处写 "{Binding Source={StaticResource personals}}" 是件很繁琐且不利于修改的做法。WPF 提供了一个称之为 "数据上下文 (DataContext)" 的东西让我们可以在多个元素上共享一个源对象,只需将其放到父元素 DataContext 属性即可。
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:my="clr-namespace:Learn.WPF"
Title="Window1">
<Window.Resources>
<my:PersonalList x:Key="personals" >
<my:Personal Name="Tom" Age="10" Sex="Male" />
<my:Personal Name="Mary" Age="15" Sex="Female" />
<my:Personal Name="Jack" Age="12" Sex="Male" />
</my:PersonalList>
</Window.Resources>
<Grid>
<StackPanel DataContext="{StaticResource personals}">
<ListBox x:Name="listbox1"
ItemsSource="{Binding}"
DisplayMemberPath="Name"
IsSynchronizedWithCurrentItem="True">
</ListBox>
<Label x:Name="lblName" Content="{Binding Path=Name}" />
<Label x:Name="lblAge" Content="{Binding Path=Age}"/>
<Label x:Name="lblSex" Content="{Binding Path=Sex}"/>
</StackPanel>
</Grid>
</Window>
当我们不给 Binding 扩展标志指定 Source 属性时,它会自动寻找上级父元素的数据上下文。
当然,我们也可以在代码中做同样的事情。
Window1.xaml
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:my="clr-namespace:Learn.WPF"
Title="Window1">
<Grid>
<StackPanel x:Name="stackPanel1">
<ListBox x:Name="listbox1"
ItemsSource="{Binding}"
DisplayMemberPath="Name"
IsSynchronizedWithCurrentItem="True">
</ListBox>
<Label x:Name="lblName" Content="{Binding Path=Name}" />
<Label x:Name="lblAge" Content="{Binding Path=Age}"/>
<Label x:Name="lblSex" Content="{Binding Path=Sex}"/>
</StackPanel>
</Grid>
</Window>
Window1.xaml.cs
{
public Window1()
{
InitializeComponent();
var list = new PersonalList {
new Personal{Name="Tom", Age=10, Sex="Male"},
new Personal{Name="Mary", Age=15, Sex="Female"},
new Personal{Name="Jack", Age=12, Sex="Male"},
};
this.stackPanel1.DataContext = list;
}
}
从上面的例子中,我们可以看出使用 DataContext 使得数据和 UI 分离更加灵活,因为 DataContext 可以跨越多级父元素。比如我们可以直接将数据源设置为 Window.DataContext。
{
public Window1()
{
... ...
this.DataContext = list;
}
}