How to Conditionally Set Background and Foreground for Grid Rows and Cells

• May 20, 2022
• 3 minutes to read

This topic describes how to highlight grid rows and cells based on a certain criteria.

Highlight Cells/Rows if Column Values Match a Specific Condition

The Conditional Formatting supports the Criteria Language Syntax. Use a column’s FieldName to access bound and unbound column values.

XAML

<dxg:TableView.FormatConditions>
    <!--highlight the Value column if Value is less than 20-->
    <dxg:FormatCondition Expression="Value &lt; 20" FieldName="Value">
        <dx:Format Background="Orange" />
    </dxg:FormatCondition>
    <!--highlight a row if Value is less than 10-->
    <dxg:FormatCondition Expression="[Value] &lt; 10">
        <dx:Format Background="Red" />
    </dxg:FormatCondition>
</dxg:TableView.FormatConditions>

The Conditional Formatting has the following advantages over ColumnBase.CellStyle, DataViewBase.CellStyle, and TableView.RowStyle:

• Better performance;
• You do not need to override styles and define triggers, which improves the readability of XAML code;
• The Criteria Language Syntax supports a large number of functions;
• Users can customize formatting rules at runtime.

Limitations:

• The Criteria Language Syntax cannot access ViewModel properties. You can only apply Expressions to column values;
• You cannot highlight a cell using a Color or Brush stored at the data source level.

Highlight Cells With Colors/Brushes Stored as Column Values

Use the ColumnBase.CellStyle or DataViewBase.CellStyle property.

Cell elements contain EditGridCellData objects in their DataContext.

Use the following binding paths to access cell values, columns, and ViewModel properties:

• Value - access the current cell value;
• Column - access the current column;
• RowData.Row.[YourPropertyName] - access a property of an object from the ItemsSource collection;
• Data.[FieldName] - access column values in Server Mode or if you use the RealTimeSource, access unbound column values;
• View.DataContext.[YourPropertyName] - access a property in a grid’s ViewModel.

View Example: Build Binding Paths in WPF Data Grid Cells

XAML

xmlns:dxmvvm="http://schemas.devexpress.com/winfx/2008/xaml/mvvm"
...
<dxg:TableView.CellStyle>
    <Style TargetType="dxg:LightweightCellEditor">
        <Style.Triggers>
            <Trigger Property="SelectionState" Value="None">
                <Setter Property="Background" Value="{Binding RowData.Row.Color, Converter={dxmvvm:ColorToBrushConverter}}" />
            </Trigger>
        </Style.Triggers>
    </Style>
</dxg:TableView.CellStyle>

Highlight Rows with Colors/Brushes Stored as Column Values

You can use the TableView.RowStyle or TreeListView.RowStyle property to highlight rows.

Row elements contain RowData objects in their DataContext.

Use the following binding paths to access cell values and ViewModel properties:

• Row.[YourPropertyName] - access a property of an object in the ItemsSource collection;
• DataContext.[FieldName] - access a column value;
• View.DataContext.[YourPropertyName] - access a property in a grid’s ViewModel.

View Example: Build Binding Paths in WPF Data Grid Rows

XAML

xmlns:dxmvvm="http://schemas.devexpress.com/winfx/2008/xaml/mvvm"
...
<dxg:TableView.RowStyle>
    <Style TargetType="dxg:RowControl">
        <Style.Triggers>
            <Trigger Property="SelectionState" Value="None">
                <Setter Property="Background" Value="{Binding Row.Color, Converter={dxmvvm:ColorToBrushConverter}}" />
            </Trigger>
        </Style.Triggers>
    </Style>
</dxg:TableView.RowStyle>

Customize Focused/Selected Cells

Use the CustomCellAppearance event to apply a color to selected/focused cells based on a condition. In this event handler, you can override the default selection color or combine it with the formatted color.

Use the CustomCellAppearance event to highlight a cell based on its value. You cannot highlight a cell based on other column values.

For more information about this event, refer to Formatting Focused Cells and Rows.

Customize Focused/Selected Rows

Use CustomRowAppearance event to apply a color to selected/focused rows based on a condition. In this event handler, you can override the default selection color or blend it with the formatted color.

For more information about this event, refer to Formatting Focused Cells and Rows.

Summary

Cell Formatting Tasks	Conditional Formatting	CellStyle/CellTemplate	CustomCellAppearance
Highlight a cell if a column value matches a certain condition	(recommended)
Use a Color/Brush stored in ItemsSource entries to highlight a cell
Customize a focused/selected cell
Preserve formatting for regular export		( PrintCellStyle )
Preserve formatting for data-aware export
Row Formatting Tasks	Conditional Formatting	RowStyle	CustomRowAppearance
Highlight a row if a column value matches a certain condition	(recommended)
Use a Color/Brush stored in ItemsSource entries to highlight a row
Customize a focused/selected row
Preserve formatting for regular and data-aware export