# How to: Bind the Grid to a Collection of Conditional Formatting Rules | WPF Controls | DevExpress Documentation This topic describes how to define [conditional formatting rules](/WPF/17130/controls-and-libraries/data-grid/conditional-formatting) in a View Model and apply them to the [GridControl](/WPF/DevExpress.Xpf.Grid.GridControl). [View Example: How to Bind the GridControl to Conditional Formatting Rules Specified in a ViewModel](https://github.com/DevExpress-Examples/wpf-data-grid-generate-conditional-formatting-rules-from-viewmodel-collection) ## Apply Conditional Formatting Rules specified in a ViewModel to the GridControl This example creates a conditional formatting rule that highlights rows. ![DevExpress WPF | Grid Control - MVVM Conditional Formatting](/WPF/images/Grid_MVVM_Highlight_Row_CFRule.png) ### Specify Format Conditions in the ViewModel 1. Create an enumeration that lists comparison rules you want to use in conditional formatting rules: - C# - VB.NET

public enum ConditionRule { Less, Greater }

Public Enum ConditionRule
    Less
    Greater
End Enum

2. Create a class that describes a conditional formatting rule: - C# - VB.NET

public class FormattingRule : BindableBase {
    public FormattingRule(string fieldname, ConditionRule valuerule, int value, bool applytorow) {
        FieldName = fieldname;
        ValueRule = valuerule;
        Value = value;
        ApplyToRow = applytorow;
    }
    public string FieldName { get; }
    public ConditionRule ValueRule { get; }
    public int Value { get; }
    public bool ApplyToRow { get; }
}

Public Class FormattingRule
    Inherits BindableBase

    Public Sub New(ByVal fieldname As String, ByVal valuerule As ConditionRule, ByVal value As Integer, ByVal applytorow As Boolean)
        FieldName = fieldname
        ValueRule = valuerule
        Value = value
        ApplyToRow = applytorow
    End Sub

    Public ReadOnly Property FieldName As String
    Public ReadOnly Property ValueRule As ConditionRule
    Public ReadOnly Property Value As Integer
    Public ReadOnly Property ApplyToRow As Boolean
End Class

3. Specify a collection of conditional formatting rules in the ViewModel: - C# - VB.NET

public class ViewModel : ViewModelBase {
    public ViewModel() {
        // ...
        Rules = new ObservableCollection<FormattingRule>() {
            new FormattingRule("Total", ConditionRule.Less, 0, true)
        };
    }
    // ...
    public ObservableCollection<FormattingRule> Rules { get; }
}

Public Class ViewModel
    Inherits ViewModelBase

    Public Sub New()
        ' ...
        Rules = New ObservableCollection(Of FormattingRule)() From {
            New FormattingRule("Total", ConditionRule.Less, 0, True)
        }
    End Sub

    ' ...
    Public ReadOnly Property Rules As ObservableCollection(Of FormattingRule)
End Class

If you want the [GridControl](/WPF/DevExpress.Xpf.Grid.GridControl) to reflect changes made in the **Rules** collection, this collection should implement the [INotifyCollectionChanged](https://docs.microsoft.com/en-us/dotnet/api/system.collections.specialized.inotifycollectionchanged) interface. ### Create a Format Condition Template 1. To specify a rule’s comparison operator, set the [FormatCondition.ValueRule](/WPF/DevExpress.Xpf.Grid.FormatCondition.ValueRule) property to a [ConditionRule](/WPF/DevExpress.Xpf.Core.ConditionalFormatting.ConditionRule) enumeration value. Create an [ObjectToObjectConverter](/WPF/17361/mvvm-framework/converters#objecttoobjectconverter) to map your **ConditionRule** enumeration values to the [ConditionRule](/WPF/DevExpress.Xpf.Core.ConditionalFormatting.ConditionRule) enumeration values: - XAML

<Window ...
    xmlns:dxmvvm="http://schemas.devexpress.com/winfx/2008/xaml/mvvm">
    <Window.Resources>
        <dxmvvm:ObjectToObjectConverter x:Key="FormatRuleConverter">
            <dxmvvm:MapItem Source="Less" Target="Less"/>
            <dxmvvm:MapItem Source="Greater" Target="Greater"/>
        </dxmvvm:ObjectToObjectConverter>
    </Window.Resources>

2. Create a template that generates conditional formatting rules. Use the **FormatRuleConverter** to specify the **Converter** parameter for the [FormatCondition.ValueRule](/WPF/DevExpress.Xpf.Grid.FormatCondition.ValueRule) property. Use the **DependencyObjectExtensions.DataContext** attached property when you bind the [GridControl](/WPF/DevExpress.Xpf.Grid.GridControl) to conditional formatting properties. This attached property synchronizes data updates of bound properties to enhance grid performance: - XAML

<Window.Resources>
    <DataTemplate x:Key="BackgroundTemplate">
        <ContentControl>
            <dxg:FormatCondition 
                FieldName="{Binding Path=(dxci:DependencyObjectExtensions.DataContext).FieldName, RelativeSource={RelativeSource Self}}"
                ValueRule="{Binding Path=(dxci:DependencyObjectExtensions.DataContext).ValueRule, RelativeSource={RelativeSource Self}, Converter={StaticResource FormatRuleConverter}}"
                Value1="{Binding Path=(dxci:DependencyObjectExtensions.DataContext).Value, RelativeSource={RelativeSource Self}}"
                ApplyToRow="{Binding Path=(dxci:DependencyObjectExtensions.DataContext).ApplyToRow, RelativeSource={RelativeSource Self}}"
                PredefinedFormatName="LightRedFill"/>
        </ContentControl>
    </DataTemplate>
</Window.Resources>

### Apply Format Conditions to the GridControl 1. Assign the conditional formatting rule collection to the [TableView.FormatConditionsSource](/WPF/DevExpress.Xpf.Grid.TableView.FormatConditionsSource) property. 2. Set the [TableView.FormatConditionGeneratorTemplate](/WPF/DevExpress.Xpf.Grid.TableView.FormatConditionGeneratorTemplate) property to a template that generates conditional formatting rules. - XAML

<dxg:GridControl ItemsSource="{Binding Orders}">
    <!-- ... -->
    <dxg:GridControl.View>
        <dxg:TableView FormatConditionsSource="{Binding Rules}"
                       FormatConditionGeneratorTemplate="{StaticResource BackgroundFormat}"/>
    </dxg:GridControl.View>
</dxg:GridControl>

## Add Multiple Conditional Formatting Rules If you want to specify extra format conditions, follow the steps below. This example demonstrates how to add format conditions that change a cell’s font and display an image in this cell. ![DevExpress WPF | Grid Control - MVVM Multiple Format Conditions](/WPF/images/wpf_grid_mvvm_conditionalformatting126727.png) 1. Specify an enumeration that lists format condition types: - C# - VB.NET

public enum FormattingType { Background, Font, Icon }

Public Enum FormattingType
    Background
    Font
    Icon
End Enum

2. Add a property that returns a format condition type to the **Rule** class: - C# - VB.NET

public class FormattingRule : BindableBase {
    public FormattingRule(string fieldname, ConditionRule valuerule, int value, bool applytorow, FormattingType type) {
        FieldName = fieldname;
        ValueRule = valuerule;
        Value = value;
        ApplyToRow = applytorow;
        Type = type;
    }
    public string FieldName { get; }
    public ConditionRule ValueRule { get; }
    public int Value { get; }
    public bool ApplyToRow { get; }
    public FormattingType Type { get; }
}

Public Class FormattingRule
    Inherits BindableBase

    Public Sub New(ByVal fieldname As String, ByVal valuerule As ConditionRule, ByVal value As Integer, ByVal applytorow As Boolean, ByVal type As FormattingType)
        FieldName = fieldname
        ValueRule = valuerule
        Value = value
        ApplyToRow = applytorow
        Type = type
    End Sub

    Public ReadOnly Property FieldName As String
    Public ReadOnly Property ValueRule As ConditionRule
    Public ReadOnly Property Value As Integer
    Public ReadOnly Property ApplyToRow As Boolean
    Public ReadOnly Property Type As FormattingType
End Class

3. Add conditional formatting rules to the **Rules** collection: - C# - VB.NET

public class ViewModel : ViewModelBase {
    public ViewModel() {
        // ...
        Rules = new ObservableCollection<FormattingRule>() {
            new FormattingRule("Total", ConditionRule.Less, 0, true, FormattingType.Background),
            new FormattingRule( nameof(Order.Discount), ConditionRule.Greater, 0, false, FormattingType.Font),
            new FormattingRule( nameof(Order.Discount), ConditionRule.Greater, 0, false, FormattingType.Icon)
        };
    }
    // ...
    public ObservableCollection<FormattingRule> Rules { get; }
}

Public Class ViewModel
    Inherits ViewModelBase

    Public Sub New()
        ' ...
        Rules = New ObservableCollection(Of FormattingRule)() From {
            New FormattingRule("Total", ConditionRule.Less, 0, True, FormattingType.Background),
            New FormattingRule(NameOf(Order.Discount), ConditionRule.Greater, 0, False, FormattingType.Font),
            New FormattingRule(NameOf(Order.Discount), ConditionRule.Greater, 0, False, FormattingType.Icon)
        }
    End Sub

    ' ...
    Public ReadOnly Property Rules As ObservableCollection(Of FormattingRule)
End Class

4. Create templates that generate conditional formatting rules: - XAML

<Window ...
    xmlns:dxci="http://schemas.devexpress.com/winfx/2008/xaml/core/internal"
    xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core">
    <Window.Resources>
        <!-- ... -->
        <DataTemplate x:Key="FontTemplate">
            <ContentControl>
                <dxg:FormatCondition 
                    FieldName="{Binding Path=(dxci:DependencyObjectExtensions.DataContext).FieldName, RelativeSource={RelativeSource Self}}"
                    ValueRule="{Binding Path=(dxci:DependencyObjectExtensions.DataContext).ValueRule, RelativeSource={RelativeSource Self}, Converter={StaticResource FormatRuleConverter}}"
                    Value1="{Binding Path=(dxci:DependencyObjectExtensions.DataContext).Value, RelativeSource={RelativeSource Self}}"
                    ApplyToRow="{Binding Path=(dxci:DependencyObjectExtensions.DataContext).ApplyToRow, RelativeSource={RelativeSource Self}}"
                    PredefinedFormatName="BoldText"/>
            </ContentControl>
        </DataTemplate>

        <DataTemplate x:Key="IconTemplate">
            <ContentControl>
                <dxg:FormatCondition 
                    FieldName="{Binding Path=(dxci:DependencyObjectExtensions.DataContext).FieldName, RelativeSource={RelativeSource Self}}"
                    ValueRule="{Binding Path=(dxci:DependencyObjectExtensions.DataContext).ValueRule, RelativeSource={RelativeSource Self}, Converter={StaticResource FormatRuleConverter}}"
                    Value1="{Binding Path=(dxci:DependencyObjectExtensions.DataContext).Value, RelativeSource={RelativeSource Self}}"
                    ApplyToRow="{Binding Path=(dxci:DependencyObjectExtensions.DataContext).ApplyToRow, RelativeSource={RelativeSource Self}}">
                    <dxg:FormatCondition.Format>
                        <dx:Format Icon="{dx:IconSet Name=Stars3_1}"/>
                    </dxg:FormatCondition.Format>
                </dxg:FormatCondition>
            </ContentControl>
        </DataTemplate>
    </Window.Resources>

## Add a Template Selector to Choose among Multiple Templates Your application now contains the **BackgroundTemplate**, **FontTemplate**, and **IconTemplate**. To choose a template based on the format condition type, create a template selector and assign it to the [TableView.FormatConditionGeneratorTemplateSelector](/WPF/DevExpress.Xpf.Grid.TableView.FormatConditionGeneratorTemplateSelector) property: - C# - VB.NET

public class FormatConditionSelector : DataTemplateSelector {

    public DataTemplate BackgroundTemplate { get; set; }
    public DataTemplate FontTemplate { get; set; }
    public DataTemplate IconTemplate { get; set; }

    public override DataTemplate SelectTemplate(object item, DependencyObject container) {
        FormattingRule rule = item as FormattingRule;
        if(rule == null) return null;
        switch(rule.Type) {
            case FormattingType.Font:
                return FontTemplate;
            case FormattingType.Background:
                return BackgroundTemplate;
            case FormattingType.Icon:
                return IconTemplate;
        }
        return null;
    }
}

Public Class FormatConditionSelector
    Inherits DataTemplateSelector

    Public Property BackgroundTemplate As DataTemplate
    Public Property FontTemplate As DataTemplate
    Public Property IconTemplate As DataTemplate

    Public Overrides Function SelectTemplate(ByVal item As Object, ByVal container As DependencyObject) As DataTemplate
        Dim rule As FormattingRule = TryCast(item, FormattingRule)
        If rule Is Nothing Then Return Nothing

        Select Case rule.Type
            Case FormattingType.Font
                Return FontTemplate
            Case FormattingType.Background
                Return BackgroundTemplate
            Case FormattingType.Icon
                Return IconTemplate
        End Select

        Return Nothing
    End Function
End Class

- XAML

<Window.Resources>
    <!-- ... -->
    <local:FormatConditionSelector x:Key="FormatConditionSelector" 
                                   BackgroundTemplate="{StaticResource BackgroundTemplate}" 
                                   FontTemplate="{StaticResource FontTemplate}" 
                                   IconTemplate="{StaticResource IconTemplate}"/>
</Window.Resources>
<dxg:GridControl ItemsSource="{Binding Orders}">
    <!-- ... -->
    <dxg:GridControl.View>
        <dxg:TableView FormatConditionsSource="{Binding Rules}"
                       FormatConditionGeneratorTemplateSelector="{StaticResource FormatConditionSelector}"/>
    </dxg:GridControl.View>
</dxg:GridControl>

See Also [Conditional Formatting](/WPF/17130/controls-and-libraries/data-grid/conditional-formatting) [Bind to Collections Specified in the ViewModel](/WPF/403274/controls-and-libraries/data-grid/mvvm-enhancements/bind-to-collections-specified-in-the-viewmodel)