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:

  • XAML
  • <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:

  • XAML
  • <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> 
  • C#
  • 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;
        }
    }

    DataGrid with conditional styling

    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:

  • C#
  • 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;
    }

    DataGrid with conditional styling using QueryCellStyle event

    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.

  • C#
  • 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;
    }

    DataGrid with styling a particular column

    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.

  • C#
  • 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;
    }

    Styling specific cells in a DataGrid based on conditions

    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.

  • C#
  • 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;
    }

    Stlying specific cells in a DataGrid based on its value

    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:

  • C#
  • 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;
    }

    DataGrid with styling rows based on condition

    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.

  • C#
  • 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;
    }

    Styling certain rows in a DataGrid based on condition

    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.

  • C#
  • 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;
    }

    Styling certain rows in a DataGrid based on its data

    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.

  • C#
  • 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;
    }

    DataGrid with selection and styling applied together

    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