UI Slows Down When Listing Large Data (3000+ Records) in WPF Application

Question

UI Slows Down When Listing Large Data (3000+ Records) in WPF Application

fatih uyanık 225

Hello,

I am developing a library automation system using WPF and MVVM. My application contains more than 3000 book records, which I list using ICollectionView and ObservableCollection. However, while loading and displaying the data, the UI slows down significantly.

__Technologies I Am Using: __

WPF (.NET 8) + MVVM (CommunityToolkit.MVVM)
Entity Framework Core + SQLite
ICollectionView and ObservableCollection for data listing

__Issues I Am Facing: __

The application runs slowly and the UI freezes, especially while loading data and adding items to the list.
The initial loading time is quite long (2-3 seconds).

How can I solve this performance issue while keeping my current structure or using an alternative approach?

What are your suggestions to overcome this problem?

I would greatly appreciate your experiences and recommendations.

Thank you!

using CommunityToolkit.Mvvm.Input;
using Kütüphane_Otomasyonu.BusinessLayer.Services.Interfaces;
using Kütüphane_Otomasyonu.Common;
using Kütüphane_Otomasyonu.DataLayer.Enums;
using Kütüphane_Otomasyonu.DataLayer.Migrations;
using Kütüphane_Otomasyonu.DataLayer.Models;
using System.ComponentModel;
using System.Threading.Tasks;
using System.Windows.Data;
namespace Kütüphane_Otomasyonu.BusinessLayer.ViewModels.Base
{
    public abstract class BaseListViewModel<T> : BaseViewModel, INavigatable where T : class, new()
    {
        //Komutlar
        public RelayCommand AddCommand { get; private set; }
        public RelayCommand<object> ItemClickedCommand { get; private set; }
        public RelayCommand CloseCommand { get; private set; }
        // Servisler
        private readonly IBaseService<T> baseService;
        private readonly INavigationService navigationService;
        protected CustomObservableCollection<T> DataList;
        private ICollectionView _dataCollectionView;
        public ICollectionView DataCollectionView
        {
            get => _dataCollectionView;
            private set => SetProperty(ref _dataCollectionView, value);
        }
        protected BaseListViewModel(IBaseService<T> baseService, INavigationService navigationService)
        {
            this.baseService = baseService;
            this.navigationService = navigationService;
            Initialize();
        }
        private async Task Initialize()
        {
            //Komutlar
            AddCommand = new RelayCommand(AddCommandExecute, AddCommandCanExecute);
            ItemClickedCommand = new RelayCommand<object>(OnItemClickedCommandExecute);
            CloseCommand = new RelayCommand(CloseCommandExecute, CloseCommandCanExecute);
            await LoadDataAsync();
                   }
        private async Task LoadDataAsync()
        {
            var datas = await baseService.GetAllAsync();
            DataList = new CustomObservableCollection<T>(datas);
            // DataList veri kaynağını kullanarak bir ICollectionView nesnesi oluşturulur.
            DataCollectionView = CollectionViewSource.GetDefaultView(DataList);
                               }
        protected abstract void AddCommandExecute();
        protected abstract void OnItemClickedCommandExecute(object obj);
        protected virtual private void CloseCommandExecute()
        {
            navigationService.CloseWindow();
        }
        private bool AddCommandCanExecute() => true;
        private bool CloseCommandCanExecute() => true;
        public async void OnNavigatedToAsync(object parameter)
        {
            if (parameter is bool)
            {
                await LoadDataAsync();
            }
        }
    }
}
using CommunityToolkit.Mvvm.Input;
using Kütüphane_Otomasyonu.BusinessLayer.Services.Interfaces;
using Kütüphane_Otomasyonu.BusinessLayer.ViewModels.Base;
using Kütüphane_Otomasyonu.Common;
using Kütüphane_Otomasyonu.DataLayer.Models;
using Kütüphane_Otomasyonu.PresentationLayer.Views.BookViews;
namespace Kütüphane_Otomasyonu.BusinessLayer.ViewModels.BookViewModels
{
    public class BooksViewModel : BaseListViewModel<Book>
    {
        private readonly INavigationService navigationService;
        private readonly IBookService bookService;
        private Book _selectedItem;
        public Book SelectedItem
        {
            get => _selectedItem;
            set
            {
                SetProperty(ref _selectedItem, value);
                HelperMethods.CommandsNotifyChange(new RelayCommand[] { AddCommand, CloseCommand });
            }
        }
        public BooksViewModel(INavigationService navigationService, IBookService bookService) : base(bookService, navigationService)
        {
            this.navigationService = navigationService;
            this.bookService = bookService;
            Initialize();
        }
        private async void Initialize()
        {
            //             Verilerin doldurulması.
            var books = await bookService.GetAllAsync();
            DataList = new CustomObservableCollection<Book>(books);
        }
        // TODO SelectedItem üzerinden geçerli öğe alınacak şekilde ayarlanacak.
        protected override void OnItemClickedCommandExecute(object obj)
        {
            if (obj != null)
            {
                _selectedItem = obj as Book;
                navigationService.NavigateToView<BookDetailView>(SelectedItem);
            }
        }
        protected override void AddCommandExecute()
        {
            navigationService.ShowWindow<NewBookView>();
        }
        private bool AddCanChanged() => SelectedItem != null || SelectedItem == null;
    }
}
using FluentValidation;
using Kütüphane_Otomasyonu.BusinessLayer.Services.Helpers;
using Kütüphane_Otomasyonu.BusinessLayer.Services.Interfaces;
using Kütüphane_Otomasyonu.BusinessLayer.Validators.ErrorMessages;
using Kütüphane_Otomasyonu.Common;
using Kütüphane_Otomasyonu.DataLayer.Interfaces;
using Kütüphane_Otomasyonu.DataLayer.Models;
using System.Collections.Generic;
using System.Threading.Tasks;
namespace Kütüphane_Otomasyonu.BusinessLayer.Services.Implementations
{
    public class BookService : BaseService<Book>, IBookService
    {
        private readonly IAuthorRepository authorRepository;
        private readonly IPublisherRepository publisherRepository;
        private readonly IBookRepository bookRepository;
        private readonly IPublisherService publisherService;
        private readonly IValidator<Book> validator;
        private readonly IValidationService<Book> validationService;
        private readonly IAuthorService authorService;
        /// <summary>
        /// Kitap ile ilgili işleri yürütürken kullanılacak servis sınıfı
        /// </summary>
        /// <param name="dataAccess"> Veri erişim sınıfı</param>
        public BookService(IAuthorRepository authorRepository, IPublisherRepository publisherRepository, IBookRepository bookRepository, IPublisherService publisherService, IValidator<Book> validator, IValidationService<Book> validationService, IAuthorService authorService) : base(bookRepository, validationService, validator)
        {
            this.authorRepository = authorRepository;
            this.publisherRepository = publisherRepository;
            this.bookRepository = bookRepository;
            this.publisherService = publisherService;
            this.validator = validator;
            this.validationService = validationService;
            this.authorService = authorService;
            Initialize();
        }
        private void Initialize()
        {
        }
        
                public override async Task<IEnumerable<Book>> GetAllAsync()
        {
                       return await bookRepository.GetAllAsync(
                A => A.Author,
                P => P.publisher
                );
        }
        protected override async Task<Result<Book>> ValidateAsync(Book entity)
        {
            // Temel validasyonları gerçekleştir
            var baseValidate = await base.ValidateAsync(entity);
            if (!baseValidate.IsSuccess)
                return Result<Book>.Fail(baseValidate.ErrorMessage);
            // barkod Geçerlilik kontrolü
            if (!IsValidBarcode(entity.Barcode))
                return Result<Book>.Fail(BookMessages.InvalidBarcode);
            // Barkod numarası kullanılmış mı?
            var barcodeUsed = await bookRepository.AnyAsync(a => a.Barcode == entity.Barcode && a.Id != entity.Id);
            if (barcodeUsed)
                return Result<Book>.Fail(BookMessages.BarcodeUsed);
            // Kitap numarası kullanılmış mı?
            var bookNumberUsed = await IsBarcodeUsedAsync(entity.Barcode, entity.Id);
            if (bookNumberUsed)
                return Result<Book>.Fail(BookMessages.BookNumberUsed);
            // Yazar validasyonu 
            var authorValidate = await authorService.ValidateModelAsync(entity.Author);
            if (!authorValidate.IsSuccess)
                return Result<Book>.Fail(authorValidate.ErrorMessage);
            // Yayınevi validasyonu
            var publisherValidate = await publisherService.ValidateModelAsync(entity.publisher);
            if (!publisherValidate.IsSuccess)
                return Result<Book>.Fail(publisherValidate.ErrorMessage);
            return Result<Book>.Success(entity);
        }
        /// <summary>
        /// Bir sonraki demirbaş numarasını döndürür.
        /// </summary>
        /// <returns> Task<int> </returns>
        public async Task<int> GetNextBookNumberAsync()
        {
            return await bookRepository.MaxAsync(d => d.BookNumber) + 1;
        }
        /// <summary>
        /// Yazar var mı kontrol eder
        /// </summary>
        /// <param name="publisherName"> Yazar adı</param>
        /// <returns>< task<Publisher>/returns>
        public async Task<Publisher> ExistPublisher(string publisherName)
        {
            return await publisherRepository.ExistPublisher(publisherName);
        }
        /// <summary>        
        /// Bu numaralı bir kitap var mı kontrol eder
        /// </summary>
        /// <param name="number">Kitap numarası</param>
        /// <returns> Task<bool> </returns>
        public async Task<bool> IsBookNumberInUseAsync(int number)
        {
            return await bookRepository.AnyAsync(a => a.BookNumber == number);
        }
        // Barkod geçerli mi? 
        private bool IsValidBarcode(string barcode)
        {
            if (string.IsNullOrEmpty(barcode))
                return false;
            var barcodeGenerator = new BarcodeGenerator();
            return barcodeGenerator.BarcodeIsValid(barcode);
        }
        // Barkod kullanılmış mı?
        private async Task<bool> IsBarcodeUsedAsync(string barcode, int? bookId = null)
        {
            return await bookRepository.AnyAsync(a => a.Barcode == barcode && a.Id != bookId);
        }
        // Kitap numarası kullanılmış mı?
        private async Task<bool> IsBookNumberUsedAsync(int bookNumber, int? bookId = null)
        {
            // Kitap numarası kullanılmış mı?
            return await bookRepository.AnyAsync(a => a.BookNumber == bookNumber && a.Id != bookId);
        }
    }
}

1 answer

Your answer

Answer 1

Hongrui Yu-MSFT 5,255 Microsoft External Staff

Hi, @fatih uyanık. Welcome to Microsoft Q&A.

You could refer to the following optimization solutions:

1.Paging Use paging technology: Divide book records into small batches for loading. This could reduce UI freezing and speed up initial loading time. You could implement paging in EF Core through Skip() and Take() methods.

2.Virtualization Use virtualized controls: In WPF, you could virtualize the display of the list through VirtualizingStackPanel. You could refer to the document for more detailed operations.

3.Simplify UI Do not use particularly complex Style and binding Converter, especially when you need to load a large amount of data at one time.

4.Asynchronous operation Make sure the code for loading data is asynchronous. For example, use async and await to load data and update ObservableCollection at the same time. Avoid blocking the UI thread.

5.Background thread loading Load data in the background thread and then update ObservableCollection in the UI thread. You can use Task.Run() to achieve this. It is not recommended that you call Initialize directly in the constructor. You could consider calling Initialize asynchronously in the Loaded event. If you must call Initialize in the constructor, consider using Task.Run() to call Initialize.

6.Optimize database queries

a. Selective fields: Load only necessary fields in the query, not all fields. For example: use .Select(b => new { b.Title, b.Author }).

b. Index: In SQLite database, create indexes for key fields (such as book title or author fields) to speed up queries.

c. Use lazy loading Enable lazy loading in EF Core to load only the fields that need to be displayed to reduce memory consumption.

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Hongrui Yu-MSFT 5,255 Reputation points Microsoft External Staff

2025-03-24T01:03:41.7366667+00:00

Hi, @fatih uyanık.

Is there any update to the question? Did my answer solve your problem? If so, you could accept it as the answer. It's helpful for community members with related questions.
fatih uyanık 225 Reputation points

2025-03-24T06:38:01.2566667+00:00
Hello

Actually, my problem is that the methods I use with async and await do not work asynchronously. Although the methods I use are marked with async Task and used with await, for some reason they do not work asynchronously.

One of the asynchronous methods extending from DataAccess to Repository and services in my project does not work asynchronously due to a problem. I realized this when I tried to list the data from the service in the view model by putting a MessageBox after the method and when the code went to the next line without waiting in the await line. This became quite complicated for me. How can I determine where this problem originates from? What could be the problem?

Thanks.

Note: The GetAll method in the DataAccess class includes the related data via IQueryable Query.

public IQueryable<T> GetQueryableWithIncludes<T>(params Expression<Func<T, object>>[] includes) where T : class { IQueryable<T> query = dbSet; foreach (var include in includes) { query = query.Include(include); } return query; }
Hongrui Yu-MSFT 5,255 Reputation points Microsoft External Staff

2025-03-24T08:18:25.98+00:00
Hi, @fatih uyanık.

Directly calling a function modified by async in a synchronous method does not start asynchrony. As described in point 5 of my answer, in the code you gave, directly calling Initialize() in the constructors of BaseListViewModel and BooksViewModel respectively does not execute Initialize() asynchronously. To enable asynchrony in a synchronous method, you could use Task.Run(). You could refer to the following example:

new Test(); public class Test { public Test() { Fun(); //Synchronous Execution //Task.Run(Fun); //Asynchronous Execution for (int i = 0; i < 1000; i++) { Console.WriteLine($"synchronous: {i}"); } } async Task Fun() { for (int i = 0; i < 1000; i++) { Console.WriteLine($"asynchronous: {i}"); } } }

Note: Excessive use of Task.Run() may cause a burden on the thread pool. It is recommended to use it only in scenarios that require true concurrent execution.

To avoid using Task.Run to open too many threads, you could also execute asynchronous methods in WPF projects by registering asynchronous events. Reference example: MainWindow registers the asynchronous event Window_Loaded, and the asynchronous method Initialize of BooksViewModel is executed in Window_Loaded.

public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); this.Loaded += Window_Loaded; } private async void Window_Loaded(object sender, RoutedEventArgs e) { await booksViewModel.Initialize(); } } public class BooksViewModel : BaseListViewModel<Book> { public async Task Initialize() { } }
fatih uyanık 225 Reputation points

2025-03-24T10:12:38.35+00:00

Hello, As far as I understand, calling an async method inside a constructor, even with await, does not make the method asynchronous. In my project, I was performing listing operations inside the Initialize methods of my ViewModels.

According to your suggested approach, I should call the asynchronous method inside an event in the code-behind of the window, instead of directly invoking it in the constructor. Am I understanding this correctly?

Also, does this approach comply with MVVM principles, or does it violate them? I would like to hear your final thoughts on this.

Additionally, when I place Task.Delay inside the GetAll method of the DataAccess class, it waits for the task to complete before moving to the next line. What do you say about this?

Thank you.
Hongrui Yu-MSFT 5,255 Reputation points Microsoft External Staff

2025-03-25T03:30:01.6566667+00:00
Hi, @fatih uyanık.

In the code provided above, calling the ViewModel method in the View lifecycle event (such as Loaded) does not fully conform to the design concept of MVVM because it introduces mild coupling. The core purpose of MVVM is to decouple the view layer (View) and the logic layer (ViewModel). In order to achieve decoupling, the view layer and the logic layer usually interact through binding.

However, from the perspective of actual development, combining lifecycle events with ViewModel methods is a compromise solution, which has the advantages of being simple, direct, and easy to implement. In small projects or specific scenarios, this "destruction" of the MVVM pattern is generally considered acceptable. The Loaded event of the view is only a means to trigger the Initialize of the ViewModel, and does not directly handle complex business logic.

For the time-consuming logic that needs to be initialized immediately in the ViewModel layer, you could consider encapsulating it all in Initialize and triggering it uniformly in the Load event of the View.

public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); } private async void Window_Loaded(object sender, RoutedEventArgs e) { if (DataContext is BooksViewModel viewModel) { await viewModel.Initialize(); } } } public class BooksViewModel { public async Task Initialize() { //AA logic //BB logic //... } }

If you need to fully comply with the MVVM design, you could consider executing the Command command by clicking a button to load data asynchronously.

MainWindow.xaml

<Grid> <Button Command="{Binding LoadDataCommandAsync}"></Button> </Grid>

BooksViewModel.cs

public class BooksViewModel:ObservableObject { public AsyncRelayCommand LoadDataCommandAsync { get; private set; } public BooksViewModel() { LoadDataCommandAsync = new AsyncRelayCommand(Initialize); } public async Task Initialize() { MessageBox.Show("start load"); await Task.Delay(7000); MessageBox.Show("load end"); } }

For asynchronous execution methods, if you want to execute the next line after it is completed, you usually use await instead of Task.Delay. Task.Delay will start a task with a specified execution time, and with await (i.e. await Task.Delay()), you could achieve the delay effect. If Task.Delay is used to simulate asynchronous operations, it is reasonable to use it in the debugging or development stage. However, in a production environment, try to reduce artificial delays to ensure the responsiveness of the system.
fatih uyanık 225 Reputation points

2025-03-25T06:29:01.4966667+00:00

Hello,

First of all, thank you very much. I have checked everything you wrote from the beginning. However, I still couldn't solve the issue.

When I simulate the LoadData method in the ViewModel with Task.Delay, the Initialize method waits for the task to complete before moving to the next line where LoadData is called. However, I suspect there is an error when retrieving data from the database. But I haven't been able to identify the cause of the error.

I would like to ask if you have a chance to review my project on GitHub. I would really appreciate it if you could help me with this. I have never encountered such a scenario before, and I am currently stuck.

I look forward to your positive response.

Thank you again!
Hongrui Yu-MSFT 5,255 Reputation points Microsoft External Staff

2025-03-25T07:57:30.1166667+00:00

Hi, @fatih uyanık.

This forum usually helps customers solve technical problems. To help you solve problems faster and more accurately, you could try to simplify your code based on reproducible problems and upload it to Github for analysis. Try not to upload the original project.
fatih uyanık 225 Reputation points

2025-03-25T10:06:52.8933333+00:00

Hello

I would like to share the relevant DataAccess and Repository codes with you. In view models, the listing process is done via BaseListViewModel. BookService references the Repository layer.

I would be very happy if you could help me find the error.

Thank you.

https://github.com/bafralifatih55/Kutuphane-Revision.git

Hongrui Yu-MSFT 5,255 Microsoft External Staff

Hi, @fatih uyanık.

Solution:

Step 1: Ensure that the Initialize method is executed asynchronously

Let the Initialize of BaseListViewModel.cs be called in the Initialize of BooksViewModel.cs to ensure that both Initializes could be executed asynchronously.

Adjust BaseListViewModel.cs

        protected BaseListViewModel(IBaseService<T> baseService, INavigationService navigationService)
        {
            this.baseService = baseService;
            this.navigationService = navigationService;
        }

        protected async Task Initialize()
        {
            //Komutlar
            AddCommand = new RelayCommand(AddCommandExecute, AddCommandCanExecute);
            ItemClickedCommand = new RelayCommand<object>(OnItemClickedCommandExecute);
            CloseCommand = new RelayCommand(CloseCommandExecute, CloseCommandCanExecute);

            await LoadDataAsync();
        }

Adjust BooksViewModel.cs

        public BooksViewModel(INavigationService navigationService, IBookService bookService) : base(bookService, navigationService)
        { 
            this.navigationService = navigationService;
            this.bookService = bookService;
        }

        public async Task Initialize()
        {
            base.Initialize();
            //Verilerin doldurulması.
            var books = await bookService.GetAllAsync();
            DataList = new CustomObservableCollection<Book>(books);
        }

Enable async in BooksView.xaml.cs

    public partial class BooksView : Page
    {
        public BooksView()
        {
            InitializeComponent();
            this.Loaded += Page_Loaded;
        }


        private async void Page_Loaded(object sender, RoutedEventArgs e)
        {
            (DataContext as BooksViewModel).Initialize();
        }
    }

Step 2, turn on virtualization and not use ListUserControl.xaml

Adjust BooksView.xaml

    <Grid >
        <ListView 
                    Style="{StaticResource DataList}" 
                    x:Name="DataListView"
                    ItemsSource="{Binding DataCollectionView}" 
                    IsSynchronizedWithCurrentItem="True" 
                    VirtualizingStackPanel.IsVirtualizing="True"
                    VirtualizingStackPanel.VirtualizationMode="Recycling"
                    ScrollViewer.IsDeferredScrollingEnabled="True"
                    SelectionMode="Single">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="{Binding Id}"/>
                        <TextBlock Text="{Binding Name}"/>
                    </StackPanel>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </Grid>

fatih uyanık 225 Reputation points

2025-03-27T05:52:49.5366667+00:00

Hello

Thank you very much for taking the time to analyze. I will try the solutions you provided and respond to you as soon as possible.

While waiting for your response, I thought that there might be a problem with the DataContext management that I manage via Dİ and tried manually creating a DataContext instance. When I experienced the same problem here, I decided that it was managed incorrectly via Dİ. After that, I set the dataContext configuration in Dİ as services.AddDbContextFactory. I also configured the DataAccess class to create a new DataContext for each operation. Right now, when I call the LoadDataAsync method in the Loaded event of the window, the data is not loaded immediately but rather waits for a while. But here I could not be sure if meetod works asynchronously. When I tried by adding Debug.WriteLine at certain points of the method, I could not be sure.

Do you have any suggestions on this?

Thanks.
Hongrui Yu-MSFT 5,255 Reputation points Microsoft External Staff

2025-03-27T07:45:01.8433333+00:00

Hi, @fatih uyanık.

The Loaded event is executed after the window is generated. Calling LoadDataAsync in async void Page_Loaded means that after the window is generated, LoadDataAsync is used to query the data and render it on the UI. This process requires a period of waiting, but because it is asynchronously executed, the UI will not be blocked during the waiting period (specifically: clicking other buttons or stretching the window could work normally), which is the correct performance.

The easiest way to determine whether async void Page_Loaded is asynchronously executed is to execute a long task in Page_Loaded (for example: Task.Delay(5000)) to see whether other UI controls could still be used normally during this process.

To more accurately determine the asynchronous execution, you could use Performance Profiler...

In addition, by using Stopwatch to obtain the execution time of Initialize, it is found that the execution time does not exceed 1 second, which means that the main factor affecting the problem is not data loading, but data rendering.
fatih uyanık 225 Reputation points

2025-03-27T10:06:15.9866667+00:00

Hello

Thank you very much. I learned a lot thanks to you. I forgot to write in my previous message. Does the ListUserControl that I use when making a list contribute to the problem? So, could the problem be caused by this user control? I thought of using this to establish a consistent structure and to quickly implement changes in other high schools.

Thanks.
Hongrui Yu-MSFT 5,255 Reputation points Microsoft External Staff

2025-03-28T07:34:09.4066667+00:00

Hi, @fatih uyanık.

After the latest test, the core reason for the slow loading of data in ListUserControl is that it uses StackPanel, which will prevent ListView from turning on virtualization

Related documents: VirtualizingStackPanel Class (System.Windows.Controls) | Microsoft Learn.

Summary:

1.Ensure that LoadDataAsync is executed asynchronously to avoid blocking the UI.

2.Avoid using StackPanel as the parent container of ListView to prevent virtualization.
Hongrui Yu-MSFT 5,255 Reputation points Microsoft External Staff

2025-03-31T00:59:28.8166667+00:00

Hi, @fatih uyanık.

Are there any other updates to this question? Did my answer help you solve your problem? If yes, you could accept it as the answer. This will be helpful to community members who have similar questions.

Share via

UI Slows Down When Listing Large Data (3000+ Records) in WPF Application

1 answer

Your answer