如何使用 XAML 按 WPF 中的第一个字母对 ListBoxItems 进行分组? [英] How to group ListBoxItems by first letter in WPF using XAML?

问题描述

首先，这里是上一篇文章处理从 AccountsCollection.cs 类绑定到我的 ObservableCollection 帐户的 ListBox AccountListBox 数据.

First, here is the previous post that deals with the ListBox AccountListBox data binding to my ObservableCollection<Account> Accounts from the AccountsCollection.cs class.

所以现在我有一个绑定对象 AccountsCollection 和一个名为 AccountTemplate 的 DataTemplate 用于我在资源中定义的 ListBox:

So now I have a binding object AccountsCollection and a DataTemplate named AccountTemplate for my ListBox defined in the resources:

<Window.Resources>
    <controller:AccountsWindowController x:Key="AccountsCollection" />
    <DataTemplate x:Key="AccountTemplate">
        <DockPanel>
            <Button Name="EditButton" 
                    DockPanel.Dock="Right" 
                    Margin="3 0 3 0" 
                    VerticalAlignment="Center" 
                    Content="Edit" />
            <Button Name="DeleteButton" 
                    DockPanel.Dock="Right" 
                    Margin="3 0 3 0" 
                    VerticalAlignment="Center" 
                    Content="Delete" />
            <TextBlock Name="AccountName" 
                       VerticalAlignment="Center" 
                       Text="{Binding Name}" 
                       TextWrapping="NoWrap"
                       TextTrimming="CharacterEllipsis" />
        </DockPanel>
    </DataTemplate>
<Window.Resources>

这里是与 LisBox 本身相关的代码:

And here is the code related to the LisBox itself:

<ListBox Name="AccountsListBox" 
         Margin="12,38,12,41" 
         HorizontalContentAlignment="Stretch" 
         ScrollViewer.HorizontalScrollBarVisibility="Disabled" 
         ItemsSource="{Binding Accounts, 
             Source={StaticResource ResourceKey=AccountsCollection}}" 
         ItemTemplate="{StaticResource ResourceKey=AccountTemplate}" 
         MouseDoubleClick="AccountsListBox_MouseDoubleClick">
</ListBox>

我希望我的列表能够通过起始字母对所有帐户进行分组并在列表中显示该字母(我还想对那个字母标题应用一些设计).最终的结果应该是这样的:

I want my list to be designed to group all accounts by starting letter and to show that letter in the list (Also I want to apply some design to that letter header). The final result should be something like this:

感谢大家的帮助！

更新:这是成功实现分组的代码.

UPDATE: Here's the code with grouping successfully implemented.

<Window x:Class="Gui.Wpf.MainWindow" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:entities="clr-namespace:Entities.Accounts;assembly=Entities" 
    xmlns:contollers="clr-namespace:Gui.Wpf.Controllers" 
    xmlns:converters="clr-namespace:Gui.Wpf.Converters" 
    xmlns:componentModel="clr-namespace:System.ComponentModel;assembly=WindowsBase" 
    Title="MainWindow" 
    Width="525" 
    Height="350" >

<Window.Resources>

    <!-- Main window controller -->
    <contollers:MainWindowController 
        x:Key="MainWindowController" />

    <!-- Converter for first letter extraction from the account name -->
    <converters:FirstLetterConverter x:Key="FirstLetterConv" />

    <!-- View source for the AccountsListBox -->
    <CollectionViewSource 
        x:Key="AccountsView" 
        Source="{Binding Accounts, Source={StaticResource ResourceKey=MainWindowController}}">

        <!-- Sorting -->
        <CollectionViewSource.SortDescriptions>
            <componentModel:SortDescription PropertyName="AccountName" />
        </CollectionViewSource.SortDescriptions>

        <!-- Grouping -->
        <CollectionViewSource.GroupDescriptions>
            <PropertyGroupDescription PropertyName="AccountName" Converter="{StaticResource ResourceKey=FirstLetterConv}" />
        </CollectionViewSource.GroupDescriptions>

    </CollectionViewSource>

    <!-- Data template for the type Account -->
    <DataTemplate 
        DataType="{x:Type entities:Account}">
        <DockPanel>
            <Button 
                Name="DeleteButton" 
                DockPanel.Dock="Right" 
                Margin="3, 1, 3, 1" 
                VerticalAlignment="Center" 
                Content="Delete" />
            <Button 
                Name="EditButton" 
                DockPanel.Dock="Right" 
                Margin="3, 1, 3, 1" 
                VerticalAlignment="Center" 
                Content="Edit" />
            <TextBlock 
                Name="AccountNameTextBlock" 
                VerticalAlignment="Center" 
                Text="{Binding AccountName}" 
                TextWrapping="NoWrap" 
                TextTrimming="CharacterEllipsis" />
        </DockPanel>

    </DataTemplate>

    <!-- Data template for AccountListBox grouping -->
    <DataTemplate x:Key="GroupingHeader">
        <TextBlock Text="{Binding Path=Name}" Background="Black" Foreground="White" />
    </DataTemplate>

</Window.Resources>

<Grid>
    <ListBox 
        Name="AccountsListBox" 
        Width="300" 
        Height="200" 
        HorizontalAlignment="Center" 
        VerticalAlignment="Center" 
        ItemsSource="{Binding Source={StaticResource ResourceKey=AccountsView}}" 
        HorizontalContentAlignment="Stretch" >
        <ListBox.GroupStyle>
            <GroupStyle 
                HeaderTemplate="{StaticResource ResourceKey=GroupingHeader}" />
        </ListBox.GroupStyle>
    </ListBox>
</Grid>

推荐答案

你可以使用一个 CollectionViewSource 和一个转换器来提取首字母:

You can use a CollectionViewSource, and a converter to extract the first letter:

<local:FirstLetterConverter x:Key="firstLetterConverter" />

<CollectionViewSource x:Key="cvs" Source="{Binding Accounts, Source={StaticResource AccountsCollection}}">
    <CollectionViewSource.SortDescriptions>
        <scm:SortDescription PropertyName="AccountName" />
    </CollectionViewSource.SortDescriptions>
    <CollectionViewSource.GroupDescriptions>
        <PropertyGroupDescription PropertyName="AccountName" Converter="{StaticResource firstLetterConverter}" />
    </CollectionViewSource.GroupDescriptions>
</CollectionViewSource>

...

<ItemsControl ItemsSource="{Binding Source={StaticResource cvs}}">
    ...

转换器:

public class FirstLetterConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        string s = value as string;
        if (s != null && s.Length > 0)
            return s.Substring(0, 1);
        return string.Empty;
    }

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotSupportedException();
    }
}

如果你想给组应用一个样式，你可以使用GroupStyle属性:

If you want to apply a style to the group, you can use the GroupStyle property:

  ...
  <ItemsControl.GroupStyle>
    <GroupStyle>
      <GroupStyle.HeaderTemplate>
        <DataTemplate>
          <TextBlock FontWeight="Bold" FontSize="15" Text="{Binding Path=Name}" />
        </DataTemplate>
      </GroupStyle.HeaderTemplate>
      <GroupStyle.ContainerStyle>
        <Style TargetType="{x:Type GroupItem}">
          <Setter Property="Background" Value="Gray" />
          <Setter Property="Foreground" Value="White" />
        </Style>
      </GroupStyle.ContainerStyle>
    </GroupStyle>
  </ItemsControl.GroupStyle>
  ...

这篇关于如何使用 XAML 按 WPF 中的第一个字母对 ListBoxItems 进行分组?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！