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

WPF Samples中的示例

在WPF Samples中有一个关于Grouping的Demo。

该Demo结构如下:

image-20240617105742146

MainWindow.xaml如下:

  1. <Window x:Class="Grouping.MainWindow"
  2. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4. xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  5. xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  6. xmlns:local="clr-namespace:Grouping"
  7. mc:Ignorable="d"
  8. Title="MainWindow" Height="350" Width="525" SizeToContent="Height">
  9. <StackPanel>
  10. <StackPanel.Resources>
  11. <XmlDataProvider x:Key="MyTasks" XPath="Tasks/Task">
  12. <x:XData>
  13. <Tasks xmlns="">
  14. <Task Name="Groceries" Priority="2" Type="Home">
  15. <Description>Pick up Groceries and Detergent</Description>
  16. </Task>
  17. <Task Name="Laundry" Priority="2" Type="Home">
  18. <Description>Do Laundry</Description>
  19. </Task>
  20. <Task Name="Email" Priority="1" Type="Work">
  21. <Description>Email Clients</Description>
  22. </Task>
  23. <Task Name="Clean" Priority="3" Type="Work">
  24. <Description>Clean my office</Description>
  25. </Task>
  26. <Task Name="Dinner" Priority="1" Type="Home">
  27. <Description>Get ready for family reunion</Description>
  28. </Task>
  29. <Task Name="Proposals" Priority="2" Type="Work">
  30. <Description>Review new budget proposals</Description>
  31. </Task>
  32. </Tasks>
  33. </x:XData>
  34. </XmlDataProvider>
  35. </StackPanel.Resources>
  36. <TextBlock Margin="12,5,5,0" FontSize="20" Text="My Task List"/>
  37. <CheckBox Margin="10,5,5,10" Checked="AddGrouping"
  38. Unchecked="RemoveGrouping">Group by task type</CheckBox>
  39. <ItemsControl Margin="10" Name="myItemsControl"
  40. ItemsSource="{Binding Source={StaticResource MyTasks}}">
  41. <ItemsControl.ItemTemplate>
  42. <DataTemplate>
  43. <DataTemplate.Resources>
  44. <Style TargetType="TextBlock">
  45. <Setter Property="FontSize" Value="18"/>
  46. <Setter Property="HorizontalAlignment" Value="Center"/>
  47. </Style>
  48. </DataTemplate.Resources>
  49. <Grid>
  50. <Ellipse Fill="Silver"/>
  51. <StackPanel>
  52. <TextBlock Margin="3,3,3,0"
  53. Text="{Binding XPath=@Name}"/>
  54. <TextBlock Margin="3,0,3,7"
  55. Text="{Binding XPath=@Priority}"/>
  56. </StackPanel>
  57. </Grid>
  58. </DataTemplate>
  59. </ItemsControl.ItemTemplate>
  60. <ItemsControl.ItemContainerStyle>
  61. <Style>
  62. <Setter Property="Control.Width" Value="100"/>
  63. <Setter Property="Control.Margin" Value="5"/>
  64. </Style>
  65. </ItemsControl.ItemContainerStyle>
  66. <ItemsControl.GroupStyle>
  67. <GroupStyle>
  68. <GroupStyle.HeaderTemplate>
  69. <DataTemplate>
  70. <TextBlock FontWeight="Bold" FontSize="15"
  71. Text="{Binding Path=Name}"/>
  72. </DataTemplate>
  73. </GroupStyle.HeaderTemplate>
  74. </GroupStyle>
  75. </ItemsControl.GroupStyle>
  76. </ItemsControl>
  77. </StackPanel>
  78. </Window>

其中:

  1. <StackPanel.Resources>
  2. <XmlDataProvider x:Key="MyTasks" XPath="Tasks/Task">
  3. <x:XData>
  4. <Tasks xmlns="">
  5. <Task Name="Groceries" Priority="2" Type="Home">
  6. <Description>Pick up Groceries and Detergent</Description>
  7. </Task>
  8. <Task Name="Laundry" Priority="2" Type="Home">
  9. <Description>Do Laundry</Description>
  10. </Task>
  11. <Task Name="Email" Priority="1" Type="Work">
  12. <Description>Email Clients</Description>
  13. </Task>
  14. <Task Name="Clean" Priority="3" Type="Work">
  15. <Description>Clean my office</Description>
  16. </Task>
  17. <Task Name="Dinner" Priority="1" Type="Home">
  18. <Description>Get ready for family reunion</Description>
  19. </Task>
  20. <Task Name="Proposals" Priority="2" Type="Work">
  21. <Description>Review new budget proposals</Description>
  22. </Task>
  23. </Tasks>
  24. </x:XData>
  25. </XmlDataProvider>
  26. </StackPanel.Resources>

使用XmlDataProvider来加载和绑定XML数据。

  1. <ItemsControl Margin="10" Name="myItemsControl"
  2. ItemsSource="{Binding Source={StaticResource MyTasks}}">

将MyTasks绑定到ItemsControl。

  1. <DataTemplate>
  2. <DataTemplate.Resources>
  3. <Style TargetType="TextBlock">
  4. <Setter Property="FontSize" Value="18"/>
  5. <Setter Property="HorizontalAlignment" Value="Center"/>
  6. </Style>
  7. </DataTemplate.Resources>
  8. <Grid>
  9. <Ellipse Fill="Silver"/>
  10. <StackPanel>
  11. <TextBlock Margin="3,3,3,0"
  12. Text="{Binding XPath=@Name}"/>
  13. <TextBlock Margin="3,0,3,7"
  14. Text="{Binding XPath=@Priority}"/>
  15. </StackPanel>
  16. </Grid>
  17. </DataTemplate>

设置数据模板。

跟本次介绍的主题Grouping有关的内容如下:

  1. <ItemsControl.GroupStyle>
  2. <GroupStyle>
  3. <GroupStyle.HeaderTemplate>
  4. <DataTemplate>
  5. <TextBlock FontWeight="Bold" FontSize="15"
  6. Text="{Binding Path=Name}"/>
  7. </DataTemplate>
  8. </GroupStyle.HeaderTemplate>
  9. </GroupStyle>
  10. </ItemsControl.GroupStyle>

image-20240617110520481

ItemsControl.GroupStyle获取定义每个级别的组的外观的 GroupStyle 对象集合。

GroupStyle如下所示:

  1. public class GroupStyle : INotifyPropertyChanged
  2. {
  3. public static readonly ItemsPanelTemplate DefaultGroupPanel;
  4. public GroupStyle();
  5. public static GroupStyle Default { get; }
  6. [DefaultValue(0)]
  7. public int AlternationCount { get; set; }
  8. [DefaultValue(null)]
  9. public Style ContainerStyle { get; set; }
  10. [DefaultValue(null)]
  11. public StyleSelector ContainerStyleSelector { get; set; }
  12. [DefaultValue(null)]
  13. public string HeaderStringFormat { get; set; }
  14. [DefaultValue(null)]
  15. public DataTemplate HeaderTemplate { get; set; }
  16. [DefaultValue(null)]
  17. public DataTemplateSelector HeaderTemplateSelector { get; set; }
  18. [DefaultValue(false)]
  19. public bool HidesIfEmpty { get; set; }
  20. public ItemsPanelTemplate Panel { get; set; }
  21. protected event PropertyChangedEventHandler PropertyChanged;
  22. protected virtual void OnPropertyChanged(PropertyChangedEventArgs e);
  23. }
  24. }

这里设置了GroupStyle.HeaderTemplate,这个元素定义了分组头的数据模板。数据模板决定了分组头的具体显示方式。

  1. <TextBlock FontWeight="Bold" FontSize="15"
  2. Text="{Binding Path=Name}"/>

这里的Name指的是CollectionViewGroup 类的Name属性。

image-20240617123709245

CollectionViewGroup 类表示根据 GroupDescriptionsCollectionView 对象创建的组。

MainWindow.cs如下:

  1. public partial class MainWindow : Window
  2. {
  3. private CollectionView _myView;
  4. public MainWindow()
  5. {
  6. InitializeComponent();
  7. }
  8. private void AddGrouping(object sender, RoutedEventArgs e)
  9. {
  10. _myView = (CollectionView) CollectionViewSource.GetDefaultView(myItemsControl.ItemsSource);
  11. if (_myView.CanGroup)
  12. {
  13. var groupDescription
  14. = new PropertyGroupDescription("@Type");
  15. _myView.GroupDescriptions.Add(groupDescription);
  16. }
  17. }
  18. private void RemoveGrouping(object sender, RoutedEventArgs e)
  19. {
  20. _myView = (CollectionView) CollectionViewSource.GetDefaultView(myItemsControl.ItemsSource);
  21. _myView.GroupDescriptions.Clear();
  22. }
  23. }

只包含两个事件处理程序。

进行分组是这样写的:

  1. private void AddGrouping(object sender, RoutedEventArgs e)
  2. {
  3. _myView = (CollectionView) CollectionViewSource.GetDefaultView(myItemsControl.ItemsSource);
  4. if (_myView.CanGroup)
  5. {
  6. var groupDescription
  7. = new PropertyGroupDescription("@Type");
  8. _myView.GroupDescriptions.Add(groupDescription);
  9. }
  10. }
  1. _myView = (CollectionView) CollectionViewSource.GetDefaultView(myItemsControl.ItemsSource);

虽然CollectionViewSource本身不是一个静态类,但它提供了一个静态方法GetDefaultView,这个方法用于获取与特定数据源关联的默认视图。这种设计允许开发者不必实例化CollectionViewSource对象就能访问和操作数据源的视图。

image-20240617112246415

  1. var groupDescription
  2. = new PropertyGroupDescription("@Type");
  3. _myView.GroupDescriptions.Add(groupDescription);

image-20240617112656587

PropertyGroupDescription类描述使用属性名作为条件对项进行分组。

使用的是这个构造函数:

image-20240617112830520

  1. = new PropertyGroupDescription("@Type");

在XML和XPath的上下文中,@符号用于引用元素的属性。

这样就实现了基于Type属性进行分组。

  1. private void RemoveGrouping(object sender, RoutedEventArgs e)
  2. {
  3. _myView = (CollectionView) CollectionViewSource.GetDefaultView(myItemsControl.ItemsSource);
  4. _myView.GroupDescriptions.Clear();
  5. }

取消分组将_myView.GroupDescriptions清空即可。

该Demo的效果如下:

分组效果

分组前:

image-20240617113824832

分组后:

image-20240617113842413

代码来源

[WPF-Samples/Data Binding/Grouping at main · microsoft/WPF-Samples (github.com)]

欢迎关注微信公众号:DotNet学习交流。

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

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

本站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号