Data Grid for .NET MAUI – Version 1.0.3 Demo
Version 1.0.3 supports UI virtualization! We’ll be using free Monsalma DataGrid control to display some dummy data. The goal of this demo is to showcase the benefits of UI virtualization. To know more about how things work under the hub, please read this post – Data Grid for .NET MAUI – Version 1.0.3 Released.
The source code is available on GitHub – https://github.com/Monsalma/Monsalma.Maui.Controls/tree/main/Monsalma-Maui-v010003.
To get started, please download Monsalma.Maui.Controls NuGet package: https://www.nuget.org/packages/Monsalma.Maui.Controls/1.0.3.
Additional resources:
Model (Data)
Instances of the VirtualizationDemoData class (Monsalma_Maui_v010003.Data.VirtualizationDemoData) contain the data:
public class VirtualizationDemoData
{
public int RowNumber { get; set; }
public string ColumnA { get; set; }
public string ColumnB { get; set; }
} View Model
MainViewModel (Monsalma_Maui_v010003.ViewModels.MainViewModel) creates a list of dummy data (10000 items). The goal is to generate column content of random length, so we get rows with variable heights. Rows with variable heights are a challenge and I want to showcase that DataGrid successfully overcomes the challenge.
public MainViewModel()
{
Random random = new(DateTime.Now.Millisecond);
DemoData = [];
for (int i = 0; i < 10000; ++i)
{
VirtualizationDemoData newDemoData = new()
{
RowNumber = i + 1,
ColumnA = new string('A', random.Next(5, 50)),
ColumnB = new string('B', random.Next(5, 100))
};
DemoData.Add(newDemoData);
}
}View (XAML)
MainPage (Monsalma_Maui_v010003.MainPage) represents the view.
First we import the package (Monsalma.Maui.Controls) and local namespaces (data and view model):
xmlns:controls="clr-namespace:Monsalma.Maui.Controls;assembly=Monsalma.Maui.Controls"
xmlns:data="clr-namespace:Monsalma_Maui_v010003.Data"
xmlns:viewmodels="clr-namespace:Monsalma_Maui_v010003.ViewModels" Then we define row styles (header row, odd row, even row and selected row) for the data grid control:
<Style
TargetType="controls:DataGridRowHeader"
x:Key="HeaderRowStyle">
<Setter
Property="CellBackgroundColor"
Value="{StaticResource Key=Primary}" />
<Setter
Property="CellForegroundColor"
Value="{StaticResource Key=White}" />
</Style>
<Style
TargetType="controls:DataGridRowRegular"
x:Key="RegularOddRowStyle">
<Setter
Property="CellBackgroundColor"
Value="{StaticResource Key=White}" />
<Setter
Property="CellForegroundColor"
Value="{StaticResource Key=Black}" />
</Style>
<Style
TargetType="controls:DataGridRowRegular"
x:Key="RegularEvenRowStyle">
<Setter
Property="CellBackgroundColor"
Value="{StaticResource Key=Gray100}" />
<Setter
Property="CellForegroundColor"
Value="{StaticResource Key=Black}" />
</Style>
<Style
TargetType="controls:DataGridRowRegular"
x:Key="SelectedRowStyle">
<Setter
Property="CellBackgroundColor"
Value="{StaticResource Key=Yellow100Accent}" />
<Setter
Property="CellForegroundColor"
Value="{StaticResource Key=Black}" />
</Style> DataGrid definition differs substantially from previous demos (Monsalma-Maui-v010000, Monsalma-Maui-v010001, Monsalma-Maui-v010002). In this demo, we added bindable properties related to UI virtualization: VirtualizationEnabled, VirtualizationInitialRowsToLoad, VirtualizationRowsBeforeActing, VirtualizationRowsToLoad and VirtualizationMinRowsToUnload. These are nicely explained in another post (Data Grid for .NET MAUI – Version 1.0.3 Released), so I’ll not repeat myself here.
<controls:DataGrid
Margin="5"
Items="{Binding DemoData}"
SelectionMode="Single"
SelectedItem="{Binding SelectedDemoData, Mode=TwoWay}"
HeaderRowStyle="{StaticResource Key=HeaderRowStyle}"
RegularOddRowStyle="{StaticResource Key=RegularOddRowStyle}"
RegularEvenRowStyle="{StaticResource Key=RegularEvenRowStyle}"
SelectedRowStyle="{StaticResource Key=SelectedRowStyle}"
ShowHeaderRow="False"
VirtualizationEnabled="True"
VirtualizationInitialRowsToLoad="50"
VirtualizationRowsBeforeActing="20"
VirtualizationRowsToLoad="30"
VirtualizationMinRowsToUnload="100"> This time, there’s nothing fancy about the way we define columns:
<controls:DataGrid.Columns>
<controls:DataGridColumnText
Width="*"
MinWidth="100"
DataBinding="RowNumber"
HeaderText="#" />
<controls:DataGridColumnText
Width="*"
MinWidth="100"
DataBinding="ColumnA"
HeaderText="Column A" />
<controls:DataGridColumnText
Width="*"
DataBinding="ColumnB"
HeaderText="Column B" />
</controls:DataGrid.Columns> Tada! Even though we have 10k items, our data grid works fine! Try disabling UI virtulization by setting VirtualizationEnabled to False and you’ll see the difference.
Screenshots
Windows
Android
