WPF ListView 分组 Grouping

Posted 2020-09-29 lopengye

在Resource里定义数据源和分组字段：

<CollectionViewSource x:Key="listData" Source="{Binding CategoryItemsView}">
            <CollectionViewSource.GroupDescriptions>
                <PropertyGroupDescription PropertyName="CategoryType"></PropertyGroupDescription>
            </CollectionViewSource.GroupDescriptions>
        </CollectionViewSource>

分组字段也可以在Loaded事件中用代码定义：

        private void FileManageCard_Loaded(object sender, RoutedEventArgs e)
        {
            CollectionView view = (CollectionView)CollectionViewSource.GetDefaultView(lvItemsCategory.ItemsSource);
            PropertyGroupDescription groupDescription = new PropertyGroupDescription("CategoryType");
            view.GroupDescriptions.Add(groupDescription);
        }

 

然后

 

<ListView Grid.Row="0"
                        x:Name="lvItemsCategory"
                        ItemsSource="{Binding Source={StaticResource listData}}"
                        Style="{StaticResource FileManagerListViewStyle}"
                        ItemContainerStyle="{StaticResource FileManagerListViewItemStyle}"
                        SelectionMode="Single">
                        <ListView.GroupStyle>
                            <GroupStyle>
                                <GroupStyle.HeaderTemplate>
                                    <DataTemplate>
                                        <StackPanel Orientation="Horizontal" Background="Transparent" Height="35">
                                            <TextBlock Text="{Binding Name}" FontSize="18" FontWeight="Bold" Foreground="Gray"/>
                                        </StackPanel>
                                    </DataTemplate>
                                </GroupStyle.HeaderTemplate>
                            </GroupStyle>
                        </ListView.GroupStyle>
                    </ListView>

 

 

最后附上Style和ItemContainerStyle：

    <Style x:Key="FileManagerListViewStyle" TargetType="{x:Type ListView}">
        <Setter Property="VerticalAlignment" Value="Top"></Setter>
        <Setter Property="HorizontalAlignment" Value="Stretch"></Setter>
        <Setter Property="AllowDrop" Value="{Binding IsAllowDrop}"></Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ListView}">
                    <ScrollViewer VerticalScrollBarVisibility="Hidden" HorizontalAlignment="Stretch">
                        <ItemsPresenter/>
                    </ScrollViewer>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="FileManagerListViewItemStyle" TargetType="{x:Type ListViewItem}">
        <Setter Property="HorizontalAlignment" Value="Stretch"></Setter>
        <Setter Property="Cursor" Value="Hand"></Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ListViewItem}">
                    <Border x:Name="back" Background="Transparent" Margin="0,0,0,0" Height="25">
                        <Grid Margin="20,0,0,0">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="30"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <Image  Grid.Column="0"
                                HorizontalAlignment="Center"
                                VerticalAlignment="Center"
                                Width="20"
                                Height="20"
                                Source="{Binding Icon,Converter={StaticResource ImgPathToImageConverter}}"/>
                            <DockPanel Grid.Column="1">
                                <TextBlock Text="{Binding DisplayName}"
                                    Height="25"
                                    Foreground="#FF6D6D6D"
                                    FontSize="16"/>
                                <TextBlock Text="{Binding Count,StringFormat=‘ ({0})‘}"
                                    Foreground="#FF6D6D6D"
                                    FontSize="16"></TextBlock>
                            </DockPanel>
                        </Grid>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="back" Property="Background" Value="LightGray"></Setter>
                        </Trigger>
                        <Trigger Property="IsSelected" Value="True">
                            <Setter TargetName="back" Property="Background" Value="Black"></Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>