How to: Apply Conditional Formatting to Data Cells

• Jun 07, 2019
• 3 minutes to read

This example shows how to add format conditions to WPF Pivot Grid Control.

• The Data Bar conditional formatting is applied to the ‘Extended Price’ measure and intersection of the ‘Sales Person’ and ‘Quarter’ fields. This condition formats data cells with a predefined orange gradient data bar.
• The Top Bottom Rule conditional formatting is applied to the ‘Quantity’ measure and intersection of the ‘Sales Person’ and ‘Quarter’ fields. This condition formats data cells whose values are above average with green text and light green fill.
• The Icon Set conditional formatting is applied to the ‘Extended Price’ measure and intersection of the ‘Sales Person’ and ‘Year’ fields. This condition displays a specific icon in a cell according to the range to which this cell value belongs.

The image below shows the result.

View Example

MainWindow.xaml.cs

using System.Windows;
using System;
using DevExpress.Xpf.PivotGrid;

namespace WpfPivotGridConditionalFormatting
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            FilterFieldValues(fieldYear, new int[]{2016}, FieldFilterType.Included);

            // Creates a new DataBarFormatCondition instance.
            DataBarFormatCondition formatRulesDataBar = new DataBarFormatCondition();

            // Adds this instance to the FormatConditionCollection.
            pivotGridControl1.AddFormatCondition(formatRulesDataBar);

            // Specifies a column field.
            formatRulesDataBar.ColumnName = "fieldQuarter";

            // Specifies a row field.
            formatRulesDataBar.RowName = "fieldSalesPerson";

            // Specifies a data field.
            formatRulesDataBar.MeasureName = "fieldExtendedPrice";

            // Applies the condition to intersection of row and column fields.
            formatRulesDataBar.ApplyToSpecificLevel = true;

            // Sets the predefined format.
            formatRulesDataBar.PredefinedFormatName = "OrangeGradientDataBar";


        }

        private void FilterFieldValues(PivotGridField field, int[] filterValues, 
            FieldFilterType filterType)
        {
            pivotGridControl1.BeginUpdate();
            try
            {
                field.FilterValues.Clear(); 
                foreach (object filterValue in filterValues)
                    field.FilterValues.Add(filterValue);
            }
            finally
            {
                field.FilterValues.FilterType = filterType;
                pivotGridControl1.EndUpdate();
            }
        }
    }
}

MainWindow.xaml

<Window x:Class="WpfPivotGridConditionalFormatting.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:dxpg="http://schemas.devexpress.com/winfx/2008/xaml/pivotgrid"
        xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"
        xmlns:my="clr-namespace:WpfPivotGridConditionalFormatting.nwindDataSetTableAdapters" 
        xmlns:my1="clr-namespace:WpfPivotGridConditionalFormatting"
        dx:ThemeManager.Theme="Office2013LightGray" 
        Title="Pivot Grid Conditional Formatting" 
        Height="427" Width="755" >
    <Window.Resources>
        <dx:TypedSimpleSource x:Key="TypedSimpleSource" 
                              AdapterType="my:SalesPersonTableAdapter" 
                              ContextType="my1:nwindDataSet" 
                              Path="SalesPerson">
            <dx:DesignDataManager.DesignData>
                <dx:DesignDataSettings RowCount="5" />
            </dx:DesignDataManager.DesignData>
        </dx:TypedSimpleSource>
    </Window.Resources>
    <Grid>
        <dxpg:PivotGridControl Name="pivotGridControl1" 
                               DataSource="{Binding Path=Data, Source={StaticResource TypedSimpleSource}}" 
                               AllowConditionalFormattingMenu="True">
            <dxpg:PivotGridControl.FormatConditions>
                <dxpg:IconSetFormatCondition ApplyToSpecificLevel="True" 
                                             MeasureName="fieldExtendedPrice" 
                                             RowName="fieldSalesPerson" ColumnName="fieldYear">
                    <dxpg:IconSetFormatCondition.Format>
                    <dx:IconSetFormat>
                        <dx:IconSetElement Threshold="66.666666666666671" ThresholdComparisonType="GreaterOrEqual">
                            <dx:IconSetElement.Icon>
                                <BitmapImage UriCachePolicy="{x:Null}" 
        UriSource="pack://application:,,,/DevExpress.Xpf.Core.v15.1;component/Core/ConditionalFormatting/Images/IconSets/Arrows3_1.png" />
                            </dx:IconSetElement.Icon>
                        </dx:IconSetElement>
                        <dx:IconSetElement Threshold="33.333333333333336" ThresholdComparisonType="GreaterOrEqual">
                            <dx:IconSetElement.Icon>
                                <BitmapImage UriCachePolicy="{x:Null}" 
         UriSource="pack://application:,,,/DevExpress.Xpf.Core.v15.1;component/Core/ConditionalFormatting/Images/IconSets/Arrows3_2.png" />
                            </dx:IconSetElement.Icon>
                        </dx:IconSetElement>
                        <dx:IconSetElement Threshold="0" ThresholdComparisonType="GreaterOrEqual">
                            <dx:IconSetElement.Icon>
                                <BitmapImage UriCachePolicy="{x:Null}" 
         UriSource="pack://application:,,,/DevExpress.Xpf.Core.v15.1;component/Core/ConditionalFormatting/Images/IconSets/Arrows3_3.png" />
                            </dx:IconSetElement.Icon>
                        </dx:IconSetElement>
                        </dx:IconSetFormat>
                    </dxpg:IconSetFormatCondition.Format>
                </dxpg:IconSetFormatCondition>
                <dxpg:TopBottomRuleFormatCondition ApplyToSpecificLevel="True" 
                                                   ColumnName="fieldQuarter" 
                                                   MeasureName="fieldQuantity" 
                                                   RowName="fieldSalesPerson" 
                                                   Rule="TopItems">
                    <dxpg:TopBottomRuleFormatCondition.Format>
                        <dx:Format Background="LightGreen" Foreground="Green" />
                    </dxpg:TopBottomRuleFormatCondition.Format>
                </dxpg:TopBottomRuleFormatCondition>
            </dxpg:PivotGridControl.FormatConditions>
            <dxpg:PivotGridControl.Fields>
                <dxpg:PivotGridField Area="RowArea" FieldName="Country" 
                                     Name="fieldCountry" AreaIndex="0" />
                <dxpg:PivotGridField Area="DataArea" FieldName="Extended Price" 
                                     Name="fieldExtendedPrice" AreaIndex="0" />
                <dxpg:PivotGridField Area="ColumnArea" Caption="Year" FieldName="OrderDate"
                                     Name="fieldYear" GroupInterval="DateYear" AreaIndex="0" />
                <dxpg:PivotGridField Area="ColumnArea" Caption="Quarter" FieldName="OrderDate" 
                                     Name="fieldQuarter" GroupInterval="DateQuarter" AreaIndex="1" ValueFormat="Quarter {0}" />
                <dxpg:PivotGridField Area="DataArea" FieldName="Quantity" 
                                     Name="fieldQuantity" AreaIndex="1" />
                <dxpg:PivotGridField Area="RowArea" FieldName="Sales Person" 
                                     Name="fieldSalesPerson" AreaIndex="1" />
            </dxpg:PivotGridControl.Fields>
        </dxpg:PivotGridControl>
    </Grid>
</Window>

MainWindow.xaml.vb

Imports System.Windows
Imports System
Imports DevExpress.Xpf.PivotGrid

Namespace WpfPivotGridConditionalFormatting
    ''' <summary>
    ''' Interaction logic for MainWindow.xaml
    ''' </summary>
    Partial Public Class MainWindow
        Inherits Window

        Public Sub New()
            InitializeComponent()

            FilterFieldValues(fieldYear, New Integer(){2016}, FieldFilterType.Included)

            ' Creates a new DataBarFormatCondition instance.
            Dim formatRulesDataBar As New DataBarFormatCondition()

            ' Adds this instance to the FormatConditionCollection.
            pivotGridControl1.AddFormatCondition(formatRulesDataBar)

            ' Specifies a column field.
            formatRulesDataBar.ColumnName = "fieldQuarter"

            ' Specifies a row field.
            formatRulesDataBar.RowName = "fieldSalesPerson"

            ' Specifies a data field.
            formatRulesDataBar.MeasureName = "fieldExtendedPrice"

            ' Applies the condition to intersection of row and column fields.
            formatRulesDataBar.ApplyToSpecificLevel = True

            ' Sets the predefined format.
            formatRulesDataBar.PredefinedFormatName = "OrangeGradientDataBar"


        End Sub

        Private Sub FilterFieldValues(ByVal field As PivotGridField,
                                      ByVal filterValues() As Integer,
                                      ByVal filterType As FieldFilterType)
            pivotGridControl1.BeginUpdate()
            Try
                field.FilterValues.Clear()
                For Each filterValue As Object In filterValues
                    field.FilterValues.Add(filterValue)
                Next filterValue
            Finally
                field.FilterValues.FilterType = filterType
                pivotGridControl1.EndUpdate()
            End Try
        End Sub
    End Class
End Namespace