如何使用模板化组标题对列表框项进行分组 [英] How to group list box items with templated Group header

问题描述

亲爱的，

我有一个包含不同项目的列表框。为了更好地组织和轻松找到它们，我想根据命名的标题对我的项目进行分组，然后在列表中显示每个分组项目的标题，如下所示：

I have a list box which is full of different items. In order to better organise and find them easyly, I woould like to group my items based on an header named and then display the header of each grouped items in the list as shown below :

什么是这样分组我的项目并以这种方式显示标题的方式吗？

What is the way to group my items and show header in that way ?

此外我想做的是，如果我们为组家庭提供很多项目，例如，当我们向下滚动标题应该仍然可以在顶部显示，直到我们在视口中按下组

In addition what I would like to do is that if we hqve a lot of items for group familly for instance, when we scrol down the header should be still visible on top until we chnage the group in the viewport

感谢您的帮助

推荐答案

我有一个你想要的例子。 代码是VB，但这应该不是问题。

I have an example of what you want.  The code is VB but that should not be a problem.

首先，您要从项目中创建CollectionView。 然后在CollectionView中向PropertyView添加一个PropertyGroupDescription。

First you want to create a CollectionView from your items.  Then in the CollectionView add a PropertyGroupDescription to the CollectionView.

    Private _DBMovies As List(Of DBMovie)
    Public Property DBMovies() As List(Of DBMovie)
        Get
            Return _DBMovies
        End Get
        Set(ByVal value As List(Of DBMovie))
            _DBMovies = value

            Dim view As CollectionView = DirectCast(CollectionViewSource.GetDefaultView(value), CollectionView)
            Dim groupDescription As New PropertyGroupDescription("release_date")
            view.GroupDescriptions.Add(groupDescription)
            DBMoviesCollection = view
            RaiseChanged("DBMovies")
            RaiseChanged("DBMoviesCollection")
        End Set
    End Property

    Private _DBMoviesCollection As CollectionView
    Public Property DBMoviesCollection() As CollectionView
        Get
            Return _DBMoviesCollection
        End Get
        Set(ByVal value As CollectionView)
            _DBMoviesCollection = value
            RaiseChanged("DBMoviesCollection")
        End Set
    End Property

然后是XAML： 我使用的XAML是一个ListBox（没有内置的标题），这个列表框和"常规"之间的区别是listbox是GroupStyle

Then there is the XAML:  The XAML I use is a ListBox (no built in headers) and the difference between this listbox and a "regular" listbox is the GroupStyle

<ListBox ItemsSource="{Binding DBMoviesCollection}" SelectedItem="{Binding SelectedMovie}" TextBlock.FontSize="16">
                        <ListBox.GroupStyle>
                            <GroupStyle>
                                <GroupStyle.HeaderTemplate>
                                    <DataTemplate>
                                        <StackPanel Orientation="Horizontal" Background="Transparent" TextBlock.FontSize="28" Margin="0,0,20,0">
                                            <TextBlock Text="Release Date : " Margin="0,0,20,0"></TextBlock>
                                            <TextBlock FontWeight="Bold" Text="{Binding Name,StringFormat=ddd dd-MMM-yyyy}" Background="Transparent" ></TextBlock>
                                        </StackPanel>
                                    </DataTemplate>
                                </GroupStyle.HeaderTemplate>
                            </GroupStyle>
                        </ListBox.GroupStyle>

                        <ListBox.ItemsPanel>
                            <ItemsPanelTemplate>
                                <WrapPanel Orientation="Horizontal" Margin="0,10,0,10"
                                           ScrollViewer.HorizontalScrollBarVisibility="Disabled" 
                                           IsItemsHost="True" 
                                           Width="{Binding ActualWidth, Mode=OneWay, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListBox}}}">
                                    <WrapPanel.Background>
                                        <RadialGradientBrush>
                                            <GradientStop Color="#FFE2C5C5" Offset="0.997"/>
                                            <GradientStop Color="#FFC94F4F"/>
                                        </RadialGradientBrush>
                                    </WrapPanel.Background>
                                </WrapPanel>
                            </ItemsPanelTemplate>
                        </ListBox.ItemsPanel>

                        <ListBox.ItemTemplate>
                            <DataTemplate>
                                <Border BorderBrush="#FF48768B" BorderThickness="5" CornerRadius="8" Width="300" Height="140" Margin="0,0,30,20">
                                    <Border.Effect>
                                        <DropShadowEffect ShadowDepth="{StaticResource DShadowDepth}"/>
                                    </Border.Effect>
                                    <Border.Background>
                                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                            <GradientStop Color="#FF1197B6" Offset="0"/>
                                            <GradientStop Color="#FFDBE9EC" Offset="1"/>
                                        </LinearGradientBrush>
                                    </Border.Background>
                                    <Grid>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="Auto"></ColumnDefinition>
                                            <ColumnDefinition></ColumnDefinition>
                                        </Grid.ColumnDefinitions>

                                        <Image Grid.Column="0" Source="{Binding theSource}" Style="{StaticResource HoverImage}" Height="64" Margin="0,0,20,0"></Image>
                                        <Grid Grid.Column="1" TextBlock.FontSize="24">
                                            <Grid.RowDefinitions>
                                                <RowDefinition Height="Auto"></RowDefinition>
                                                <RowDefinition></RowDefinition>
                                            </Grid.RowDefinitions>

                                            <TextBlock Grid.Row="0" Text="{Binding title}" TextWrapping="Wrap"></TextBlock>
                                            <TextBlock Grid.Row="1" Text="{Binding release_date, StringFormat={}{0:yyyy-MM-dd}}"></TextBlock>
                                            
                                            <Grid.ToolTip>
                                                <ToolTip Background="Transparent" BorderThickness="0">
                                                <Border BorderBrush="Black" BorderThickness="5" CornerRadius="5">
                                                    <Border.Background>
                                                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                            <GradientStop Color="#FF52B9E0" Offset="0.015"/>
                                                            <GradientStop Color="#FFEEF2F3" Offset="1"/>
                                                        </LinearGradientBrush>
                                                    </Border.Background>
                                                    <TextBlock Text="{Binding overview}" TextWrapping="Wrap" MaxWidth="400" Margin="5" FontSize="24" ></TextBlock>
                                                </Border>
                                                </ToolTip>
                                            </Grid.ToolTip>
                                        </Grid>
                                    </Grid>
                                </Border>
                            </DataTemplate>
                        </ListBox.ItemTemplate>

                    </ListBox>

这篇关于如何使用模板化组标题对列表框项进行分组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！