使用CollectionViewSource,通过Xaml绑定自动排序

时间:2021-09-12 09:57:19

使用CollectionViewSource,通过Xaml绑定自动排序

这个是一个完成分组和排序功能的Datagrid,同样只是简单的绑定到List集合,后台不用额外的代码,所有功能都在Xaml中完成:

首先在UI中定义CollectionViewSource资源,在这里定义排序和分组的规则

WPF中定义如下:

  1. <Window.Resources>
  2. <CollectionViewSource x:Key="ProductsGroup" Source="{Binding Products}">
  3. <- 分组描述->
  4. <CollectionViewSource.GroupDescriptions>
  5. <PropertyGroupDescription PropertyName="ProductDate" />
  6. </CollectionViewSource.GroupDescriptions>
  7. <--排序描述-->
  8. <CollectionViewSource.SortDescriptions>
  9. <scm:SortDescription PropertyName="ProductDate" Direction="Descending" />
  10. <scm:SortDescription PropertyName="ID" Direction="Ascending" />
  11. </CollectionViewSource.SortDescriptions>
  12. </CollectionViewSource>
  13. </Window.Resources>
  14. ...
  15. ...
  16. <DataGrid DataContext="{StaticResource ProductsGroup}" AutoGenerateColumns="False"
  17. ItemsSource="{Binding}" SelectedItem="{Binding SelectedProduct}" CanUserAddRows="False">
  18. <DataGrid.GroupStyle>
  19. <GroupStyle>
  20. <GroupStyle.HeaderTemplate>
  21. <DataTemplate>
  22. <TextBlock  x:Name="txt"  Background="LightBlue" FontWeight="Bold"
  23. Foreground="White" Margin="1" Padding="4,2,0,2"
  24. Text="{Binding Name,StringFormat='生产日期:/{0/}'}" />
  25. </DataTemplate>
  26. </GroupStyle.HeaderTemplate>
  27. </GroupStyle>
  28. </DataGrid.GroupStyle>
  29. <DataGrid.Columns>
  30. <DataGridTextColumn Binding="{Binding ID}" Header="编号" />
  31. <DataGridTextColumn Binding="{Binding Name}" Header="名称" />
  32. <DataGridTextColumn Binding="{Binding Desc}" Header="说明" />
  33. </DataGrid.Columns>
  34. </DataGrid>

<Window.Resources>
<CollectionViewSource x:Key="ProductsGroup" Source="{Binding Products}">
<CollectionViewSource.GroupDescriptions>
<PropertyGroupDescription PropertyName="ProductDate" />
</CollectionViewSource.GroupDescriptions>
<CollectionViewSource.SortDescriptions>
<scm:SortDescription PropertyName="ProductDate" Direction="Descending" />
<scm:SortDescription PropertyName="ID" Direction="Ascending" />
</CollectionViewSource.SortDescriptions>
</CollectionViewSource>
</Window.Resources>

...
...

<DataGrid DataContext="{StaticResource ProductsGroup}" AutoGenerateColumns="False"
ItemsSource="{Binding}" SelectedItem="{Binding SelectedProduct}" CanUserAddRows="False">
<DataGrid.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<TextBlock x:Name="txt" Background="LightBlue" FontWeight="Bold"
Foreground="White" Margin="1" Padding="4,2,0,2"
Text="{Binding Name,StringFormat='生产日期:/{0/}'}" />
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</DataGrid.GroupStyle>
<DataGrid.Columns>
<DataGridTextColumn Binding="{Binding ID}" Header="编号" />
<DataGridTextColumn Binding="{Binding Name}" Header="名称" />
<DataGridTextColumn Binding="{Binding Desc}" Header="说明" />
</DataGrid.Columns>
</DataGrid>

SL中定义如下:

  1. <UserControl.Resources>
  2. <CollectionViewSource x:Key="ProductsGroup" Source="{Binding Products}">
  3. <CollectionViewSource.GroupDescriptions>
  4. <PropertyGroupDescription PropertyName="ProductDate" />
  5. </CollectionViewSource.GroupDescriptions>
  6. <CollectionViewSource.SortDescriptions>
  7. <scm:SortDescription PropertyName="ProductDate" Direction="Descending" />
  8. <scm:SortDescription PropertyName="ID" Direction="Ascending" />
  9. </CollectionViewSource.SortDescriptions>
  10. </CollectionViewSource>
  11. </UserControl.Resources>
  12. ...
  13. ...
  14. <sdk:DataGrid DataContext="{StaticResource ProductsGroup}" AutoGenerateColumns="False"
  15. ItemsSource="{Binding}" SelectedItem="{Binding SelectedProduct}" Width="300" >
  16. <sdk:DataGrid.Columns>
  17. <sdk:DataGridTextColumn Binding="{Binding ID}" Header="编号" />
  18. <sdk:DataGridTextColumn Binding="{Binding Name}" Header="名称" />
  19. <sdk:DataGridTextColumn Binding="{Binding Desc}" Header="说明" />
  20. </sdk:DataGrid.Columns>
  21. </sdk:DataGrid>