C# WPF DataGrid控件实现三级联动

2023-07-19 21:03:52

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

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

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

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

二.编写DataGrid控件的XAML代码

  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控件准备数据源对象

对象声明

  1. ObservableCollection<RegionInfo> regionInfoList = new ObservableCollection<RegionInfo>();//DataGrid的数据源

对象添加

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

对象绑定

  1. dataGrid.ItemsSource = regionInfoList;//绑定数据源

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

对象声明

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

对象添加

  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的选项中

  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. ComboBox curComboBox = sender as ComboBox;
  68. //为下拉控件绑定数据源，并选择原选项为默认选项
  69. string text = curComboBox.Text;
  70. //去除重复项查找，跟数据库连接时可以让数据库来实现
  71. int itemcount = 0;
  72. curComboBox.SelectedIndex = itemcount;
  73. foreach (var item in query.ToList())
  74. {
  75. if (item.Area == text)
  76. {
  77. curComboBox.SelectedIndex = itemcount;
  78. break;
  79. }
  80. itemcount++;
  81. }
  82. curComboBox.ItemsSource = query;
  83. curComboBox.IsDropDownOpen = true;//获得焦点后下拉
  84. }

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

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

哦哦，更新代码分别写在

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

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

DEMO工程

上一篇：JavaScript模拟列表跳转详情页面效果


下一篇：Oracle 表分组 group by和模糊查询like