Changing DataGridRow ForeGround Color Dynamically in Silverlight using Style in View Model


Some time ago, i was required to change the ForeGround color of  data grid row based on a variable's value. I have done the same thing with data grid background color so i thought it would be easy, but i was wrong :)
This problem took quite of  my to get solved. When i gave a hardcoded value to fore ground color, it works fine but whenever i tried to make it dynamic, it throws an exception. After doing a lot of search i came to know how to set its value dynamically.


This required three simple steps to di the magic. I am providing dynamic value using Converter, to first step is to create a Converter in your view model:

1. In Your View Model

           /// <summary>
    /// converts row text color on the basis of Location value
    /// </summary>
    public class RowForeGroundColorConverter : IValueConverter
        // This converts the string object to the color
        // to display USA => Blue and Canada => Red
        public object Convert (object value, Type targetType, object parameter,
            System.Globalization.CultureInfo culture)
            string strLocation = (string) value;

            if (string.Equals(strLocation, "USA"))
                return new SolidColorBrush(Colors.Blue);

            else if (string.Equals(strLocation, "Canada"))
                return new SolidColorBrush(Colors.Red);

                return new SolidColorBrush(Colors.Black);


        // No need to implement converting back on a one-way binding
        // but if you want two way
        public object ConvertBack (object value, Type targetType,
            object parameter, System.Globalization.CultureInfo culture)
            return parameter;

2. In Your XAML

First you have to add this converter in your resources so that you be able to access it in your xaml code.

       <Local:RowForeGroundColorConverter x:Key="ConRowForeGroundColor" />

Second step is to write a style that will use this converter.

<Style x:Key="DealGridRowStyle"
            <Setter Property="IsTabStop"
                    Value="False" />
            <Setter Property="Common:SetterValueBindingHelper.PropertyBinding">
                    <Common:SetterValueBindingHelper Property="Foreground"
                                                     Binding="{Binding Converter={StaticResource ConRowForeGroundColor}, Path=Destination}" />


Now you have to add this style to your required data grid like:

RowStyle="{StaticResource DealGridRowStyle}"

Namespcaes required by you to carry on with this code are:

xmlns:Common="clr-namespace:Your Silverlight Project Name"

Add above namespaces at the top of your xaml file.

Hope it helps!

Popular Posts