利用DataGrid控件实现联动的功能,在数据库客户软件中是随处可见的,然而网上的资料却是少之又少,令人崩溃。

    本篇博文将介绍利用DataGrid控件模板定义的三个ComboBox实现“省、市、区”的三级联动。步骤如下:

    一.定义地域信息类(注意包含System.ComponentModel命名空间)

[csharp] view plain copy
 
  1. class RegionInfo : INotifyPropertyChanged //地区信息  
  2. {  
  3.     private string _province;//省  
  4.     private string _city;//市  
  5.     private string _area;//区  
  6.   
  7.     public event PropertyChangedEventHandler PropertyChanged;  
  8.   
  9.     public string Province  
  10.     {  
  11.         get { return _province; }  
  12.         set  
  13.         {  
  14.             _province = value;  
  15.             PropertyChanged(this, new PropertyChangedEventArgs("Province"));  
  16.         }  
  17.     }  
  18.     public string City  
  19.     {  
  20.         get { return _city; }  
  21.         set  
  22.         {  
  23.             _city = value;  
  24.             PropertyChanged(this, new PropertyChangedEventArgs("City"));  
  25.         }  
  26.     }  
  27.     public string Area  
  28.     {  
  29.         get { return _area; }  
  30.         set  
  31.         {  
  32.             _area = value;  
  33.             PropertyChanged(this, new PropertyChangedEventArgs("Area"));  
  34.         }  
  35.     }  
  36.     public RegionInfo(string province, string city, string area)//构造函数  
  37.     {  
  38.         _province = province;  
  39.         _city = city;  
  40.         _area = area;  
  41.     }  
  42. }  

    二.编写DataGrid控件的XAML代码

[csharp] view plain copy
 
  1. <!--AutoGenerateColumns="False"这句话告诉控件不自动生成列,是必要的,如果没有,控件会更具数据源自动生成列,这个在我们这种写法中看起来就有重复的两列数据-->  
  2. <DataGrid x:Name="dataGrid" ItemsSource="{Binding}" AutoGenerateColumns="False" HorizontalAlignment="Left" VerticalAlignment="Top" Height="319" Width="302">  
  3.     <DataGrid.Columns>  
  4.         <!--省-->  
  5.         <DataGridTemplateColumn Header="省" Width="100">  
  6.             <!--显示模式-->  
  7.             <DataGridTemplateColumn.CellTemplate>  
  8.                 <DataTemplate>  
  9.                     <TextBlock Text="{Binding Path=Province ,Mode=TwoWay}"></TextBlock>  
  10.                 </DataTemplate>  
  11.             </DataGridTemplateColumn.CellTemplate>  
  12.             <!--编辑模式-->  
  13.             <DataGridTemplateColumn.CellEditingTemplate>  
  14.                 <DataTemplate>  
  15.                     <ComboBox x:Name="ComboBoxProvince"  DropDownClosed="ProvinceDropDownClosed"  Loaded="ProvinceLoaded" Text="{Binding Path=Province ,Mode=TwoWay}" DisplayMemberPath="Province" ></ComboBox>  
  16.                 </DataTemplate>  
  17.             </DataGridTemplateColumn.CellEditingTemplate>  
  18.         </DataGridTemplateColumn>  
  19.         <!--市-->  
  20.         <DataGridTemplateColumn Header="市" Width="100">  
  21.             <!--显示模式-->  
  22.             <DataGridTemplateColumn.CellTemplate>  
  23.                 <DataTemplate>  
  24.                     <TextBlock Text="{Binding Path=City ,Mode=TwoWay}"></TextBlock>  
  25.                 </DataTemplate>  
  26.             </DataGridTemplateColumn.CellTemplate>  
  27.             <!--编辑模式-->  
  28.             <DataGridTemplateColumn.CellEditingTemplate>  
  29.                 <DataTemplate>  
  30.                     <ComboBox x:Name="ComboBoxCity" DropDownClosed="CityDropDownClosed" Loaded="CityLoaded" Text="{Binding Path=City,Mode=TwoWay}" DisplayMemberPath="City" ></ComboBox>  
  31.                 </DataTemplate>  
  32.             </DataGridTemplateColumn.CellEditingTemplate>  
  33.         </DataGridTemplateColumn>  
  34.         <!--区-->  
  35.         <DataGridTemplateColumn Header="区" Width="100">  
  36.             <!--显示模式-->  
  37.             <DataGridTemplateColumn.CellTemplate>  
  38.                 <DataTemplate>  
  39.                     <TextBlock Text="{Binding Path=Area}"></TextBlock>  
  40.                 </DataTemplate>  
  41.             </DataGridTemplateColumn.CellTemplate>  
  42.             <!--编辑模式-->  
  43.             <DataGridTemplateColumn.CellEditingTemplate>  
  44.                 <DataTemplate>  
  45.                     <ComboBox x:Name="ComboBoxArea"  DropDownClosed="AreaDropDownClosed" Loaded="AreaLoaded" Text="{Binding Path=Area}" DisplayMemberPath="Area" ></ComboBox>  
  46.                 </DataTemplate>  
  47.             </DataGridTemplateColumn.CellEditingTemplate>  
  48.         </DataGridTemplateColumn>  
  49.     </DataGrid.Columns>  
  50. </DataGrid>  

    三.为DataGrid控件准备数据源对象

    对象声明

 

[csharp] view plain copy
 
  1. ObservableCollection<RegionInfo> regionInfoList = new ObservableCollection<RegionInfo>();//DataGrid的数据源  

    对象添加

[csharp] view plain copy
 
  1. //DataGrid初始绑定数据  
  2. regionInfoList.Add(new RegionInfo("广东省", "深圳市", "罗湖区"));  
  3. regionInfoList.Add(new RegionInfo("广东省", "深圳市", "南山区"));  

    对象绑定

[csharp] view plain copy
 
  1. dataGrid.ItemsSource = regionInfoList;//绑定数据源  

    四.为DataGrid控件的模板列加载时提供选项

    对象声明

 

[csharp] view plain copy
 
  1. ObservableCollection<RegionInfo> regionInfoSelectList = new ObservableCollection<RegionInfo>();//用于DataGrid的模板列加载时提供选项  

    对象添加

[csharp] view plain copy
 
  1. //三级联动数据项  
  2. regionInfoSelectList.Add(new RegionInfo("广东省", "深圳市", "罗湖区"));  
  3. regionInfoSelectList.Add(new RegionInfo("广东省", "深圳市", "南山区"));  
  4. regionInfoSelectList.Add(new RegionInfo("广东省", "潮州市", "湘桥区"));  
  5. regionInfoSelectList.Add(new RegionInfo("广东省", "潮州市", "枫溪区"));  
  6. regionInfoSelectList.Add(new RegionInfo("湖北省", "武汉市", "江夏区"));  
  7. regionInfoSelectList.Add(new RegionInfo("湖北省", "武汉市", "武昌区"));  

    五.在DataGrid模板列加载的时候实时更新其数据源并绑定到ComboBox的选项中

[csharp] view plain copy
 
  1. /// <summary>  
  2. /// ProvinceLoaded 省份下拉列表框初始化,绑定数据源  
  3. /// </summary>  
  4. void ProvinceLoaded(object sender, RoutedEventArgs e)  
  5. {  
  6.     ComboBox curComboBox = sender as ComboBox;  
  7.     //为下拉控件绑定数据源,并选择原选项为默认选项  
  8.     string text = curComboBox.Text;  
  9.     //去除重复项查找,跟数据库连接时可以让数据库来实现  
  10.     var query = regionInfoSelectList.GroupBy(p => p.Province).Select(p => new { Province = p.FirstOrDefault().Province });  
  11.     int itemcount = 0;  
  12.     curComboBox.SelectedIndex = itemcount;  
  13.     foreach (var item in query.ToList())  
  14.     {  
  15.         if (item.Province == text)  
  16.         {  
  17.             curComboBox.SelectedIndex = itemcount;  
  18.             break;  
  19.         }  
  20.         itemcount++;  
  21.     }  
  22.     curComboBox.ItemsSource = query;  
  23.     curComboBox.IsDropDownOpen = true;//获得焦点后下拉  
  24. }  
  25. /// <summary>  
  26. /// CityLoaded 市下拉列表框初始化,绑定数据源  
  27. /// </summary>  
  28. void CityLoaded(object sender, RoutedEventArgs e)  
  29. {  
  30.     //获得当前选中项的省份信息  
  31.     string province = (dataGrid.SelectedItem as RegionInfo).Province;  
  32.     //查找选中省份下的市作为数据源  
  33.     var query = (from l in regionInfoSelectList  
  34.                     where (l.Province == province)  
  35.                     group l by l.City into grouped  
  36.                     select new { City = grouped.Key });  
  37.     ComboBox curComboBox = sender as ComboBox;  
  38.     //为下拉控件绑定数据源,并选择原选项为默认选项    
  39.     string text = curComboBox.Text;  
  40.     //去除重复项查找,跟数据库连接时可以让数据库来实现  
  41.     int itemcount = 0;  
  42.     curComboBox.SelectedIndex = itemcount;  
  43.     foreach (var item in query.ToList())  
  44.     {  
  45.         if (item.City == text)  
  46.         {  
  47.             curComboBox.SelectedIndex = itemcount;  
  48.             break;  
  49.         }  
  50.         itemcount++;  
  51.     }  
  52.     curComboBox.ItemsSource = query;  
  53.     curComboBox.IsDropDownOpen = true;//获得焦点后下拉  
  54. }  
  55. /// <summary>  
  56. /// AreaLoaded 区下拉列表框初始化,绑定数据源  
  57. /// </summary>  
  58. void AreaLoaded(object sender, RoutedEventArgs e)  
  59. {  
  60.     string province = (dataGrid.SelectedItem as RegionInfo).Province;  
  61.     string city = (dataGrid.SelectedItem as RegionInfo).City;  
  62.     //查找选中省份下的市作为数据源  
  63.     var query = (from l in regionInfoSelectList  
  64.                     where (l.Province == province && l.City == city)  
  65.                     group l by l.Area into grouped  
  66.                     select new { Area = grouped.Key });  
  67.   
  68.     ComboBox curComboBox = sender as ComboBox;  
  69.     //为下拉控件绑定数据源,并选择原选项为默认选项  
  70.     string text = curComboBox.Text;  
  71.     //去除重复项查找,跟数据库连接时可以让数据库来实现  
  72.     int itemcount = 0;  
  73.     curComboBox.SelectedIndex = itemcount;  
  74.     foreach (var item in query.ToList())  
  75.     {  
  76.         if (item.Area == text)  
  77.         {  
  78.             curComboBox.SelectedIndex = itemcount;  
  79.             break;  
  80.         }  
  81.         itemcount++;  
  82.     }  
  83.     curComboBox.ItemsSource = query;  
  84.     curComboBox.IsDropDownOpen = true;//获得焦点后下拉  
  85. }  

    做到这一步基本上算是做完了,但是编译运行后会发现在选择省或者市的时候,后面的选项并没有做相应的改变,这是上一篇文章 C# WPF DataGrid控件同行编辑的实时更新问题 所述的问题,所以还需最后一步

    六.参考 C# WPF DataGrid控件同行编辑的实时更新问题 解决更新问题(懒得再写一遍了哈哈)

    哦哦,更新代码分别写在

[csharp] view plain copy
 
  1. /// <summary>  
  2. /// CityDropDownClosed 市下拉列表框选择改变刷新  
  3. /// </summary>  
  4. private void CityDropDownClosed(object sender, EventArgs e)  
  5. {  
  6. }  
  7.   
  8. /// <summary>  
  9. /// ProvinceDropDownClosed 省份下拉列表框选择改变刷新  
  10. /// </summary>  
  11. private void ProvinceDropDownClosed(object sender, EventArgs e)  
  12. {  
  13. }  
  14.   
  15. /// <summary>  
  16. /// AreaDropDownClosed 区下拉列表框选择改变刷新  
  17. /// </summary>  
  18. private void AreaDropDownClosed(object sender, EventArgs e)  
  19. {  
  20. }  

 

这三个函数中。如果还想再只能点,在省下拉列表选择后,市下拉列表下拉。市下拉列表选择后,区下拉列表下拉,则可以参考 C# WPF 模拟键盘输入与UI控件进行交互 这篇文章,然后在上面提到的省、市两个下拉列表框中模拟键盘按下“TAD”键即可。

    DEMO工程