基于ICollectionView實現(xiàn)

相關(guān)cs代碼：

[ObservableProperty]
private ObservableCollection<People> people;


public GroupDemoViewModel()
{
    People = new ObservableCollection<People>
    {
        new People { Name = "小一", Class = "1班" },
        new People { Name = "小二", Class = "2班" },
        new People { Name = "王五", Class = "1班" },
        new People { Name = "小紅", Class = "2班" },
        new People { Name = "小綠", Class = "1班" },
        new People { Name = "小剛", Class = "2班" },
    };
   
    MyView = CollectionViewSource.GetDefaultView(People);
    var groupDescription
        = new PropertyGroupDescription("Class");
    MyView.GroupDescriptions.Add(groupDescription); 
}

這段代碼使用了WPF中的CollectionViewSource與PropertyGroupDescription類來對數(shù)據(jù)進行分組。

CollectionViewSource是一個用于提供數(shù)據(jù)視圖的類，它允許你對數(shù)據(jù)進行排序、篩選和分組。

GetDefaultView方法返回一個默認視圖，該視圖是對People集合的包裝。這個視圖可以用于在UI中顯示數(shù)據(jù)，并且可以應(yīng)用各種視圖操作（如排序、篩選和分組）。

PropertyGroupDescription是一個用于定義分組規(guī)則的類。這里創(chuàng)建了一個新的PropertyGroupDescription對象，并指定分組依據(jù)的屬性為Class，這意味著數(shù)據(jù)將根據(jù)這意味著數(shù)據(jù)將根據(jù)People集合中每個對象的Class屬性值進行分組。

xaml相關(guān)代碼：

<ui:ListView ItemsSource="{Binding MyView}">
    <ui:ListView.ItemTemplate>
        <DataTemplate >
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding Name}" Margin="5"/>
                <TextBlock Text="{Binding Class}" Margin="5"/>
            </StackPanel>
        </DataTemplate>
    </ui:ListView.ItemTemplate>
    <ui:ListView.GroupStyle>
        <GroupStyle>
            <GroupStyle.HeaderTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Name}" FontWeight="Bold" FontSize="16"/>
                </DataTemplate>
            </GroupStyle.HeaderTemplate>
        </GroupStyle>
    </ui:ListView.GroupStyle>
</ui:ListView>

GroupStyle和GroupStyle.HeaderTemplate是用來自定義分組頭部的顯示方式。

GroupStyle: 這是一個用于定義分組樣式的元素。它允許你為ui:ListView中的每個分組自定義外觀和行為。在這個元素內(nèi)部，你可以定義頭部模板（HeaderTemplate）、容器樣式（ContainerStyle）等。
GroupStyle.HeaderTemplate: 這個元素定義了分組頭部的模板。通過這個模板，你可以自定義分組頭部的外觀。

實現(xiàn)的效果如下所示：

基于IGrouping實現(xiàn)

在將數(shù)據(jù)分組時，我個人比較喜歡使用Linq的GroupBy。

相關(guān)cs代碼如下：

  [ObservableProperty]
  private ObservableCollection<People> people;


  public IEnumerable<IGrouping<string?,People>> GroupedPeople { get; set; }


  public GroupDemoViewModel()
  {
      People = new ObservableCollection<People>
      {
          new People { Name = "小一", Class = "1班" },
          new People { Name = "小二", Class = "2班" },
          new People { Name = "王五", Class = "1班" },
          new People { Name = "小紅", Class = "2班" },
          new People { Name = "小綠", Class = "1班" },
          new People { Name = "小剛", Class = "2班" },
      };


      GroupedPeople = People.GroupBy(x => x.Class);    
  }

 GroupedPeople = People.GroupBy(x => x.Class); 

這行代碼使用LINQ的GroupBy方法對People集合進行分組。

GroupBy(x => x.Class)的作用是根據(jù)People對象的Class屬性的值將這個集合分成多個組。每個組是一個包含有相同Class值的People對象集合。這里的x代表People集合中的每一個People對象，x => x.Class是一個lambda表達式，指定了分組的依據(jù)是People對象的Class屬性。

GroupBy方法的結(jié)果是一個IEnumerable<IGrouping<string?, People>>類型的對象。IGrouping<string?, People>接口表示一個分組，其中string?是分組鍵的類型（在這個例子中是Class屬性的類型），People是集合中元素的類型。每個IGrouping<string?, People>對象包含一個鍵（Key屬性，即Class的值）和一個集合（包含所有具有該Class值的People對象）。

相關(guān)xaml代碼如下：

 <ui:ListView ItemsSource="{Binding GroupedPeople}">
     <ui:ListView.ItemTemplate>
         <DataTemplate >
             <Expander Header="{Binding Key}">
                 <ui:ListView ItemsSource="{Binding}">
                     <ItemsControl.ItemTemplate>
                         <DataTemplate>
                             <StackPanel Orientation="Horizontal">
                                 <TextBlock Text="{Binding Name}" Margin="5"/>
                                 <TextBlock Text="{Binding Class}" Margin="5"/>
                             </StackPanel>
                         </DataTemplate>
                     </ItemsControl.ItemTemplate>
                 </ui:ListView>
             </Expander>
         </DataTemplate>
     </ui:ListView.ItemTemplate>
 </ui:ListView>

使用了Expander控件。

Expander是WPF中的一個控件，中文通常翻譯為“擴展器”或“可折疊控件”。它是一個容器控件，允許用戶通過點擊標題欄來展開或折疊其內(nèi)容區(qū)域。這種控件在用戶界面設(shè)計中非常有用，可以用來隱藏或顯示詳細信息，從而節(jié)省屏幕空間。

實現(xiàn)效果如下所示：

回顧

本文介紹了遇到WPF對數(shù)據(jù)進行分組顯示的需求時，可以選擇的兩種方案。一種方案基于ICollectionView，另一種方案基于IGrouping。

基于ICollectionView的方案，在cs代碼中通過CollectionViewSource.GetDefaultView方法獲得集合的默認視圖，創(chuàng)建一個PropertyGroupDescription類，ICollectionView的GroupDescriptions屬性添加創(chuàng)建的PropertyGroupDescription對象。在xaml代碼中，除了一般的數(shù)據(jù)綁定外，還添加了ListView.GroupStyle，設(shè)置了GroupStyle.HeaderTemplate。

基于IGrouping的方案，在cs代碼中，使用Linq的GroupBy方法對People集合進行分組。在xaml代碼中在ListView的數(shù)據(jù)模板中使用Expander控件綁定分組的Key屬性，在Expander控件中再包含一個ListView控件，綁定每個分組中的數(shù)據(jù)項。

轉(zhuǎn)自https://www.cnblogs.com/mingupupu/p/18256035