How to: Apply Conditional Formatting

• Jun 07, 2019
• 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 markup.

The image below shows the result.

Note

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

ConditionalFormattingViewModel.cs

using System.ComponentModel.DataAnnotations;
using System.Linq;

namespace ConditionalFormatting {
    public class ConditionalFormattingViewModel {
        public ConditionalFormattingViewModel() {
            Items = SaleOverviewDataGenerator.GenerateSales();
        }
        public SaleOverviewData[] Items { get; private set; }
    }
}

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:dxc="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">
                    <dxg:TableView.FormatConditions>
                        <dxg:FormatCondition Expression="[SalesVsTarget] &lt; 0.0m" FieldName="SalesVsTarget" PredefinedFormatName="RedText"/>
                        <dxg:FormatCondition Expression="[Profit] &lt; 0.0" FieldName="Profit">
                            <dxc:Format Foreground="Red"/>
                        </dxg:FormatCondition>
                        <dxg:FormatCondition Expression="[SalesVsTarget] &gt; 0.0m" FieldName="SalesVsTarget" PredefinedFormatName="GreenText"/>
                        <dxg:DataBarFormatCondition FieldName="Sales" PredefinedFormatName="RedGradientDataBar"/>
                        <dxg:TopBottomRuleFormatCondition Expression="[Sales]" FieldName="{x:Null}" PredefinedFormatName="BoldText" Rule="TopPercent" Threshold="10"/>
                        <dxg:DataBarFormatCondition FieldName="Profit" PredefinedFormatName="GreenGradientDataBar"/>
                        <dxg:IconSetFormatCondition FieldName="MarketShare" PredefinedFormatName="Quarters5IconSet"/>
                        <dxg:IconSetFormatCondition FieldName="CustomersSatisfaction" PredefinedFormatName="Stars3IconSet"/>
                    </dxg:TableView.FormatConditions>
                </dxg:TableView>
            </dxg:GridControl.View>
        </dxg:GridControl>

    </Grid>
</Window>

Application.xaml.vb

Imports System
Imports System.Collections.Generic
Imports System.Configuration
Imports System.Data
Imports System.Linq
Imports System.Threading.Tasks
Imports System.Windows

Namespace ConditionalFormatting
    ''' <summary>
    ''' Interaction logic for App.xaml
    ''' </summary>
    Partial Public Class App
        Inherits Application

        Private Sub OnAppStartup_UpdateThemeName(ByVal sender As Object, ByVal e As StartupEventArgs)

            DevExpress.Xpf.Core.ApplicationThemeHelper.UpdateApplicationThemeName()
        End Sub
    End Class
End Namespace

ConditionalFormattingViewModel.vb

Imports System.ComponentModel.DataAnnotations
Imports System.Linq

Namespace ConditionalFormatting
    Public Class ConditionalFormattingViewModel
        Public Sub New()
            Items = SaleOverviewDataGenerator.GenerateSales()
        End Sub
        Private privateItems As SaleOverviewData()
        Public Property Items() As SaleOverviewData()
            Get
                Return privateItems
            End Get
            Private Set(ByVal value As SaleOverviewData())
                privateItems = value
            End Set
        End Property
    End Class
End Namespace

Application.xaml

<Application x:Class="ConditionalFormatting.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             StartupUri="MainWindow.xaml" Startup="OnAppStartup_UpdateThemeName">
    <Application.Resources>

    </Application.Resources>
</Application>