How to group ListBoxItems by first letter in WPF using XAML?

Question

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

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>

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:

Thanks for all the help!

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>

Medorra

Answer 1

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}}">
    ...

Converter:

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();
    }
}

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>
  ...

Pavkovic

Thomas thanks for the reply. I am unable to understand one line in the resources and that is <scm:SortDescription PropertyName="AccountName" />. What were you referring to with the scm namespace and what is SortDescription that follows? Thanks. – Medorra

The scm XML namespace is mapped to System.ComponentModel in WindowsBase.dll: xmlns:scm="clr-namespace:System.ComponentModel;assembly=WindowsBase" – Pavkovic

And SortDescription indicates the sort criteria – Pavkovic

Thanks Thomas. I am able to successfully compile my code now. I have updated my question above with your code included. Running the app now doesn't show any accounts in the list and Visual Studio 2010 crashes each time I exit the debug mode or try to open the desing mode of the .xaml file. I am quite sure that I haven't integrated the code you wrote in the .xaml file appropriately. Could you take a glance at it? Thank you so much. – Medorra

@Boris, check if you have binding errors in VS output window. Anyway, whatever the problem is, it shouldn't make VS crash... – Pavkovic

@Thomas, I got it to work. Thanks so much for your efforts. I have updated the post again to show the final result. – Medorra

Answer 2

Here is an example of a solution that is very similar:

Firstly, we need to generate a better collection for your DataContext - here's an example that you could easily modify for your purposes -

public Window1()
{
    InitializeComponent();
    var s = new[] { "Dave", "Adam", "Jeny", "Nick", "James" };
    DataContext = s
        .Select(n => n[0])
        .Distinct()
        .ToDictionary(l => l.ToString(), l => s
            .Where(w => w
                .StartsWith(l.ToString())));
}

then we just need nested ItemsControls for the UI -

<ItemsControl ItemsSource="{Binding}">
<ItemsControl.ItemTemplate>
  <DataTemplate>
    <StackPanel>
      <TextBlock Foreground="Red" Text="{Binding Key}" FontSize="12" Margin="5" />
      <ItemsControl ItemsSource="{Binding Value}">
        <ItemsControl.ItemTemplate>
          <DataTemplate>
            <StackPanel Orientation="Horizontal" Margin="5">
              <Button Content ="View" Margin="0,0,5,0" />
              <Button Content ="Delete"  Margin="0,0,5,0" />
              <TextBlock Text="{Binding}" />
            </StackPanel>
          </DataTemplate>
        </ItemsControl.ItemTemplate>
      </ItemsControl>
    </StackPanel>
  </DataTemplate>
</ItemsControl.ItemTemplate>

and we get this:

Jane

Thanks for the reply. I am clueless when it comes to LINQ; Could you just explain the following: DataContext = s.Select(n => n[0]).Distinct().ToDictionary(l => l.ToString(), l => s.Where(w => w.StartsWith(l.ToString()))); I don't mean that you convert it to something, I would just greatly appreciate if you could describe in plain English what's going on in there :) Thanks! – Medorra

All that the linq is doing is: 1) geting a list of all prefix characters in use ('D','A','J','N') 2) creating a Dictionary<string, IEnumerable<String>> where the key is the prefix, and the enumerable is all strings that match the prefix You could do the same using foreach loops etc – Jane

Got it, thanks. Although I completely understand your code now and it does answer my question, I prefer the solution provided by Thomas as it is a bit more WPF oriented. Nevertheless, cheers Dean and happy coding. – Medorra

Here you will have to manually raise a property/collection changed event, when the source changes, so this is not so great :( – Packer

This would be nice solution for me if selection of item would be on individual name and not on the whole group of names. I am not sure if there is a simple way how to achieve that. – Parotic