WPF and Silverlight 学习笔记（二十三）：绑定集合数据源

绑定到集合数据源，原则上说只需要实现IEnumerable接口的类型均可以做为集合数据源进行数据绑定，例如：定义一个学生类（StudentInfo），一个学生集合类（继承ObservableCollection<StudentInfo>类），在集合类中添加若干学生的信息。

1: using System.ComponentModel;

2: 

3: namespace WPFBindingCollection

4: {

5:     /// <summary>

6:     /// 学生信息类

7:     /// </summary>

8:     public class StudentInfo : INotifyPropertyChanged

9:     {

10:         private int _StudentID;

11:         private string _StudentName;

12:         private double _Score;

13:         private string _HeaderImage;

14: 

15:         public int StudentID

16:         {

17:             set

18:             {

19:                 if (value != _StudentID)

20:                 {

21:                     _StudentID = value;

22:                     Notify("StudentID");

23:                 }

24:             }

25:             get

26:             {

27:                 return _StudentID;

28:             }

29:         }

30:         public string StudentName

31:         {

32:             set

33:             {

34:                 if (value != _StudentName)

35:                 {

36:                     _StudentName = value;

37:                     Notify("StudentName");

38:                 }

39:             }

40:             get

41:             {

42:                 return _StudentName;

43:             }

44:         }

45:         public double Score

46:         {

47:             set

48:             {

49:                 if (value != _Score)

50:                 {

51:                     _Score = value;

52:                     Notify("Score");

53:                 }

54:             }

55:             get

56:             {

57:                 return _Score;

58:             }

59:         }

60:         public string HeaderImage

61:         {

62:             set

63:             {

64:                 if (value != _HeaderImage)

65:                 {

66:                     _HeaderImage = value;

67:                     Notify("HeaderImage");

68:                 }

69:             }

70:             get

71:             {

72:                 return _HeaderImage;

73:             }

74:         }

75: 

76:         public override string ToString()

77:         {

78:             return string.Format(

79:                 "Student ID is {0},Name is {1},Score is {2},Header Image File Name is {3}.",

80:                 StudentID, StudentName, Score, HeaderImage);

81:         }

82: 

83:         public event PropertyChangedEventHandler PropertyChanged;

84: 

85:         private void Notify(string propertyName)

86:         {

87:             if (PropertyChanged != null)

88:             {

89:                 PropertyChanged(this, new PropertyChangedEventArgs(propertyName));

90:             }

91:         }

92:     }

93: }

 

1: using System;

2: using System.Collections.ObjectModel;

3: 

4: namespace WPFBindingCollection

5: {

6:     /// <summary>

7:     /// 学生集合类

8:     /// </summary>

9:     public class MyStudentCollection : ObservableCollection<StudentInfo>

10:     {

11:         public MyStudentCollection()

12:         {

13:             Random ran = new Random();

14:             for (int i = 1; i <= 10; i++)

15:             {

16:                 int id = i;

17:                 string name = string.Format("Student {0}", (char)(64 + i));

18:                 double score = Math.Round((ran.NextDouble() * 40 + 60), 2);

19:                 string image = string.Format(

20:                     "Images/Image{0}.gif", i);

21: 

22:                 StudentInfo info = new StudentInfo()

23:                    {

24:                        StudentID = id,

25:                        StudentName = name,

26:                        Score = score,

27:                        HeaderImage = image

28:                    };

29: 

30:                 Add(info);

31:             }

32:         }

33:     }

34: }

将其做为整个应用程序的资源，添加到App.xaml文件中：

1: <Application x:Class="WPFBindingCollection.App"

2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

4:     xmlns:local="clr-namespace:WPFBindingCollection"

5:     StartupUri="Window1.xaml">

6:     <Application.Resources>

7:         <local:MyStudentCollection x:Key="myDataSource" />

8:     </Application.Resources>

9: </Application>

一、将集合绑定到文本框

如果类似于上两节那样，将集合做为数据源绑定到文本框上：

1: <Window x:Class="WPFBindingCollection.BindingCollectionDemo1"

2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

4:     Title="绑定集合到文本框" Height="200" Width="300">

5:     <Window.DataContext>

6:         <Binding Source="{StaticResource myDataSource}" />

7:     </Window.DataContext>

8:     <Grid Margin="5">

9:         <Grid.RowDefinitions>

10:             <RowDefinition Height="21*" />

11:             <RowDefinition Height="21*" />

12:             <RowDefinition Height="21*" />

13:             <RowDefinition Height="21*" />

14:             <RowDefinition Height="16*" />

15:         </Grid.RowDefinitions>

16:         <Grid.ColumnDefinitions>

17:             <ColumnDefinition Width="3*" />

18:             <ColumnDefinition Width="7*"/>

19:         </Grid.ColumnDefinitions>

20:         <TextBlock Grid.Row="0" Grid.Column="0"

21:                    HorizontalAlignment="Right" VerticalAlignment="Center"

22:                    Text="学号：" />

23:         <TextBlock Grid.Row="1" Grid.Column="0"

24:                    HorizontalAlignment="Right" VerticalAlignment="Center"

25:                    Text="姓名：" />

26:         <TextBlock Grid.Row="2" Grid.Column="0"

27:                    HorizontalAlignment="Right" VerticalAlignment="Center"

28:                    Text="成绩：" />

29:         <TextBlock Grid.Row="3" Grid.Column="0"

30:                    HorizontalAlignment="Right" VerticalAlignment="Center"

31:                    Text="图片：" />

32:

33:         <TextBox Grid.Row="0" Grid.Column="1"

34:                  Text="{Binding Path=StudentID}" />

35:         <TextBox Grid.Row="1" Grid.Column="1"

36:                  Text="{Binding Path=StudentName}" />

37:         <TextBox Grid.Row="2" Grid.Column="1"

38:                  Text="{Binding Path=Score}" />

39:         <Image Grid.Row="3" Grid.Column="1" HorizontalAlignment="Left"

40:                  Source="{Binding Path=HeaderImage}" />

41:

42:         <StackPanel Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="2"

43:                     Orientation="Horizontal" HorizontalAlignment="Center">

44:             <Button x:Name="First" Margin="5,0,5,0" Click="NavigateButton_Click">

45:                 <Image Source="NavigateImage/DataContainer_MoveFirstHS.png" />

46:             </Button>

47:             <Button x:Name="Previous" Margin="5,0,5,0" Click="NavigateButton_Click"

48:                     IsEnabled="False">

49:                 <Image Source="NavigateImage/DataContainer_MovePreviousHS.png" />

50:             </Button>

51:             <Button x:Name="Next" Margin="5,0,5,0" Click="NavigateButton_Click">

52:                 <Image Source="NavigateImage/DataContainer_MoveNextHS.png" />

53:             </Button>

54:             <Button x:Name="Last" Margin="5,0,5,0" Click="NavigateButton_Click">

55:                 <Image Source="NavigateImage/DataContainer_MoveLastHS.png" />

56:             </Button>

57:         </StackPanel>

58:     </Grid>

59: </Window>

从程序的执行结果上来看，将集合绑定到类似于文本框这类控件上时，默认显示的是集合中的第一个元素。如果需要更改当前显示的元素，可以使用集合视图（CollectionView）对象。

二、集合视图

WPF中的集合与集合视图类似于DataSet中的DataTable与DataView的关系，集合视图用来提供一些绑定到集合数据源的辅助的功能，例如“指针”，筛选等功能，其继承结构如下：



对应不同的集合，可以使用不同的CollectionView：

IEnumerable接口集合对应CollectionView

IList接口集合对应ListCollectionView

IBindingList接口集合对应BindingCollectionView

要获取集合对应的集合视图可以通过CollectionViewSource类进行操作，例如上例中，实现四个按钮的点击操作，以完成对数据的导航：

1: private void NavigateButton_Click(object sender, RoutedEventArgs e)

2: {

3:     // 获取集合数据源

4:     MyStudentCollection source = (MyStudentCollection)(this.DataContext);

5: 

6:     // 获取集合视图

7:     ICollectionView view = CollectionViewSource.GetDefaultView(source);

8: 

9:     // 确定点击的按钮

10:     Button btn = (Button) (e.Source);

11: 

12:     // 实现数据导航

13:     switch (btn.Name)

14:     {

15:         case "First":

16:             view.MoveCurrentToFirst();

17:             break;

18:         case "Previous":

19:             view.MoveCurrentToPrevious();

20:             break;

21:         case "Next":

22:             view.MoveCurrentToNext();

23:             break;

24:         case "Last":

25:             view.MoveCurrentToLast();

26:             break;

27:     }

28: 

29:     // 处理按钮状态

30:     Previous.IsEnabled = true;

31:     Next.IsEnabled = true;

32:     if (view.CurrentPosition == 0)

33:     {

34:         Previous.IsEnabled = false;

35:     }

36:     if (view.CurrentPosition == source.Count - 1)

37:     {

38:         Next.IsEnabled = false;

39:     }

40: }

三、绑定集合数据源到ListBox控件

对于类似于ListBox、ComboBox、ListView等控件，可以直接显示集合数据源的所有的元素，在这里以ListBox为例，将前面的MyStudentCollection绑定到ListBox上。

1: <Window x:Class="WPFBindingCollection.BindingCollectionDemo2"

2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

4:     Title="绑定集合数据源到ListBox" Height="300" Width="580">

5:     <StackPanel>

6:         <ListBox Margin="5"

7:                  ItemsSource="{StaticResource myDataSource}" />

8:     </StackPanel>

9: </Window>

默认情况下，在ListBox中每一项显示的内容为集合元素类型的ToString返回的字符串，用户可以自定义Convertor或覆盖ToString方法达到更改显示内容的目的。

还可以在绑定时指定ListBox每一项显示的属性名（DisplayMemberPath）及内部保存的属性（SelectedValuePath），类似于Windows应用程序ListBox绑定时的DisplayMember和ValueMember。

 

1: <Window x:Class="WPFBindingCollection.BindingCollectionDemo2"

2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

4:     Title="绑定集合数据源到ListBox" Height="300" Width="580">

5:     <StackPanel>

6:         <ListBox Margin="5" x:Name="lstStudent"

7:                  ItemsSource="{StaticResource myDataSource}"

8:                  DisplayMemberPath="StudentName"

9:                  SelectedValuePath="StudentID"

10:                  SelectionChanged="ListBox_SelectionChanged"/>

11:     </StackPanel>

12: </Window>

 

1: private void ListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)

2: {

3:     int studenntID = (int) (lstStudent.SelectedValue);

4:     MessageBox.Show(

5:         string.Format("Selected student id is {0}.", studenntID),

6:         "Information", MessageBoxButton.OK, MessageBoxImage.Information);

7: }

 



还可以通过ItemTemplate定制显示的每一项的显示方式：

1: <Window x:Class="WPFBindingCollection.BindingCollectionDemo2"

2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

4:     Title="绑定集合数据源到ListBox" Height="247" Width="245">

5:     <StackPanel>

6:         <ListBox Margin="5" x:Name="lstStudent" Height="199"

7:                  ItemsSource="{StaticResource myDataSource}">

8:             <ListBox.ItemTemplate>

9:                 <DataTemplate>

10:                     <Grid>

11:                         <Grid.RowDefinitions>

12:                             <RowDefinition />

13:                             <RowDefinition />

14:                             <RowDefinition />

15:                         </Grid.RowDefinitions>

16:                         <Grid.ColumnDefinitions>

17:                             <ColumnDefinition Width="3*" />

18:                             <ColumnDefinition Width="3*" />

19:                             <ColumnDefinition Width="4*" />

20:                         </Grid.ColumnDefinitions>

21: 

22:                         <Image Grid.Row="0" Grid.Column="0" Grid.RowSpan="3"

23:                                Source="{Binding Path=HeaderImage}" />

24:                         <TextBlock Grid.Row="0" Grid.Column="1"

25:                                    Text="StudentID:" />

26:                         <TextBlock Grid.Row="1" Grid.Column="1"

27:                                    Text="StudentName:" />

28:                         <TextBlock Grid.Row="2" Grid.Column="1"

29:                                    Text="Score:" />

30:                         <TextBlock Grid.Row="0" Grid.Column="2"

31:                                    Text="{Binding Path=StudentID}" />

32:                <TextBlock Grid.Row="1" Grid.Column="2"

33:                                    Text="{Binding Path=StudentName}" />

34:                         <TextBlock Grid.Row="2" Grid.Column="2"

35:                                    Text="{Binding Path=Score}" />

36:                     </Grid>

37:                 </DataTemplate>

38:             </ListBox.ItemTemplate>

39:         </ListBox>

40:     </StackPanel>

41: </Window>

 

本系列博客索引页