Skeleton Loading Animation
FlexGrid supports skeleton loading content through SkeletonLoadingBehavior. The behavior displays a skeleton loading animation while data is loading and provides visual feedback for unloaded items. SkeletonLoadingBehavior affects data sources that contain null items. Any item source can contain null items, including C1VirtualDataCollection while data is being retrieved.
Configure the Data Source
In data-virtualization scenarios, some items can remain temporarily null while the data is being retrieved. Without SkeletonLoadingBehavior, FlexGrid displays these unloaded items as empty cells. The following C1VirtualDataCollection example provides the null-item loading scenario for SkeletonLoadingBehavior. It declares one billion items and creates the requested items as FlexGrid accesses them while scrolling.
public class VirtualModeDataCollection : C1VirtualDataCollection<Customer>
{
public int TotalCount { get; set; } = 1_000_000_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(2000, cancellationToken); // Simulates network traffic.
return new Tuple<int, IReadOnlyList<Customer>>(
TotalCount,
Enumerable.Range(startingIndex, count)
.Select(i => new Customer(i))
.ToList());
}
}Caution: A data source containing null items that do not represent unloaded items can cause the skeleton animation to display unexpectedly.
Configure Skeleton Loading Content
Add SkeletonLoadingBehavior to the FlexGrid behaviors collection, as shown in the following code:
<c1:FlexGrid>
<i:Interaction.Behaviors>
<c1:SkeletonLoadingBehavior />
</i:Interaction.Behaviors>
</c1:FlexGrid>Note: WinUI does not provide an API for customizing the skeleton loading animation cell content.