Articles in this section
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:

image.png

Download the complete sample in GitHub

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied