How to group with ItemsControl, like ListBox?

[JerryJian]

WPF has GroupStyle of ItemsControl, is there any replacement in Avalonia?

How do I implement grouping in a ListBox?

[timunie]

only DataGrid and TreeDataGrid can do afaik.

[JerryJian]

Yeah, I searched the source code and the issues of Avalonia, and found that DataGrid and TreeDataGrid have group machanism. I would like to know if there are any examples of ListBox implementing grouping. The DataGrid and TreeDataGrid are a little heavy for my scenario.

[thevortexcloud]

Apparently it can be done with ReactiveUI https://github.com/RolandPheasant/DynamicData.Snippets/blob/master/DynamicData.Snippets/Group/GroupByWeek.cs

Wether or not that works with Avalonia, I am not sure. But I think it should work.

[JerryJian]

Thanks. I took a quick look at the code in the link. It can generate reactive data structures for grouping, but I have no idea how to implement grouping in a Avalonia ListBox. I came from WPF and haven't jumped out of WPF's thinking yet.

[thevortexcloud]

My idea was something like this (I have not tested if this actually works):

                <ItemsControl ItemsSource="{CompiledBinding Groups}">
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <Border BorderThickness="0 0 0 1"
                                    BorderBrush="Gray">
                                <StackPanel Orientation="Vertical">
                                    <TextBlock Text="{CompiledBinding GroupHeader}" />
                                    <ItemsControl ItemsSource="{CompiledBinding GroupedItems}" />
                                </StackPanel>
                            </Border>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>

Which is essentially just doing the grouping yourself. This does have a few disadvantages, the main one being you have to use multiple list views (each ListBox would have their own scroll viewer you would also need to disable to make it behave like one big list) and is fairly verbose. I am however not sure what would happen if you tried to bind to SelectedItem on an inner ListBox to some top level value in this scenario. it may just work.

[JerryJian]

Yeah, I agree with you @thevortexcloud. To display groupped collection, the ItemsControl nest ItemsControl, with a outter ScrollViewer, the code snippet is fully available. For ListBox, I will try to custom the ItemsPanel.

[thevortexcloud]

If you hit a dead end with that, you can also try to make a custom control based on an ItemsRepeater (it's in an optional extra Nuget package) but it may be more work. It has no concept of item selection out of the box. So you can implement it however you want. But you would have to implement everything related to selection yourself. EG Assuming you are using a ListBoxItem as your item container you could do something like this:

   public MyCustomItemControl() {
            this.InitializeComponent();

            this.Loaded += this.OnLoaded;
        }

 private void OnLoaded(object? sender, RoutedEventArgs e) {
     this.ItemRepeater.ElementPrepared += (o, args) => { args.Element.PointerPressed += this.HandleItemSelection; };
}

        private void HandleItemSelection(object? sender, PointerPressedEventArgs e)
            ((ListBoxItem)sender).IsSelected = !((ListBoxItem)sender).IsSelected;
        }

Which will toggle an item selection when clicked. You would also need to wire up various styled properties and what not for binding to a view model.

But you could easily use something else besides a ListBoxItem (EG some sort of group container) to handle this.

[JerryJian]

Ok, thanks a lot.

[JerryJian]

Another grouping example: https://github.com/RolandPheasant/DynamicData.Snippets/blob/master/DynamicData.Snippets/Group/XamarinFormsGrouping.cs

Just for recording purposes.

[n-gt]

Seems like the only normal solution is to use multiple DataTemplates while keeping the item source a flat 1d sequence.

So you mix your "headers" in there with your actual data and render into the ListBox

[thevortexcloud]

If you don't specifically need a list box you can also use a datagrid. Which has built in support for grouping.

[robloo]

Yes, this is what is done on my end. An additional note: You should set the IsEnabled=False and IsHitTestEnabled=False for the grouped header item data template. That keeps it "read-only" and not selectable in the list.

This approach is basically 1-to-1 visually and from a user standpoint with what is done in WPF and WinUI. It does require your bound item view models to contain group/header information though.

We should probably support this out-of-the-box in the future.

[n-gt]

Thanks to both of you and HAPPY NEW YEAR WOOHOOO YEAAAAHHH 💥