WPF Toolkit DataGrid – Conditional Formatting

Often you may want to highlight certain data entries inside a datagrid according to given conditions. Imagine displaying business sales. Here you may want to highlight all rows that don’t reach a certain amount in the corresponding value column in order to get a quick overview. That is where conditional formatting comes into play. 

This post explains a possibility to achieve conditional formatting inside a WPF Toolkit Datagrid using styles and triggers. It will focus on formatting rows or just single cells. This is achieved by adding style information to the datagrids row and cell style at runtime. The entire style will be generated in code. If you just need some XAML to get you started doing conditional formatting, scroll down and use the XAML snippet.  Let’s first create some building bricks for our solution.

The Condition

It’s obvious that we need to define the condition in any way to get conditional formatting. According to your data you may have lots of conditions you may need to filter at. In order to demonstrate the concept I will use numeric values. Again there is a lot that you can compare using numbers. The following enumeration defines the most common operations:

public enum NumericOperator

{

    //A equals B

    Equals = 1, 

    //A is greater than B

    GreaterThan = 2,

    //A is smaller than B

    SmallerThan = 4, 

    //A is greater or equals B

    GreaterThanEquals = 8,

    //A is smaller or equals B

    SmallerThanEquals = 16,

}

A type of NumericOperator can be used to define the comparison operator. Now we need the values to be compared. The first value comes from the underlying objects that are displayed in the grid. More specifically it is the value of a property from the bound object. For simplicity we define where to find that value by just passing the name. This is acceptable because I will use the name inside a binding element so no extra work is required. The second value must be provided to the formatter by just passing the value itself. This is a static value set by the user. To sum it up, the following parameters need to be passed to the formatter in order to define a condition:

-          A value of the NumericOperator enumeration

-          The name of a property of the underlying object

-          The compare value

The Conditional Formatter

The formatter receives the condition parameters defined above and a reference to the grid:

new DataGridConditionalRowFormatter(this.dataGrid, "Price",

NumericOperator.GreaterThan, "10")

    {

        ConditionalBackgroundColor = Colors.OrangeRed,

        ConditionalTextColor = Colors.White,

        NormalBackgroundColor = Colors.LightGreen

    };

At runtime it generates a style object and applies it to the appropriate style property of the grid (e.g. RowStyle or CellStyle). The XAML code it produces looks similar to the following snippet:

<Style TargetType="DataGridCell" >

  <Style.Triggers>

    <DataTrigger Binding="{Binding Price,

    Converter=NumberToBoolConverter}" Value="True">

      <Setter Property="Background" Value="OrangeRed"/>

    </DataTrigger>

    <DataTrigger Binding="{Binding Price,

    Converter=NumberToBoolConverter}" Value="False">

      <Setter Property="Background" Value="White"/>

    </DataTrigger>

  </Style.Triggers>

</Style>

It uses DataTriggers to set the background color of a row or cell if the result of the binding evaluates to true and back to a standard color if it evaluates to false. Therefore converters have to be used in order to evaluate the condition and return a boolean value. If you use a boolean property as binding source than actually no converter is needed.

I started a small codeplex project with my solution where you can download a library containing a conditional row and cell formatter that are able to do numeric, string and boolean evaluation (see pictures below). As far as my spare time allows it I will extend the library with additional features. Any feedback is very welcome.

Conditional row formatting: rows with a price greater ten are highlighted

Conditional cell formatting: names that contain "1" are highlighted

Injecting XML Serialization for formatting decimal properties

When serializing objects that contain properties with type of decimal, the .NET XmlSerializer writes them to the resulting XML file exactly as they are specified in your program code. That means that if you assign a value of 5 then you will get the following XML from the serializer:

<Price>5</Price>

If you instead assign 5.00 you will receive the following output:

<Price>5.00</Price>

In this behavior the decimal type is different to all other numeric value types (e.g. double). For those of you who are interested at details you may have a look at comnumber.cpp which is the underlying Win32 API file used for formatting numbers. But that’s not the focus of this blog entry. I will just show one possibility to inject some additional behavior in order to format all the decimal properties you want formatted. This solution takes into account that you already have some code and objects you need to serialize and therefore tries to make as little changes to existing code as possible.

You can either tell the serializer to format all decimal properties it finds on an object or you may give it the chance to decide itself which properties to format and which not. The first approach requires no changes within your objects and is a lot easier. But if you want only certain properties to be formatted you must mark these properties accordingly. In order to do this we firstly define a custom attribute like follows:

[AttributeUsage(AttributeTargets.Property)]

public class DecimalFormatterAttribute : Attribute

{
    public DecimalFormatterAttribute(string formatString)
    {
        Format = formatString;
    }

    public string Format { get; private set; }

}

The attribute simply gets a user defined format string that will later be used to format the decimal value of the decorated property. With the AttributeUsage attribute we tell the compiler that our attribute is only valid on properties. With that attribute set up you can no go and decorate all the properties you want to be formatted by the serializer:

[DecimalFormatter("0.00")]

public decimal Price { get; set; }

To write out simple value types the XmlSerializer uses as type of XmlSerializationPrimitiveWriter. It would be the easiest way to extend this writer and use your own class for formatting. But due to its protection level you can’t do this. So the only thing one can do is to set the value of a given decimal property according to the format string specified within our custom property before serializing the object. That means that before we call XmlSerializer.Serialize(…) we need to format our decimal properties. There are a number of ways in which you can achieve this. I will present two of them here. Both solutions don’t require great code changes.

1. Custom serialization class

In a custom class you specify a Serialize and a Deserialize method. Both methods route their calls to an internal field of type XmlSerializer. In the Serialize method additional logic is executed before the call to XmlSerializer.Serialize:

public void Serialize(Stream stream, object o)

{
    var type = o.GetType();
    //get all public properties of o
    var properties = type.GetProperties();
    if (properties.Length > 0)
    {
        foreach (var propertyInfo in properties)
        {
            //apply only to properties of type decimal
            if (propertyInfo.PropertyType.Equals(typeof (decimal)))
            {
                //try to get DecimalFormatterAttribute attribute
                object[] formatterAttribute =
                    propertyInfo.GetCustomAttributes(
                                             typeof (DecimalFormatterAttribute), false);

                if (formatterAttribute.Length == 1)

                {

                    string format =

((DecimalFormatterAttribute)

formatterAttribute[0]).Format;

                    var value = (decimal) propertyInfo.GetValue(o, null);

                    var formattedString = value.ToString(

format, NumberFormatInfo.CurrentInfo); 

                    propertyInfo.SetValue(o,

decimal.Parse(formattedString), null);

                }

            }

        }

    }

    serializer.Serialize(stream, o);

} 

The method uses reflection to get all properties of the given object. If you don’t specify any BindingFlags value in the call to Type.GetProperties then all public properties will be retrieved by default. For each property – if it is of type decimal – we try to get our custom attribute and if we find it we apply it to the ToString method of the property value. Afterwards we set the property value by parsing the generated string. Of course this is kind of a little trick but I think it’s acceptable here. When we are finished formatting all decimal properties we simply need to call the Serialize method of the XmlSerializer.

The disadvantage of this solution is that you need to change all existing calls to XmlSerializer.Serialze you may already have in your application in that way that you must use a different class.

2. Use an extension method for XmlSerializer

If you don’t want a separate class encapsulating an XmlSerializer then you can use an extension method: 

public static class XmlSerializerExtension

{

    public static void SerializeDecimal(

this XmlSerializer serializer, Stream stream, object o)

    {

       …  

    }

} 

The method implementation is the same as above. Unfortunately you cannot name the extension method Serialize because the XmlSerializer class already contains that method. So slightly rename your method and you are able to use it instead of XmlSerializer.Serialize:

var s = new XmlSerializer(typeof (Product));

s.SerializeDecimal(stream, p);

 
Again you need to change at least the method call within your existing code. It’s purely a matter of taste which of the presented methods to choose.