Besides on-demand loading, Virtualization is another factor to improve the performance of ListView while loading large amount of data. It fetches the items as the user scrolls. This data virtualization technique is supported in ListView through C1DataCollection which provides C1VirtualDataCollection class for data virtualized collection views. 

In the following example, this class is used to create a custom data virtualized collection view that can be consumed for data virtualization in the ListView control.

For virtualization in ListView, perform the following steps:

1. In the Solution Explorer, right click the project name and select Add | New Folder and name it Models.
2. Right click Models folder and select Add | Class. The Add New Item dialog appears.
3. In the Add New Item dialog, set the name of the class, say Customer, and then click Add.
4. Add the following code to the Customer class. In the following example, we are using Customer class to represent data in the ListView control.
   

   C#

   コードのコピー

   public class Customer { int _id, _countryId; string _name, _email, _city; DateTime _OrderDate; double _orderTotal; static Random _rnd = new Random(); static string[] _firstNames = "Andy|Ben|Charlie|Dan|Ed|Fred|Herb|Jack|Mark|Ted".Split('|'); static string[] _lastNames = "Ambers|Bishop|Cole|Danson|Evers|Frommer|Heath|Myers|Richards|Stevens".Split('|'); static string[] _emailServers = "gmail|yahoo|outlook|aol".Split('|'); static string countries = "China-Beijing,Shanghai|India-Delhi,Kolkata|United States-Washington,New York|Russia-Moscow,Saint Petersburg|Japan-Tokio,Yokohama"; static KeyValuePair<string, string[]>[] _countries = countries.Split('|').Select(str => new KeyValuePair<string, string[]>(str.Split('-').First(), str.Split('-').Skip(1).First().Split(','))).ToArray(); public Customer() { } public Customer(int id) { ID = id; Name = GetName(); Email = string.Format("{0}@{1}.com", (Name.Substring(0, 3)).ToLower(), GetString(_emailServers)); CountryId = _rnd.Next() % _countries.Length; var cities = _countries[CountryId].Value; City = GetString(cities); OrderDate = DateTime.Today.AddDays(-_rnd.Next(1, 365)).AddHours(_rnd.Next(0, 24)).AddMinutes(_rnd.Next(0, 60)); OrderTotal = Math.Round(_rnd.NextDouble() * 10000.00, 2); } public int ID { get { return _id; } set { if (value != _id) { _id = value; } } } public string Name { get { return _name; } set { if (value != _name) { _name = value; } } } public string Email { get { return _email; } set { if (value != _email) { _email = value; } } } public string City { get { return _city; } set { if (value != _city) { _city = value; } } } public int CountryId { get { return _countryId; } set { if (value != _countryId && value > -1 && value < _countries.Length) { _countryId = value; } } } public DateTime OrderDate { get { return _OrderDate; } set { if (value != _OrderDate) { _OrderDate = value; } } } public double OrderTotal { get { return _orderTotal; } set { if (value != _orderTotal) { _orderTotal = value; } } } // ** ユーティリティ static string GetString(string[] arr) { return arr[_rnd.Next(arr.Length)]; } static string GetName() { return string.Format("{0} {1}", GetString(_firstNames), GetString(_lastNames)); } public string Country { get { return _countries[_countryId].Key; } } // ** 静的リストプロバイダー public static ObservableCollection<Customer> GetCustomerList(int count) { var list = new ObservableCollection<Customer>(); for (int i = 0; i < count; i++) { list.Add(new Customer(i)); } return list; } }

5. Create a new class, say VirtualModeDataCollection, and add it to the Models folder. This class creates a virtualized data collection view for ListView.
   

   C#

   コードのコピー

   public class VirtualModeDataCollection : C1VirtualDataCollection<Customer> { public int TotalCount { get; set; } = 1_000; protected override async Task<Tuple<int, IReadOnlyList<Customer>>> GetPageAsync(int pageIndex, int startingIndex, int count, IReadOnlyList<SortDescription> sortDescriptions = null, FilterExpression filterExpression = null, CancellationToken cancellationToken = default(CancellationToken)) { await Task.Delay(500, cancellationToken);//ネットワークトラフィックをシミュレートします。 return new Tuple<int, IReadOnlyList<Customer>>(TotalCount, Enumerable.Range(startingIndex, count).Select(i => new Customer(i)).ToList()); } }

6. Right click Pages folder, select Add | Razor page to add a new Razor page, say VirtualMode, and add the following code in the page for data virtualization.

   Razor	コードのコピー
   @using C1.Blazor.ListView <C1ListView ItemsSource="customers" T="Customer" Style="@("max-height:50vh")"> <ItemTemplate Context="customer"> @customer.Id - @customer.Name </ItemTemplate> </C1ListView> @code { VirtualModeDataCollection customers; protected override async Task OnInitializedAsync() { customers = new VirtualModeDataCollection(); await customers.LoadAsync(0, 0); } }