You would use a
CollectionViewSource
and use grouping. I assume that you are using
WPF
. Here is a sample:
How to: Sort and Group Data Using a View in XAML - WPF .NET Framework | Microsoft Learn[
^].
Hereare some more things that you can do with the
CollectionViewSource
:
CollectionViewSource | 2,000 Things You Should Know About WPF[
^]
Here is an example using code only:
Grouping based on two or more properties[
^]
UPDATE
Here is a search with hundreds more examples:
wpf CollectionViewSource grouping - Google Search[
^]
UPDATE #2
You tend not not try very hard, that is why I pushed you to do your own research and try. That is what being a programmer is all about - learning and solving problems.
Here is what I have used to build a solution to your question:
GroupStyle | 2,000 Things You Should Know About WPF[
^]. In this code sample, it shows you how to group items in a
ListBox
control - The Group
Name
and the
Items
within that group.
For your requirement, you do not require the
Items
collection, just the
Count
. The
CollectionViewSource Class[
^] has a
CollectionViewSource.Source Property[
^]. In Xaml, this is the
Items
collection.
Now for a sample app:
1. Create a new WPF project named:
WpfCollectionViewSourceGrouping
2. Add a People class
namespace WpfCollectionViewSourceGrouping;
public class Person
{
public string Name { get; set; }
public string Country { get; set; }
}
3. Generate sample data in the
MainWindow.cs
class:
using System.Collections.ObjectModel;
namespace WpfCollectionViewSourceGrouping;
public partial class MainWindow
{
public ObservableCollection<Person> People { get; set; } = new();
private static List<string> countries = new()
{
"Australia",
"Canada",
"United Kingdom",
"United States"
};
public MainWindow()
{
InitializeComponent();
Random rand = new();
for (int i = 0; i < 20; i++)
{
People.Add(new(){ Name = $"Person {i}", Country = countries[rand.Next(0, countries.Count)]});
}
DataContext = this;
}
}
4. Now we can create our window / data views:
<Window x:Class="WpfCollectionViewSourceGrouping.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:scm="clr-namespace:System.ComponentModel;assembly=WindowsBase"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Grid>
<Grid.Resources>
<CollectionViewSource x:Key="GroupedView" Source="{Binding People}">
<CollectionViewSource.SortDescriptions>
<scm:SortDescription PropertyName="Country" />
<scm:SortDescription PropertyName="Name" />
</CollectionViewSource.SortDescriptions>
<CollectionViewSource.GroupDescriptions>
<PropertyGroupDescription PropertyName="Country" />
</CollectionViewSource.GroupDescriptions>
</CollectionViewSource>
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<ListBox ItemsSource="{Binding People}"
HorizontalContentAlignment="Stretch">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock Text ="{Binding Name}" />
<TextBlock Text ="{Binding Country}" Grid.Column="1"/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<ListBox ItemsSource="{Binding Source={StaticResource GroupedView}}"
HorizontalContentAlignment="Stretch" Grid.Column="1">
<ListBox.GroupStyle>
<GroupStyle>
<GroupStyle.ContainerStyle>
<Style TargetType="{x:Type GroupItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock Text ="{Binding Name}" />
<TextBlock Text ="{Binding Items.Count}" Grid.Column="1"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GroupStyle.ContainerStyle>
</GroupStyle>
</ListBox.GroupStyle>
</ListBox>
</Grid>
</Window>
5. Run the app and you should now see the following:
Sample app screenshot[
^]
Doing your research using Google Search will yield results. Unless you're on the cutting edge with very new tech, others have encountered similar problems. WPF is over 17 years old, so you are not Robinson Crusoe!
As shown above, you may not find the exact solution that you are looking for however understanding what the code does enables you to find a working solution. This is called programming.
Enjoy!