FlexGrid uses on-demand loading to load items as the user scrolls through the items and pages. The FlexGrid control supports this feature by means of C1DataCollection. Loading items or pages on demand improves the application's performance by requesting less data at a given time.
This virtualization technique is implemented by inheriting the C1CursorDataCollection class. This inherited class must implement HasMoreItems property and GetPageAsync method to enable on-demand loading.
The following example loads YouTube videos on-demand when the user searches for a video in a textbox.
Follow the steps below to perform on-demand loading:
Add a class, say YouTubeDataCollection, and add the following code.
Add the following XAML code in the page to search a video from YouTube using on-demand loading in FlexGrid.
XAML |
Copy Code
|
---|---|
<Window x:Class="WinUIApp1.OnDemand" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:WinUIApp1" xmlns:core="using:C1.WinUI.Core" xmlns:input="using:C1.WinUI.Input" xmlns:c1="using:C1.WinUI.Grid" xmlns:i="using:Microsoft.Xaml.Interactivity" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition/> </Grid.RowDefinitions> <input:C1TextBox x:Name="search" Margin="4" TextChanged="search_TextChanged"/> <c1:FlexGrid x:Name="flexGrid1" AutoGenerateColumns="False" HeadersVisibility="Column" IsReadOnly="True" Grid.Row="1"> <c1:FlexGrid.Columns> <c1:GridImageColumn Binding="Thumbnail" Header=" " Width="62" PlaceHolder="ms-appx:///Images/default.png"/> <c1:GridHyperlinkColumn Binding="Link" ContentBinding="Title" Header="Title" MinWidth="300" Width="*"/> <c1:GridColumn Binding="ChannelTitle" Header="Channel"/> </c1:FlexGrid.Columns> <i:Interaction.Behaviors> <c1:EmptyGridBehavior EmptyView="{Binding ElementName=emptyListLabel}" /> </i:Interaction.Behaviors> </c1:FlexGrid> <TextBlock x:Name="emptyListLabel" HorizontalAlignment="Center" VerticalAlignment="Top" Grid.Row="1"/> <core:C1ActivityIndicator x:Name="activityIndicator" VerticalAlignment="Center" Grid.Row="1" Width="30" Height="30"/> </Grid> </Window> |
Also, add the C# code to the page as follows:
C# |
Copy Code
|
---|---|
public sealed partial class OnDemand : Window { YouTubeDataCollection _dataCollection; public QuickStart() { this.InitializeComponent(); _dataCollection = new YouTubeDataCollection() { PageSize = 10 }; flexGrid1.ItemsSource = _dataCollection; search.Text = "TV"; var task = PerformSearch(); } private async Task PerformSearch() { try { activityIndicator.Visibility = Visibility.Visible; await _dataCollection.SearchAsync(search.Text); } finally { activityIndicator.Visibility = Visibility.Collapsed; } } private async void search_TextChanged(object sender, TextChangedEventArgs e) { await PerformSearch(); } } |