How to: Apply Conditional Formatting in Code-Behind

• Apr 15, 2018
• 2 minutes to read

This example demonstrates how to change the appearance of individual cells based on specific conditions using the Conditional Formatting feature in code-behind.

The image below shows the result.

Note

A complete sample project is available at https://github.com/DevExpress-Examples/how-to-apply-conditional-formatting-in-code-behind-t281415.

MainWindow.xaml.vb

Imports DevExpress.Xpf.Grid
Imports DevExpress.Xpf.Core.ConditionalFormatting
Imports System.Windows
Imports System.Windows.Media

Namespace ConditionalFormatting
    Partial Public Class MainWindow
        Inherits Window

        Public Sub New()
            InitializeComponent()
            Dim salesVsTargetFormatCondition = New FormatCondition() With {.Expression = "[SalesVsTarget] < 0.0m", .FieldName = "SalesVsTarget", .PredefinedFormatName = "RedText"}
            view.FormatConditions.Add(salesVsTargetFormatCondition)

            Dim profitFormatCondition = New FormatCondition() With { _
                .Expression = "[Profit] < 0.0", .FieldName = "Profit", .Format = New Format() With {.Foreground = Brushes.Red} _
            }
            view.FormatConditions.Add(profitFormatCondition)

            Dim salesDataBar = New DataBarFormatCondition() With {.FieldName = "Sales", .PredefinedFormatName = "RedGradientDataBar"}
            view.FormatConditions.Add(salesDataBar)

            Dim _topBottomRule = New TopBottomRuleFormatCondition() With {.Expression = "[Sales]", .FieldName = Nothing, .PredefinedFormatName = "BoldText", .Rule = TopBottomRule.TopPercent, .Threshold = 10.0R}
            view.FormatConditions.Add(_topBottomRule)

            Dim profitDataBar = New DataBarFormatCondition() With {.FieldName = "Profit", .PredefinedFormatName = "GreenGradientDataBar"}
            view.FormatConditions.Add(profitDataBar)

            Dim marketShareIcons = New IconSetFormatCondition() With {.FieldName = "MarketShare", .PredefinedFormatName = "Quarters5IconSet"}
            view.FormatConditions.Add(marketShareIcons)
        End Sub
    End Class
End Namespace

MainWindow.xaml

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:ConditionalFormatting"
        xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"
        xmlns:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid" x:Class="ConditionalFormatting.MainWindow"
        Title="MainWindow" Height="500" Width="800">
    <Window.DataContext>
        <local:ConditionalFormattingViewModel/>
    </Window.DataContext>
    <Grid>
        <dxg:GridControl Name="grid" ItemsSource="{Binding Path=Items}" AllowLiveDataShaping="True" EnableSmartColumnsGeneration="True">
            <dxg:GridControl.Columns>
                <dxg:GridColumn FieldName="State" IsSmart="True" SortIndex="0" VisibleIndex="0"/>
                <dxg:GridColumn FieldName="Sales" IsSmart="True" VisibleIndex="1"/>
                <dxg:GridColumn FieldName="SalesVsTarget" IsSmart="True" FixedWidth="True" VisibleIndex="2"/>
                <dxg:GridColumn FieldName="Profit" IsSmart="True" VisibleIndex="3"/>
                <dxg:GridColumn FieldName="CustomersSatisfaction" IsSmart="True" FixedWidth="True" VisibleIndex="4"/>
                <dxg:GridColumn FieldName="MarketShare" IsSmart="True" FixedWidth="True" VisibleIndex="5"/>
            </dxg:GridControl.Columns>
            <dxg:GridControl.View>
                <dxg:TableView AllowEditing="False" AllowConditionalFormattingMenu="True" Name="view"/>
            </dxg:GridControl.View>
        </dxg:GridControl>

    </Grid>
</Window>

MainWindow.xaml.cs

using DevExpress.Xpf.Grid;
using DevExpress.Xpf.Core.ConditionalFormatting;
using System.Windows;
using System.Windows.Media;

namespace ConditionalFormatting {
    public partial class MainWindow : Window {
        public MainWindow() {
            InitializeComponent();
            var salesVsTargetFormatCondition = new FormatCondition() {
                Expression = "[SalesVsTarget] < 0.0m",
                FieldName = "SalesVsTarget",
                PredefinedFormatName = "RedText"
            };
            view.FormatConditions.Add(salesVsTargetFormatCondition);

            var profitFormatCondition = new FormatCondition() {
                Expression = "[Profit] < 0.0",
                FieldName = "Profit",
                Format = new Format() {
                    Foreground = Brushes.Red
                }
            };
            view.FormatConditions.Add(profitFormatCondition);

            var salesDataBar = new DataBarFormatCondition() {
                FieldName = "Sales",
                PredefinedFormatName = "RedGradientDataBar"
            };
            view.FormatConditions.Add(salesDataBar);

            var topBottomRule = new TopBottomRuleFormatCondition() {
                Expression = "[Sales]",
                FieldName = null,
                PredefinedFormatName = "BoldText",
                Rule =TopBottomRule.TopPercent,
                Threshold = 10d
            };
            view.FormatConditions.Add(topBottomRule);

            var profitDataBar = new DataBarFormatCondition() {
                FieldName = "Profit",
                PredefinedFormatName = "GreenGradientDataBar"
            };
            view.FormatConditions.Add(profitDataBar);

            var marketShareIcons = new IconSetFormatCondition() {
                FieldName = "MarketShare",
                PredefinedFormatName = "Quarters5IconSet"
            };
            view.FormatConditions.Add(marketShareIcons);
        }
    }
}