Lesson 5: Format Rows and Cells Based on their Values

• Apr 19, 2022
• 2 minutes to read

This tutorial demonstrates how to apply conditional formats that help users visually identify trends and largest or smallest values, and compare data.

The GridControl allows you to apply the following format conditions:

Format Condition	Description
FormatCondition	Formats cells based on the specified Expression.
TopBottomRuleFormatCondition	Formats cells with top/bottom N values or values that are above/below an average value.
UniqueDuplicateRuleFormatCondition	Formats cells whose values are unique or duplicate.

Do the following to apply a format condition:

1. Create a FormatCondition object and add it to the DataControlBase.FormatConditions collection.
2. In the FormatCondition, specify the FieldName property to format values within this column or set the ApplyToRow property to true to format values within the entire row.
3. Specify the Expression property with a format rule.
4. Specify the PredefinedFormatName property to apply a predefined format or use the Format property to create your own format.

MainWindow.xaml

<dxg:GridControl ...>
    <dxg:GridControl.FormatConditions>
        <!-- Changes the background of rows to light red
             if the quantity value is greater than 50. -->
        <dxg:FormatCondition ApplyToRow="True" Expression="[Quantity] &gt; 50" 
                             PredefinedFormatName="{x:Bind dxg:PredefinedFormatNames.LightRedFill}"/>
        <!-- Changes the format of cell values in the Unit Price column to bold and red
             if they are greater than 80. -->
        <dxg:FormatCondition FieldName="UnitPrice" Expression="[UnitPrice] &gt; 80">
            <dxg:FormatCondition.Format>
                <dxg:Format FontWeight="Bold" Foreground="Red"/>
            </dxg:FormatCondition.Format>
        </dxg:FormatCondition>
    </dxg:GridControl.FormatConditions>
</dxg:GridControl>