经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » 程序设计 » C# » 查看文章
WPF/C#:显示分组数据的两种方式
来源:cnblogs  作者:mingupupup  时间:2024/6/19 15:14:39  对本文有异议

前言

本文介绍自己在遇到WPF对数据进行分组显示的需求时,可以选择的两种方案。一种方案基于ICollectionView,另一种方案基于IGrouping

基于ICollectionView实现

相关cs代码:

  1. [ObservableProperty]
  2. private ObservableCollection<People> people;
  3. public GroupDemoViewModel()
  4. {
  5. People = new ObservableCollection<People>
  6. {
  7. new People { Name = "小一", Class = "1班" },
  8. new People { Name = "小二", Class = "2班" },
  9. new People { Name = "王五", Class = "1班" },
  10. new People { Name = "小红", Class = "2班" },
  11. new People { Name = "小绿", Class = "1班" },
  12. new People { Name = "小刚", Class = "2班" },
  13. };
  14. MyView = CollectionViewSource.GetDefaultView(People);
  15. var groupDescription
  16. = new PropertyGroupDescription("Class");
  17. MyView.GroupDescriptions.Add(groupDescription);
  18. }

这段代码使用了WPF中的CollectionViewSourcePropertyGroupDescription类来对数据进行分组。

CollectionViewSource是一个用于提供数据视图的类,它允许你对数据进行排序、筛选和分组。

GetDefaultView方法返回一个默认视图,该视图是对People集合的包装。这个视图可以用于在UI中显示数据,并且可以应用各种视图操作(如排序、筛选和分组)。

PropertyGroupDescription是一个用于定义分组规则的类。这里创建了一个新的PropertyGroupDescription对象,并指定分组依据的属性为Class,这意味着数据将根据这意味着数据将根据People集合中每个对象的Class属性值进行分组。

xaml相关代码:

  1. <ui:ListView ItemsSource="{Binding MyView}">
  2. <ui:ListView.ItemTemplate>
  3. <DataTemplate >
  4. <StackPanel Orientation="Horizontal">
  5. <TextBlock Text="{Binding Name}" Margin="5"/>
  6. <TextBlock Text="{Binding Class}" Margin="5"/>
  7. </StackPanel>
  8. </DataTemplate>
  9. </ui:ListView.ItemTemplate>
  10. <ui:ListView.GroupStyle>
  11. <GroupStyle>
  12. <GroupStyle.HeaderTemplate>
  13. <DataTemplate>
  14. <TextBlock Text="{Binding Name}" FontWeight="Bold" FontSize="16"/>
  15. </DataTemplate>
  16. </GroupStyle.HeaderTemplate>
  17. </GroupStyle>
  18. </ui:ListView.GroupStyle>
  19. </ui:ListView>

GroupStyleGroupStyle.HeaderTemplate是用来自定义分组头部的显示方式。

GroupStyle: 这是一个用于定义分组样式的元素。它允许你为ui:ListView中的每个分组自定义外观和行为。在这个元素内部,你可以定义头部模板(HeaderTemplate)、容器样式(ContainerStyle)等。
GroupStyle.HeaderTemplate: 这个元素定义了分组头部的模板。通过这个模板,你可以自定义分组头部的外观。

实现的效果如下所示:

image-20240619122143726

基于IGrouping实现

在将数据分组时,我个人比较喜欢使用Linq的GroupBy。

相关cs代码如下:

  1. [ObservableProperty]
  2. private ObservableCollection<People> people;
  3. public IEnumerable<IGrouping<string?,People>> GroupedPeople { get; set; }
  4. public GroupDemoViewModel()
  5. {
  6. People = new ObservableCollection<People>
  7. {
  8. new People { Name = "小一", Class = "1班" },
  9. new People { Name = "小二", Class = "2班" },
  10. new People { Name = "王五", Class = "1班" },
  11. new People { Name = "小红", Class = "2班" },
  12. new People { Name = "小绿", Class = "1班" },
  13. new People { Name = "小刚", Class = "2班" },
  14. };
  15. GroupedPeople = People.GroupBy(x => x.Class);
  16. }
  1. GroupedPeople = People.GroupBy(x => x.Class);

这行代码使用LINQ的GroupBy方法对People集合进行分组。

GroupBy(x => x.Class)的作用是根据People对象的Class属性的值将这个集合分成多个组。每个组是一个包含有相同Class值的People对象集合。这里的x代表People集合中的每一个People对象,x => x.Class是一个lambda表达式,指定了分组的依据是People对象的Class属性。

GroupBy方法的结果是一个IEnumerable<IGrouping<string?, People>>类型的对象。IGrouping<string?, People>接口表示一个分组,其中string?是分组键的类型(在这个例子中是Class属性的类型),People是集合中元素的类型。每个IGrouping<string?, People>对象包含一个键(Key属性,即Class的值)和一个集合(包含所有具有该Class值的People对象)。

相关xaml代码如下:

  1. <ui:ListView ItemsSource="{Binding GroupedPeople}">
  2. <ui:ListView.ItemTemplate>
  3. <DataTemplate >
  4. <Expander Header="{Binding Key}">
  5. <ui:ListView ItemsSource="{Binding}">
  6. <ItemsControl.ItemTemplate>
  7. <DataTemplate>
  8. <StackPanel Orientation="Horizontal">
  9. <TextBlock Text="{Binding Name}" Margin="5"/>
  10. <TextBlock Text="{Binding Class}" Margin="5"/>
  11. </StackPanel>
  12. </DataTemplate>
  13. </ItemsControl.ItemTemplate>
  14. </ui:ListView>
  15. </Expander>
  16. </DataTemplate>
  17. </ui:ListView.ItemTemplate>
  18. </ui:ListView>

使用了Expander控件。

Expander是WPF中的一个控件,中文通常翻译为“扩展器”或“可折叠控件”。它是一个容器控件,允许用户通过点击标题栏来展开或折叠其内容区域。这种控件在用户界面设计中非常有用,可以用来隐藏或显示详细信息,从而节省屏幕空间。

实现效果如下所示:

image-20240619123207859

image-20240619123228203

回顾

本文介绍了遇到WPF对数据进行分组显示的需求时,可以选择的两种方案。一种方案基于ICollectionView,另一种方案基于IGrouping

基于ICollectionView的方案,在cs代码中通过CollectionViewSource.GetDefaultView方法获得集合的默认视图,创建一个PropertyGroupDescription类,ICollectionViewGroupDescriptions属性添加创建的PropertyGroupDescription对象。在xaml代码中,除了一般的数据绑定外,还添加了ListView.GroupStyle,设置了 GroupStyle.HeaderTemplate

基于IGrouping的方案,在cs代码中,使用LinqGroupBy方法对People集合进行分组。在xaml代码中在ListView的数据模板中使用Expander控件绑定分组的Key属性,在Expander控件中再包含一个ListView控件,绑定每个分组中的数据项。

原文链接:https://www.cnblogs.com/mingupupu/p/18256035

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号