WPF里ItemsControl的分組實現

• 2022 年 10 月 30 日
• 筆記
• WPF

一、WPF里ItemsControl的分組實現

我們在用到ItemsControl時，有時會用到分組。如下圖所示，綁定一個普通一個數組如下所示：

數據類型為：

    public class Student
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Grades { get; set; }
    }

聲明一個上述數據類型的數組並將至綁定到ItemsControl控制項上，具體描述如下所示：

<Window x:Class="WpfApp1.MainWindow"
        xmlns="//schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="//schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="//schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="//schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Window.Resources>
        <ResourceDictionary>
            <x:Array x:Key="TestList" Type="{x:Type local:Student}">
                <local:Student Id="21" Name="John" Grades="九年級"></local:Student>
                <local:Student Id="19" Name="John" Grades="八年級"></local:Student>
                <local:Student Id="56" Name="John" Grades="七年級"></local:Student>
                <local:Student Id="20" Name="John" Grades="七年級"></local:Student>
                <local:Student Id="45" Name="John" Grades="九年級"></local:Student>
                <local:Student Id="46" Name="John" Grades="九年級"></local:Student>
            </x:Array>
        </ResourceDictionary>
    </Window.Resources>
    <ItemsControl ItemsSource="{StaticResource TestList}">
       <ItemsControl.ItemTemplate>
           <DataTemplate DataType="{x:Type local:Student}">
               <StackPanel Orientation="Horizontal">
                   <TextBlock Text="{Binding Id}"></TextBlock>
                   <TextBlock Text="{Binding Name}" Margin="5,2"></TextBlock>
                   <TextBlock Text="{Binding Grades}"></TextBlock>
                </StackPanel>
           </DataTemplate>
       </ItemsControl.ItemTemplate>
    </ItemsControl>
</Window>

具體效果如下所示：

如果我們實現對上述數據按照年級（Grades）進行分組並統計每個年級的人數並按照學號（Id）進行排序，可以使用GroupStyle實現分組，具體如下所示：

<Window x:Class="WpfApp1.MainWindow"
        xmlns="//schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="//schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="//schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="//schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp1"
        xmlns:componentModel="clr-namespace:System.ComponentModel;assembly=WindowsBase"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Window.Resources>
        <ResourceDictionary>
            <x:Array x:Key="TestList" Type="{x:Type local:Student}">
                <local:Student Id="21" Name="John" Grades="九年級"></local:Student>
                <local:Student Id="19" Name="John" Grades="八年級"></local:Student>
                <local:Student Id="56" Name="John" Grades="七年級"></local:Student>
                <local:Student Id="20" Name="John" Grades="七年級"></local:Student>
                <local:Student Id="45" Name="John" Grades="九年級"></local:Student>
                <local:Student Id="46" Name="John" Grades="九年級"></local:Student>
            </x:Array>
            <CollectionViewSource x:Key="TestListCollectionViewSource" Source="{StaticResource TestList}">
                <CollectionViewSource.SortDescriptions>
                    <!--排序描述-->
                    <componentModel:SortDescription PropertyName="Id"/>
                </CollectionViewSource.SortDescriptions>
                <CollectionViewSource.GroupDescriptions>
                    <!--分組描述-->
                    <PropertyGroupDescription PropertyName="Grades"/>
                </CollectionViewSource.GroupDescriptions>
            </CollectionViewSource>
        </ResourceDictionary>
    </Window.Resources>
    <ItemsControl ItemsSource="{Binding Source={StaticResource TestListCollectionViewSource}}">
       <ItemsControl.ItemTemplate>
           <DataTemplate DataType="{x:Type local:Student}">
               <StackPanel Orientation="Horizontal">
                   <TextBlock Text="{Binding Id}"></TextBlock>
                   <TextBlock Text="{Binding Name}" Margin="5,2"></TextBlock>
                   <TextBlock Text="{Binding Grades}"></TextBlock>
                </StackPanel>
           </DataTemplate>
       </ItemsControl.ItemTemplate>
        <ItemsControl.GroupStyle>
            <GroupStyle>
                <GroupStyle.ContainerStyle>
                    <Style TargetType="{x:Type GroupItem}">
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="{x:Type GroupItem}">
                                    <Expander IsExpanded="True"
                                              ExpandDirection="Down">
                                        <Expander.Header>
                                            <StackPanel Orientation="Horizontal">
                                                <TextBlock Text="{Binding Path=Name}"
                                                           VerticalAlignment="Center" />
                                                <TextBlock Text="{Binding Path=ItemCount, StringFormat=數量:{0}}"
                                                           VerticalAlignment="Center"
                                                           Margin="5,0,0,0" />
                                            </StackPanel>
                                        </Expander.Header>
                                        <ItemsPresenter />
                                    </Expander>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </GroupStyle.ContainerStyle>
            </GroupStyle>
        </ItemsControl.GroupStyle>
    </ItemsControl>
</Window>

具體分組排序效果如下所示：