How to filter ListBox items without needing to replace the whole ItemsSource collection?

[Nemonek]

Hi, I'm a student and I'm curently learning Avalonia UI MVVM; from my last post I think I made some progress, but I came across a problem for which I cannot find a solution by myself. I have a ListBox that holds at first something like 570 objects ( with an item template ), and above the ListBox I have a set of buttons: when I click on one of them the items in the ListBox gets filtered based on some value. The problem is that the operation is extremely slow, I'm talking about 1.5 to 2 seconds of waiting when resetting the filter and all items need to be visualized.
Here is my code to filter

public string SearchString { 
    get => this._searchString;
    set => this.RaiseAndSetIfChanged(ref this._searchString, value); }
public List<Spell> ItemSource 
{
    get => this._itemSource; 
    set => this.RaiseAndSetIfChanged(ref this._itemSource, value);
}
// Commands
FilterAsRitual = ReactiveCommand.Create(() =>
{
    this.SearchString = "";
    this._dataManager.UpdateRitualFilter();
    this.ItemSource = this._dataManager.GetData();
});
FilterAsHomebrew = ReactiveCommand.Create(() =>
{
    this.SearchString = "";
    this._dataManager.UpdateHomebrewFilter();
    this.ItemSource = this._dataManager.GetData();
});
FilterByLevel = ReactiveCommand.Create((string s) =>
{
    this.SearchString = "";
    this._dataManager.UpdateLevelFilterForLevel(int.Parse(s));
    this.ItemSource = this._dataManager.GetData();
});

I'll provide a little explanation: _dataManager is a class I designed to execute queryes on the database that contains all the items; each time one of the button is pressed the filter connected to it gets updated, and then I get the data from the database that corresponds to the query with that filter ( and maybe others ) active.
From what I know executing a query on a database of 570 objects should be nearly instantaneous, so I was thinking that the slowness may be cause by the fact that when changing the list with the items inside the ListBox needs to re-create everything that's displayed.

AXAML:

<ListBox x:Name="SpellListBox"
		 Grid.Row="2" 
		 Grid.ColumnSpan="3"
		 Background="Transparent"
		 SelectionMode="Multiple, Toggle" 
		 SelectedItems="{Binding Items}" 
		 ItemsSource="{Binding ItemSource}">
	<ListBox.Styles>
		<Style Selector="ListBoxItem">
			<Setter Property="Padding" Value="3"/>
			<Setter Property="CornerRadius" Value="5"/>
			<Setter Property="MinWidth" Value="150"/>
			<Setter Property="MinHeight" Value="50"/>
			<Setter Property="Width" Value="200"/>
			<Setter Property="Height" Value="75"/>
		</Style>
		<Style Selector="ListBoxItem:selected">
			<Setter Property="Background" Value="Black"/>
		</Style>
	</ListBox.Styles>

	<ListBox.ItemsPanel>
		<ItemsPanelTemplate>
			<WrapPanel HorizontalAlignment="Center"/>
		</ItemsPanelTemplate>
	</ListBox.ItemsPanel>

	<ListBox.ItemTemplate>
		<DataTemplate>
			<Border CornerRadius="5" 
					Background="{Binding, Converter={StaticResource SpellCastingTimeConv}}" 
					BorderBrush="Black" 
					BorderThickness="1"
					Margin="0"
					Padding="3" >
				<DockPanel>
					<DockPanel VerticalAlignment="Center" 
							   DockPanel.Dock="Top" >
						<TextBlock FontWeight="Bold" 
								   Text="{Binding Name}"/>
						<TextBlock HorizontalAlignment="Right" 
								   Text="{Binding Level}"/>
					</DockPanel>
					<DockPanel>
						<TextBlock VerticalAlignment="Bottom" 
								   Text="{Binding CastTime}"/>
						<Border Background="{Binding, Converter={StaticResource SpellTypeConv}}" 
								BorderThickness="1" 
								CornerRadius="5" 
								HorizontalAlignment="Right" 
								VerticalAlignment="Bottom"
								Width="50"
								Padding="0, 0.2, 0, 0.1">
							<TextBlock FontSize="10" 
									   TextAlignment="Center" 
									   Text="{Binding Type}"/>
						</Border>
					</DockPanel>
				</DockPanel>
			</Border>
		</DataTemplate>
	</ListBox.ItemTemplate>
</ListBox>

If I missed something or I need to clarify let me know, and I'll provide a better explanation as soon as possible.
Also, just another question, is an axaml code formatted like this more readable?

Every advice is welcome.
Thank you!

[thevortexcloud]

Use a virtualized panel, it will make things faster in general. Also if you are using Reactive UI it ships with some special collections that work pretty well for large amounts of data. Such as a SourceCache.

[Nemonek]

Can you direct me to an article or to some documentation about virtualized panel? I cannot find which panel are virtualized: all I can find is #13422 and those: IVirtualizingPanel - Avalonia, VirtualizingStackPanel - Avalonia. The last is not properly what I'm looking for.
By using Dynamic Data it seems that I've been able to improve performances, especially when working with not too much items.

[thevortexcloud]

I don't think there is a specific docs page for it. You are using a WrapPanel which is not virtualised. As such it will attempt to render/realise everything at once. A virtualised panel however will only attempt to render/realise what is visible on screen (plus some buffer on either side to allow for smooth scrolling). This results in:

• Lower memory usage
• Lower CPU usage
• Better UI responsiveness

Depending on what you are doing, a virtualised panel is the only way to get decent performance. EG trying to display >3k images in image gallery is nearly impossible on most hardware without it. But because only things you can see actually exists in the panel, it can result in some weird visual issues as well.

There are only a few built in virtualised panels though due to how complicated they are to get working right. The simpliest is the virtualised stack panel. There is a virtualised wrap panel here, but it has limitations which is why the PR was closed.

[Nemonek]

Thank you! A stack panel is not what I need, because I need items to be on multiple line; I'll look into ItemRepeater, and if that does not work, I'll look into the wrap panel you linked, hoping that it's limitations does not affect my goals.

[kyuranger]

You can use this library, but to be honest I personally find it quite cumbersome to use.
https://dynamic-data.org/

[CodeDevAM]

I think displaying 570 objects in a list shouldn't pose a performance problem. Neither in a Crontol with or without virtualization. Performance problems might occur with 570,000 objects, but not with such a small number. That's why you might want to measure again to see where the performance problems really come from.

I often work with lists that have several million items and have had quite good experiences with ObservableCollectionExtended<T> (with SuspendNotifications()) in combination with DataGrid and TreeDataGrid.

In addition, you can use Buffer() or Sample() methods to reduce the frequency of changes.

If you don't need your items to be clickable and/or selectable you can also consider an ItemsRepeater control for displaying your items as it uses virtualization under the hood.

[thevortexcloud]

Neither in a Crontol with or without virtualization.

It really depends on what you are doing and what your target device is. 570 items on a modern desktop is probably not an issue, 570 items on a low end mobile device will likely lead to fairly awful performance. Similarly 570 8K bitmaps will likely cause most modern desktops to run out of memory.

If you don't need your items to be clickable and/or selectable you can also consider an ItemsRepeater control for displaying your items as it uses virtualization under the hood.

I should also note it's possible to add selection support yourself to an ItemsRepeater, it just takes more work.

[CodeDevAM]

I should also note it's possible to add selection support yourself to an ItemsRepeater, it just takes more work.

That's where TreeDataGrid comes into play. It supports both selection and virtualization.

And what I personally like: You make the most of your customizations within the ViewModel and not in the View (XAML) when dealing with a TreeDataGrid.

[Nemonek]

Thank you! Based on all of your comments I think I'll go for an ItemRepeater with selection: TreeDatGrid for what I can see does not provide an ItemTemplate property, and also it does not organizes the elements as I need them to be.

[CodeDevAM]

You probably would use a TemplateColumn https://docs.avaloniaui.net/docs/reference/controls/detailed-reference/treedatagrid/treedatagrid-column-types in a flat TreeDataGrid https://docs.avaloniaui.net/docs/reference/controls/detailed-reference/treedatagrid/creating-a-flat-treedatagrid.

TreeDataGrid has a steep learning curve. But once you learned it you probably will like it.