Conditional Styling in .NET MAUI DataGrid (SfDataGrid)
9 May 202315 minutes to read
The SfDataGrid allows you to customize the style of the individual cells and rows based on the requirements.
To get start quickly with apply conditional styling in .NET MAUI DataGrid, you can check on this video:
Conditional row style
The data rows can be customized conditionally by writing the style with a converter for the DataGridRow control. Its BindingContext is the underlying datasource object.
<ContentPage xmlns:syncfusion="http://schemas.syncfusion.com/maui">
<ContentPage.Resources>
<local:ColorConverter x:Key="converter"/>
<Style TargetType="syncfusion:DataGridRow">
<Setter Property="Background" Value="{Binding Converter={StaticResource converter}}" />
</Style>
</ContentPage.Resources>
</ContentPage>
public class ColorConverter : IValueConverter
{
object IValueConverter.Convert(object value, Type targetType, object parameter, CultureInfo info)
{
var input = (value as OrderInfo).OrderID;
if (input < 1003)
return Colors.Bisque;
else if (input < 1007)
return Colors.LightBlue;
else
return Colors.White;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
Style a particular row based on row index
Styling can be applied to a particular row based on RowIndex property by writing the style for the DataGridRow TargetType.
<ContentPage xmlns:syncfusion="http://schemas.syncfusion.com/maui">
<ContentPage.Resources>
<local:ColorConverter x:Key="converter"/>
<Style TargetType="syncfusion:DataGridRow">
<Setter Property="Background" Value="{Binding Source={RelativeSource Mode=Self}, Converter={StaticResource Key=converter}}"/>
</Style>
</ContentPage.Resources>
</ContentPage>
public class ColorConverter : IValueConverter
{
object IValueConverter.Convert(object value, Type targetType, object parameter, CultureInfo info)
{
var dataGridRow = value as DataGridRow;
var rowIndex = dataGridRow.DataRow.RowIndex;
if (rowIndex == 3)
return Colors.LightBlue;
else
return Colors.White;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
Style a particular row based on RowData
Styling can be applied to a particular row based on the RowData property by writing the style for the DataGridRow TargetType.
<ContentPage xmlns:syncfusion="http://schemas.syncfusion.com/maui">
<ContentPage.Resources>
<local:ColorConverter x:Key="converter"/>
<Style TargetType="syncfusion:DataGridRow">
<Setter Property="Background" Value="{Binding Source={RelativeSource Mode=Self}, Converter={StaticResource Key=converter}}"/>
</Style>
</ContentPage.Resources>
</ContentPage>
public class ColorConverter : IValueConverter
{
object IValueConverter.Convert(object value, Type targetType, object parameter, CultureInfo info)
{
var dataGridRow = value as DataGridRow;
var rowData = dataGridRow.DataRow.RowData;
if(rowData == (dataGridRow.DataGrid.BindingContext as ViewModel).OrderInfoCollection[5])
return Colors.LightBlue;
else
return Colors.White;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
Conditional style for particular column
The SfDataGrid
provides the support to apply the conditional style for specific column by using the CellStyle property in the DataGridColumn.
<ContentPage xmlns:syncfusion="http://schemas.syncfusion.com/maui">
<ContentPage.Resources>
<local:ColorConverter x:Key="converter"/>
</ContentPage.Resources>
<ContentPage.Content>
<syncfusion:SfDataGrid ItemsSource="{Binding OrderInfoCollection}">
<syncfusion:SfDataGrid.Columns>
<syncfusion:DataGridNumericColumn MappingName="OrderID" HeaderText="Order ID" Format="d">
<syncfusion:DataGridNumericColumn.CellStyle>
<Style TargetType="syncfusion:DataGridCell">
<Setter Property="Background" Value="{Binding OrderID, Converter={StaticResource converter}}"/>
</Style>
</syncfusion:DataGridNumericColumn.CellStyle>
</syncfusion:DataGridNumericColumn>
</syncfusion:SfDataGrid.Columns>
</syncfusion:SfDataGrid>
</ContentPage.Content>
</ContentPage>
public class ColorConverter : IValueConverter
{
object IValueConverter.Convert(object value, Type targetType, object parameter, CultureInfo info)
{
if ((int)value < 1006)
return Colors.LightBlue;
else
return Colors.White;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
Conditional cell style
The grid cell can be customized conditionally by writing the style with a converter for the DataGridCell control. Its BindingContext is the underlying datasource object.
<ContentPage xmlns:syncfusion="http://schemas.syncfusion.com/maui">
<ContentPage.Resources>
<local:ColorConverter x:Key="converter"/>
<Style TargetType="syncfusion:DataGridCell">
<Setter Property="Background" Value="{Binding OrderID, Converter={StaticResource converter}}"/>
</Style>
</ContentPage.Resources>
</ContentPage>
public class ColorConverter : IValueConverter
{
object IValueConverter.Convert(object value, Type targetType, object parameter, CultureInfo info)
{
if ((int)value < 1006)
return Colors.LightBlue;
else
return Colors.White;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
Style a cell based on MappingName and RowColumnIndex
Styling can be applied to a particular cell based on RowIndex, ColumnIndex and MappingName property of the column by writing the style for the DataGridCell TargetType.
<ContentPage xmlns:syncfusion="http://schemas.syncfusion.com/maui">
<ContentPage.Resources>
<local:ColorConverter x:Key="converter"/>
<local:ForeColorConverter x:Key="foreColorconverter"/>
<Style TargetType="syncfusion:DataGridCell">
<Setter Property="Background" Value="{Binding Source={RelativeSource Mode=Self}, Converter={StaticResource Key=converter}}"/>
<Setter Property="TextColor" Value="{Binding Source={RelativeSource Mode=Self}, Converter={StaticResource Key=foreColorconverter}}"/>
</Style>
</ContentPage.Resources>
</ContentPage>
public class ColorConverter : IValueConverter
{
object IValueConverter.Convert(object value, Type targetType, object parameter, CultureInfo info)
{
var gridCell = (value as DataGridCell);
var columnIndex = gridCell.ColumnIndex;
var rowIndex = gridCell.RowIndex;
var mappingName = gridCell.DataColumn.DataGridColumn.MappingName;
if (columnIndex == 0 && rowIndex % 3 == 1)
return Colors.BlueViolet;
else if (mappingName == "ShipCountry")
return Colors.CornflowerBlue;
else if (columnIndex == 1 && rowIndex % 4 == 0)
return Colors.YellowGreen;
else if (columnIndex == 3 && rowIndex % 6 == 1)
return Colors.PaleVioletRed;
return Colors.White;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
public class ForeColorConverter : IValueConverter
{
object IValueConverter.Convert(object value, Type targetType, object parameter, CultureInfo info)
{
var gridCell = (value as DataGridCell);
var columnIndex = gridCell.ColumnIndex;
var rowIndex = gridCell.RowIndex;
var mappingName = gridCell.DataColumn.DataGridColumn.MappingName;
if (columnIndex == 0 && rowIndex % 3 == 1)
return Colors.Wheat;
else if (mappingName == "ShipCountry")
return Colors.White;
else if (columnIndex == 1 && rowIndex % 4 == 0)
return Colors.Red;
else if (columnIndex == 3 && rowIndex % 6 == 1)
return Colors.Yellow;
return Colors.Black;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
Style a cell based on RowIndex and ColumnIndex
Styling can be applied to a particular cell based on RowIndex and ColumnIndex property by writing the style for the DataGridCell TargetType.
<ContentPage xmlns:syncfusion="http://schemas.syncfusion.com/maui">
<ContentPage.Resources>
<local:ColorConverter x:Key="converter"/>
<local:ForeColorConverter x:Key="foreColorconverter"/>
<Style TargetType="syncfusion:DataGridCell">
<Setter Property="Background" Value="{Binding Source={RelativeSource Mode=Self}, Converter={StaticResource Key=converter}}"/>
<Setter Property="TextColor" Value="{Binding Source={RelativeSource Mode=Self}, Converter={StaticResource Key=foreColorconverter}}"/>
</Style>
</ContentPage.Resources>
</ContentPage>
public class ColorConverter : IValueConverter
{
object IValueConverter.Convert(object value, Type targetType, object parameter, CultureInfo info)
{
var gridCell = (value as DataGridCell);
var columnIndex = gridCell.ColumnIndex;
var rowIndex = gridCell.RowIndex;
if(columnIndex == 0 && rowIndex == 1)
return Colors.BlueViolet;
return Colors.White;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
public class ForeColorConverter : IValueConverter
{
object IValueConverter.Convert(object value, Type targetType, object parameter, CultureInfo info)
{
var gridCell = (value as DataGridCell);
var columnIndex = gridCell.ColumnIndex;
var rowIndex = gridCell.RowIndex;
if(columnIndex == 0 && rowIndex == 1)
return Colors.White;
return Colors.Black;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
Style a cell based on cell value
Styling can be applied to a particular cell based on CellValue property by writing the style for the DataGridCell TargetType.
<ContentPage xmlns:syncfusion="http://schemas.syncfusion.com/maui">
<ContentPage.Resources>
<local:ColorConverter x:Key="converter"/>
<local:ForeColorConverter x:Key="foreColorconverter"/>
<Style TargetType="syncfusion:DataGridCell">
<Setter Property="Background" Value="{Binding Source={RelativeSource Mode=Self}, Converter={StaticResource Key=converter}}"/>
<Setter Property="TextColor" Value="{Binding Source={RelativeSource Mode=Self}, Converter={StaticResource Key=foreColorconverter}}"/>
</Style>
</ContentPage.Resources>
</ContentPage>
public class ColorConverter : IValueConverter
{
object IValueConverter.Convert(object value, Type targetType, object parameter, CultureInfo info)
{
var gridCell = (value as DataGridCell);
var cellValue = gridCell.CellValue;
if (cellValue.Equals("Thomas Hardy"))
return Colors.LightBlue;
return Colors.White;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
public class ForeColorConverter : IValueConverter
{
object IValueConverter.Convert(object value, Type targetType, object parameter, CultureInfo info)
{
var gridCell = (value as DataGridCell);
var cellValue = gridCell.CellValue;
if (cellValue.Equals("Thomas Hardy"))
return Colors.Red;
return Colors.Black;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}