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

Problem:

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.

Solution:

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);
            }

            else
            {
                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.

<UserControl.Resources>
       <Local:RowForeGroundColorConverter x:Key="ConRowForeGroundColor" />
</UserControl.Resources>

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

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

            </Setter>
</Style>

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:sdk2="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"
xmlns:Common="clr-namespace:Your Silverlight Project Name"

Add above namespaces at the top of your xaml file.

Hope it helps!

Popular Posts