WPF datagrid load 10M items with imagesource in mvvm

Install-Package CommunityToolkit.mvvm;

 

 

 private async Task InitData()
 {
     var dir = @"../../../Images";
     if (!Directory.Exists(dir))
     {
         return;
     }

     var imgs = Directory.GetFiles(dir);
     if (imgs == null || !imgs.Any())
     {
         return;
     }

     int imgsCount = imgs.Count();

     await Task.Run(async () =>
     {
         BooksCollection = new ObservableCollection<Book>();
         List<Book> booksList = new List<Book>();
         for (int i = 1; i < 10000001; i++)
         {
             booksList.Add(new Book()
             {
                 Id = i,
                 Name = $"Name_{i}",
                 Author = $"Author_{i}",
                 Comment = $"Comment_{i}",
                 Content = $"Content_{i}",
                 Summary = $"Summary_{i}",
                 Title = $"Title+{i}",
                 Topic = $"Topic_{i}",
                 ISBN = $"ISBN_{i}_{Guid.NewGuid():N}",
                 ImgSource = GetImgSourceViaUrl(imgs[i % imgsCount])
             });

             if (i < 100 && i % 10 == 0)
             {
                await PopulateBooksCollection(booksList);
             }
             else if (i % 10000 == 0)
             {
                 await PopulateBooksCollection(booksList);
             }
         }

         if (booksList.Count > 0)
         {
             await PopulateBooksCollection(booksList);
         }
     });

     MessageBox.Show($"Loaded {booksCollection.Count} items");
 }

 private async Task PopulateBooksCollection(List<Book> booksList)
 {
     var tempList = booksList.ToList();
     booksList.Clear();
     await  Application.Current?.Dispatcher.InvokeAsync(() =>
     {
         foreach (var item in tempList)
         {
             BooksCollection.Add(item);
         }
         StatusMsg = $"Loaded {BooksCollection.Count} items";
     }, System.Windows.Threading.DispatcherPriority.Background);
 }

 private ImageSource GetImgSourceViaUrl(string imgUrl)
 {
     BitmapImage bmi = new BitmapImage();
     if (!File.Exists(imgUrl))
     {
         return bmi;
     }

     bmi.BeginInit();
     bmi.UriSource = new Uri(imgUrl, UriKind.RelativeOrAbsolute);
     bmi.CacheOption = BitmapCacheOption.OnDemand;
     bmi.EndInit();
     if (bmi.CanFreeze)
     {
         bmi.Freeze();
     }
     return bmi;
 }

 

 

 

 

 

 

 

 

 

 

 

//xaml
<Window x:Class="WpfApp2.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"
        WindowState="Maximized"
        xmlns:local="clr-namespace:WpfApp2"
        mc:Ignorable="d"
        Title="{Binding StatusMsg}"
        Height="450" Width="800"> 
    <Grid>
        <DataGrid ItemsSource="{Binding BooksCollection,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
                  VirtualizingPanel.IsVirtualizing="True"
                  VirtualizingPanel.IsContainerVirtualizable="True"
                  VirtualizingPanel.VirtualizationMode="Recycling"
                  EnableColumnVirtualization="True"
                  EnableRowVirtualization="True"
                  AutoGenerateColumns="False"
                  CanUserAddRows="False">
            <DataGrid.Columns>
                <DataGridTemplateColumn>
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <Grid Width="{Binding DataContext.GridWidth,RelativeSource={RelativeSource AncestorType=Window}}"
                                  Height="{Binding DataContext.GridHeight,RelativeSource={RelativeSource AncestorType=Window}}">
                                <Grid.Resources>
                                    <Style TargetType="ColumnDefinition">
                                        <Setter Property="Width" Value="Auto"/>
                                    </Style>
                                    <Style TargetType="TextBlock">
                                        <Setter Property="FontSize" Value="30"/>
                                        <Setter Property="HorizontalAlignment" Value="Center"/>
                                        <Setter Property="VerticalAlignment" Value="Center"/>
                                        <Style.Triggers>
                                            <Trigger Property="IsMouseOver" Value="True">
                                                <Setter Property="FontSize" Value="50"/>
                                                <Setter Property="Foreground" Value="Red"/>
                                            </Trigger>
                                        </Style.Triggers>
                                    </Style>
                                </Grid.Resources>
                                <Grid.Background>
                                    <ImageBrush ImageSource="{Binding ImgSource}"/>
                                </Grid.Background>
                                <Grid.RowDefinitions>
                                    <RowDefinition/>
                                    <RowDefinition/>
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition/>
                                    <ColumnDefinition/>
                                    <ColumnDefinition/>
                                    <ColumnDefinition/>
                                    <ColumnDefinition/>
                                    <ColumnDefinition/>
                                    <ColumnDefinition/>
                                    <ColumnDefinition/>
                                </Grid.ColumnDefinitions>
                                <TextBlock Grid.Column="0" Text="{Binding Id}"/>
                                <TextBlock Grid.Column="1" Text="{Binding Name}"/>
                                <TextBlock Grid.Column="2" Text="{Binding Author}"/>
                                <TextBlock Grid.Column="3" Text="{Binding Comment}"/>
                                <TextBlock Grid.Column="4" Text="{Binding Content}"/>
                                <TextBlock Grid.Column="5" Text="{Binding Summary}"/>
                                <TextBlock Grid.Column="6" Text="{Binding Title}"/>
                                <TextBlock Grid.Column="7" Text="{Binding Topic}"/>
                                <TextBlock Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="8" Text="{Binding ISBN}"/>
                            </Grid>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>                    
                </DataGridTemplateColumn>
            </DataGrid.Columns>
        </DataGrid>
    </Grid>
</Window>




//cs
using CommunityToolkit.Mvvm.ComponentModel;
using System.Collections.ObjectModel;
using System.IO;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WpfApp2
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            var vm = new MainVM();
            this.DataContext = vm;
            this.SizeChanged += MainWindow_SizeChanged;
        }

        private void MainWindow_SizeChanged(object sender, SizeChangedEventArgs e)
        {
            if(DataContext is MainVM vm && Content is FrameworkElement fe)
            {
                vm.GridWidth = fe.ActualWidth;
                vm.GridHeight = fe.ActualHeight / 2;
            }
        }

        public partial class MainVM : ObservableObject
        {
            public MainVM()
            {
                InitData();
            }

            private async Task InitData()
            {
                var dir = @"../../../Images";
                if (!Directory.Exists(dir))
                {
                    return;
                }

                var imgs = Directory.GetFiles(dir);
                if (imgs == null || !imgs.Any())
                {
                    return;
                }

                int imgsCount = imgs.Count();

                await Task.Run(async () =>
                {
                    BooksCollection = new ObservableCollection<Book>();
                    List<Book> booksList = new List<Book>();
                    for (int i = 1; i < 10000001; i++)
                    {
                        booksList.Add(new Book()
                        {
                            Id = i,
                            Name = $"Name_{i}",
                            Author = $"Author_{i}",
                            Comment = $"Comment_{i}",
                            Content = $"Content_{i}",
                            Summary = $"Summary_{i}",
                            Title = $"Title+{i}",
                            Topic = $"Topic_{i}",
                            ISBN = $"ISBN_{i}_{Guid.NewGuid():N}",
                            ImgSource = GetImgSourceViaUrl(imgs[i % imgsCount])
                        });

                        if (i < 100 && i % 10 == 0)
                        {
                           await PopulateBooksCollection(booksList);
                        }
                        else if (i % 10000 == 0)
                        {
                            await PopulateBooksCollection(booksList);
                        }
                    }

                    if (booksList.Count > 0)
                    {
                        await PopulateBooksCollection(booksList);
                    }
                });

                MessageBox.Show($"Loaded {booksCollection.Count} items");
            }

            private async Task PopulateBooksCollection(List<Book> booksList)
            {
                var tempList = booksList.ToList();
                booksList.Clear();
                await  Application.Current?.Dispatcher.InvokeAsync(() =>
                {
                    foreach (var item in tempList)
                    {
                        BooksCollection.Add(item);
                    }
                    StatusMsg = $"Loaded {BooksCollection.Count} items";
                }, System.Windows.Threading.DispatcherPriority.Background);
            }

            private ImageSource GetImgSourceViaUrl(string imgUrl)
            {
                BitmapImage bmi = new BitmapImage();
                if (!File.Exists(imgUrl))
                {
                    return bmi;
                }

                bmi.BeginInit();
                bmi.UriSource = new Uri(imgUrl, UriKind.RelativeOrAbsolute);
                bmi.CacheOption = BitmapCacheOption.OnDemand;
                bmi.EndInit();
                if (bmi.CanFreeze)
                {
                    bmi.Freeze();
                }
                return bmi;
            }

            [ObservableProperty]
            private double gridWidth;

            [ObservableProperty]
            private double gridHeight;

            [ObservableProperty]
            private ObservableCollection<Book> booksCollection;

            [ObservableProperty]
            private string statusMsg;
        }


        public class Book
        {
            public int Id { get; set; }
            public string Name { get; set; }
            public string Author { get; set; }
            public string Comment { get; set; }
            public string Content { get; set; }
            public string Summary { get; set; }
            public string Title { get; set; }
            public string Topic { get; set; }
            public string ISBN { get; set; }
            public ImageSource ImgSource { get; set; }
        }
    }
}