Category / Section
How to Add and Customize SfCheckbox Appearance in MAUI DataGrid (SfDataGrid)?
2 mins read
This article illustrates the customizing the appearance of the checkbox using the.NET MAUI SfCheckBox in a .NET MAUI DataGrid.
The .NET MAUI DataGrid (SfDataGrid) allows you to load custom views in its DataGridCell using the DataGridTemplateColumn. It can be created both in XAML and in the code behind. You can load any view inside the DataGridCell by customizing the CellTemplate property of the DataGridTemplateColumn.
Within the DataGridTemplateColumn
, you can load SfCheckBox for the corresponding column and customize its appearance, including settings such as CheckedColor
, TickColor
, UncheckedColor
, and other visual aspects.
XAML:
<contentpage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:MauiApp1" xmlns:datagrid="clr-namespace:Syncfusion.Maui.DataGrid;assembly=Syncfusion.Maui.DataGrid" xmlns:syncfusion="clr-namespace:Syncfusion.Maui.Buttons;assembly=Syncfusion.Maui.Buttons" x:class="MauiApp1.MainPage">
<contentpage.bindingcontext>
<local:orderinforepository>
</local:orderinforepository></contentpage.bindingcontext>
<datagrid:sfdatagrid x:name="dataGrid" itemssource="{Binding OrderInfoCollection}" columnwidthmode="FitByHeader">
<datagrid:sfdatagrid.columns>
<datagrid:datagridtemplatecolumn mappingname="IsShipped" headertext="Is Shipped">
<datagrid:datagridtemplatecolumn.celltemplate>
<datatemplate>
<syncfusion:sfcheckbox ischecked="{Binding IsShipped}" checkedcolor="Red" tickcolor="Yellow" uncheckedcolor="DarkViolet" margin="40,0,0,0">
</syncfusion:sfcheckbox></datatemplate>
</datagrid:datagridtemplatecolumn.celltemplate>
</datagrid:datagridtemplatecolumn>
</datagrid:sfdatagrid.columns>
</datagrid:sfdatagrid>
</contentpage>
Output: