Conditional Styles in Xamarin DataGrid (SfDataGrid)
15 Jan 202413 minutes to read
The SfDataGrid allows to customize the style of the individual cells and rows based on the requirements. It can be customized in the following ways:
- Using Column CellStyle
- Using QueryCellStyle Event
- Using QueryRowStyle Event
Styling cells using column CellStyle
The SfDataGrid allows to apply cell style for a GridColumn which is used to render the cells in that column. While applying cell style, the GridCell appears in the custom style should be the default one. To apply cell style for a GridColumn using the CellStyle, follow the code example:
<syncfusion:SfDataGrid x:Name="dataGrid"
ItemsSource="{Binding OrdersInfo}">
<syncfusion:SfDataGrid.Columns>
<syncfusion:GridTextColumn MappingName="Freight" Format="C">
<syncfusion:GridTextColumn.CellStyle>
<Style TargetType="syncfusion:GridCell">
<Setter Property="Foreground" Value="Red" />
</Style>
</syncfusion:GridTextColumn.CellStyle>
</syncfusion:GridTextColumn>
</syncfusion:SfDataGrid.Columns>
</syncfusion:SfDataGrid>
Styling cells using converter
The SfDataGrid also allows to apply styles for the GridCell
in a column based on conditions by writing a converter for the property in a GridCell
for which conditional styles should be applied.
To apply conditional styling for a column by writing converter, follow the code example:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:syncfusion="clr-namespace:Syncfusion.SfDataGrid.XForms;assembly=Syncfusion.SfDataGrid.XForms"
xmlns:local ="clr-namespace:DataGridSample;assembly=DataGridSample"
x:Class="DataGridSample.Sample">
<ContentPage.Resources>
<ResourceDictionary>
<local:CellStyleConverter x:Key="cellStyleConverter" />
</ResourceDictionary>
</ContentPage.Resources>
<ContentPage.BindingContext>
<local:ViewModel x:Name="viewModel" />
</ContentPage.BindingContext>
<syncfusion:SfDataGrid x:Name="dataGrid"
ItemsSource="{Binding OrdersInfo}">
<syncfusion:SfDataGrid.Columns>
<syncfusion:GridTextColumn MappingName="Freight" Format="C">
<syncfusion:GridTextColumn.CellStyle>
<Style TargetType="syncfusion:GridCell">
<Setter Property="BackgroundColor"
Value="{Binding Freight,
Converter={StaticResource cellStyleConverter}}" />
<Setter Property="Foreground" Value="Red" />
</Style>
</syncfusion:GridTextColumn.CellStyle>
</syncfusion:GridTextColumn>
</syncfusion:SfDataGrid.Columns>
</syncfusion:SfDataGrid>
</ContentPage>
public class CellStyleConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
if (System.Convert.ToDouble(value) < 300)
return Color.White;
return Color.Green;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
return null;
}
}
Styling cells using QueryCellStyle event
The conditional style can be applied for any cell using the QueryCellStyle event based on any condition. This event will be fired for each cell. It provides the following properties through the QueryCellStyleEventArgs in its EventHandler
:
- RowIndex: Provides the row index of current cell in iteration.
- ColumnIndex: Provides the column index of current cell in iteration.
- CellValue: Provides the cell value of current cell in iteration.
- Column: Provides the GridColumn which belongs to current cell in iteration.
- e.Handled: Should set to true to apply the changes.
- Style: Sets style such as ForegroundColor, BackgroundColor, Font, FontAttribute, FontSize, BorderColor and BorderThickness to the current cell in iteration.
this.dataGrid.QueryCellStyle += DataGrid_QueryCellStyle;
private void DataGrid_QueryCellStyle(object sender, QueryCellStyleEventArgs e)
{
if (e.ColumnIndex == 0 && e.RowIndex % 3 == 1)
{
e.Style.BackgroundColor = Color.BlueViolet;
e.Style.ForegroundColor = Color.White;
}
else if (e.Column.MappingName == "FirstName")
{
e.Style.BackgroundColor = Color.CornflowerBlue;
e.Style.ForegroundColor = Color.White;
}
else if (e.ColumnIndex == 1 && e.RowIndex % 4 == 0)
{
e.Style.BackgroundColor = Color.YellowGreen;
e.Style.ForegroundColor = Color.White;
}
else if (e.ColumnIndex == 3 && e.RowIndex % 6 == 1)
{
e.Style.BackgroundColor = Color.PaleVioletRed;
e.Style.ForegroundColor = Color.White;
}
e.Handled = true;
}
How to style a particular column
Based on the properties of the Column
provided in the QueryCellStyleEventArgs
of the QueryCellStyle
event, style can be applied to a particular column.
private void DataGrid_QueryCellStyle(object sender, QueryCellStyleEventArgs e)
{
if (e.Column.MappingName == "FirstName")
{
e.Style.BackgroundColor = Color.CornflowerBlue;
e.Style.ForegroundColor = Color.White;
}
e.Handled = true;
}
How to style a particular cell based on RowIndex and ColumnIndex
Styling can be applied to a particular cell based on the RowIndex
and ColumnIndex
properties in QueryCellStyleEventArgs
of the QueryCellStyle
event.
private void DataGrid_QueryCellStyle(object sender, QueryCellStyleEventArgs e)
{
if (e.ColumnIndex == 0 && e.RowIndex == 1)
{
e.Style.BackgroundColor = Color.BlueViolet;
e.Style.ForegroundColor = Color.White;
}
e.Handled = true;
}
How to style a particular cell based on CellValue
Styling can be applied to a particular cell based on CellValue
property in QueryCellStyleEventArgs
of the QueryCellStyle
event.
private void DataGrid_QueryCellStyle(object sender, QueryCellStyleEventArgs e)
{
if (e.ColumnIndex == 1 && e.CellValue.ToString() == "4")
{
e.Style.BackgroundColor = Color.YellowGreen;
e.Style.ForegroundColor = Color.White;
}
e.Handled = true;
}
Styling cells using RowStyle event
The Conditional style can be applied for an entire row based on any condition using the QueryRowStyle event. This event will be fired for each row. It provides the following properties through the QueryRowStyleEventArgs in its EventHandler
:
- RowData: Provides the row data of current row in iteration.
- RowIndex: Provides the row index of current row in iteration.
- e.Handled: Should set to true to apply the changes.
- Style: Sets style such as ForegroundColor, BackgroundColor, Font, FontAttribute and FontSize to the current row in iteration.
this.dataGrid.QueryRowStyle += DataGrid_QueryRowStyle;
private void DataGrid_QueryRowStyle(object sender, QueryRowStyleEventArgs e)
{
if (e.RowIndex == 3)
{
e.Style.ForegroundColor = Color.White;
e.Style.BackgroundColor = Color.BlueViolet;
e.Style.Font = "Samantha.ttf";
e.Style.FontSize = 20;
}
else if (e.RowData == viewModel.OrdersInfo[7])
{
e.Style.ForegroundColor = Color.White;
e.Style.BackgroundColor = Color.PaleVioletRed;
}
e.Handled = true;
}
How to style a particular row based on RowIndex
Styling can be applied to a particular row based on RowIndex
property in QueryRowStyleEventArgs
of the QueryRowStyle
event.
private void DataGrid_QueryRowStyle(object sender, QueryRowStyleEventArgs e)
{
if (e.RowIndex == 3)
{
e.Style.ForegroundColor = Color.White;
e.Style.BackgroundColor = Color.PaleVioletRed;
}
e.Handled = true;
}
How to style a particular row based on RowData
Styling can be applied to a particular row based on RowData
property in QueryRowStyleEventArgs
of the QueryRowStyle
event.
private void DataGrid_QueryRowStyle(object sender, QueryRowStyleEventArgs e)
{
if (e.RowData == viewModel.OrdersInfo[5])
{
e.Style.ForegroundColor = Color.White;
e.Style.BackgroundColor = Color.BlueViolet;
}
e.Handled = true;
}
NOTE
By default, only the selected background color will be applied for the selected row even if row style is applied for that row. If you want to apply selection color over while selecting row style, set the ConditionalStylingPreference property to StylePreference.RowStyleAndSelection.
private void DataGrid_QueryRowStyle(object sender, QueryRowStyleEventArgs e)
{
if (e.RowIndex == 3 || e.RowIndex == 7)
{
e.Style.ForegroundColor = Color.White;
e.Style.BackgroundColor = Color.PaleVioletRed;
}
//Set the below code to display only selection
//e.Style.ConditionalStylingPreference = StylePreference.Selection;
e.Style.ConditionalStylingPreference = StylePreference.RowStyleAndSelection;
e.Handled = true;
}
NOTE
You can refer to our Xamarin DataGrid feature tour page for its groundbreaking feature representations. You can also explore our Xamarin.Forms DataGrid example to knows various chart types and how to easily configured with built-in support for creating stunning visual effects.
See also
How to apply the row background color when mouse hover on SfDataGrid in UWP