How to improve performance when using formatting and styling for the cells based on data in WPF DataGrid?

In WPF DataGrid (SfDataGrid), you can customize the Cell/Row style based on the data in the following three ways, 

1. 1. 1. 1. 1. StyleSelector
            2. DataTriggers
            3. Customizing property in Style using Converter

StyleSelector

You can customize the Cell/Row based on content by using CellStyleSelector/ RowStyleSelector, but it affects the performance while styling a greater number of columns or rows. Therefore, this is not a recommended way for styling the DataGrid for a greater number of columns or rows. You can use this StyleSelector according to your necessity.

To know more about the StyleSelector you can refer to the following links:

ConditionalStyling

Backgroundcolor for cells

DataTriggers

You can customize the Cell/Row based on content by using Style.Triggers, but compared to Binding Converter, the performance is low when styling a greater number of columns or rows in DataGrid.

Customizing the properties in Style using Converters

In DataGrid, customizing properties in Style using Converter is the suggested way to customize the properties of Cell/Row, based on its content. As it provides improved performance compared to other two ways.

For Cell Style

In the following code example, the Background of the GridCell for a particular column is customized based on its content using Converters.

<!-- Window Resources -->
<Window.Resources>
    <local:CellStyleConverter x:Key="cellstyleconverter"/>
</Window.Resources>

<!-- SfDataGrid Definition -->
<syncfusion:SfDataGrid x:Name="datagrid"
                       ItemsSource="{Binding GDCSource}"
                       AutoGenerateColumns="False" 
                       ColumnSizer="Star">

    <!-- Define the Columns for the SfDataGrid -->
    <syncfusion:SfDataGrid.Columns>
        <syncfusion:GridTextColumn MappingName="EmployeeDesignation">
            <syncfusion:GridTextColumn.CellStyle>
                <Style TargetType="syncfusion:GridCell">
                    <Setter Property="Background" 
                            Value="{Binding EmployeeDesignation, Converter={StaticResource cellstyleconverter}}" />
                </Style>
            </syncfusion:GridTextColumn.CellStyle>
        </syncfusion:GridTextColumn>
    </syncfusion:SfDataGrid.Columns>

</syncfusion:SfDataGrid>

The following code example illustrates the CellStyleConverter for customizing the Cell style based on the Cell content.

class CellStyleConverter : IValueConverter
{
    object IValueConverter.Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        var cellvalue = value as string;
        if (cellvalue == "SoftwareEngineer")
            return "CadetBlue";
        else if (cellvalue == "SalesRepresentative")
            return "OrangeRed";
        else
            return "YellowGreen";
    }

    object IValueConverter.ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

The following screenshot displays the output of CellStyle in DataGrid.

Figure 1: CellStyle in DataGrid

For Row Style

In the following code example, the Background of the VirtualizingCellsControl is customized based on its content using Converters.

<!--Customizing VirtualizingCellsControl -->
<Window.Resources>
    <local:RowStyleConverter x:Key="rowstyleconverter"/>
    <Style x:Key="stylecolor" TargetType="syncfusion:VirtualizingCellsControl">
        <Setter Property="Background" Value="{Binding Converter={StaticResource rowstyleconverter}}"/>
    </Style>
</Window.Resources>

<!--Setting VirtualizingCellsControl key to RowStyle in DataGrid -->
<syncfusion:SfDataGrid x:Name="datagrid"
                       RowStyle="{StaticResource stylecolor}"
                       ItemsSource="{Binding GDCSource}"
                       AutoGenerateColumns="True"
                       ColumnSizer="Star"/>

class RowStyleConverter : IValueConverter
{
    object IValueConverter.Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        if ((value as BusinessObjects).EmployeeSalary == null)
            return "CadetBlue";
        else if ((value as BusinessObjects).EmployeeName == null)
            return " OrangeRed ";
        else
            return " YellowGreen ";
    }

    object IValueConverter.ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

Figure 2: RowStyle in DataGrid

Sample Links:

Refer to the following sample links to customize the GridCell, based on the Converter to increase the performance of the DataGrid in WPF and Silverlight.

 WPF

 SilverLight

Conclusion

I hope you enjoyed learning about how to improve performance when using formatting and styling for the cells based on data in DataGrid.

You can refer to our WPF DataGrid feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our WPF DataGrid example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!