Changing color of a Chart Dynamically in WPF using MVVM and Databinding

Question

I'm trying to build a Chart, with Columns. The columns will have different colors by value. I'm using MVVM with WPF and Databinding. How i'm trying to do (Into my ViewModel):

 private Int16 colorValue;
    public Int16 ColorValue
    {
        get { return colorValue; }
        set
        {
            colorValue = value;
            if (ColorValue < 20)
                ColorType = new SolidColorBrush { Color = Colors.Aqua };
            if (ColorValue < 40)
                ColorType = new SolidColorBrush { Color = Colors.Gray };
            if (ColorValue >= 41)
                ColorType = new SolidColorBrush { Color = Colors.Black };
        }
    }
    private Brush colorType;
    public Brush ColorType
    {
        get { return colorType; }
        set
        {
            if (value != null)
            {
                colorType = value;
                OnPropertyChanged("ColorType");
            }
        }
    }

Into My Xaml (This is the Static Resource to change the Column Color Attribute):

 <Style x:Key="ColorByGradeColumn" TargetType="DVC:ColumnDataPoint">
        <Setter Property="Background" Value="DarkGray"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate
            TargetType="DVC:ColumnDataPoint">
                    <Border
                BorderBrush="{TemplateBinding BorderBrush}"
                BorderThickness="{TemplateBinding BorderThickness}">
                        <Grid Background="{Binding ColorType}">
                            <Rectangle>
                                <Rectangle.Fill>
                                    <LinearGradientBrush>
                                        <GradientStop Color="#77ffffff" Offset="0"/>
                                        <GradientStop Color="#00ffffff" Offset="1"/>
                                    </LinearGradientBrush>
                                </Rectangle.Fill>
                            </Rectangle>
                            <Border BorderBrush="#ccffffff" BorderThickness="1">
                                <Border BorderBrush="#77ffffff" BorderThickness="1"/>
                            </Border>
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

My Chart into Xaml:

<Grid Grid.Column="2" Height="368" HorizontalAlignment="Left" Name="grid1" VerticalAlignment="Bottom" Width="1009" Grid.ColumnSpan="4" >
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="198*" />
            <ColumnDefinition Width="191*" />
        </Grid.ColumnDefinitions>
        <DVC:Chart x:Name="ColumnChart"
           Grid.ColumnSpan="2">
            <DVC:ColumnSeries
                AnimationSequence="FirstToLast"
                FlowDirection="LeftToRight"
                Title="Largura"
                ItemsSource="{Binding Path=Placas, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                ToolTip="{Binding Path=Slab.InfThick}"
                DependentValueBinding="{Binding Path=Slab.InfThick}"
                IndependentValueBinding="{Binding Path=Slab.SlabId}"
                DataPointStyle="{StaticResource ColorByGradeColumn}">
            </DVC:ColumnSeries>
        </DVC:Chart>
    </Grid>

So... My Chart using ColumnSeries get it's attribute by the Static Resource defined into DataPointStyle. StaticResource 'ColorByGradeColumn' i've made a binding to my property ColorType. Here's the question... Why isn't working? I've followed the steps explained in this link:

Columns of a different color [Customizing the appearance of Silverlight charts with re-templating and MVVM]

And I really don't know what i'm missing.

Thanks in advance.

Answer 1

Maybe I'm misunderstanding, but aren't you covering your grid background colour with a fixed gradient fill?

Answer 2

Ok, we've figured out how to fix that annoying thing:

We've created a converter than will receive the value, and returns the color than we wanted. Before, I was trying to do with a Property:

  #region Converters
/// <summary>
/// Retorna a cor do estado da placa
/// </summary>
public class RetornaCorEstadoBarra : DependencyObject, IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        try
        {
            var ColorValue = (Int32)value;
            if (ColorValue < 800)
                return "Aqua";
            else if (ColorValue < 1000)
                return "Gray";
            else //if (ColorValue > 1001)
                return "Black";
        }
        catch
        {
            return "Black";
        }
    }

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}
#endregion

Created a Resource inside xaml file:

<vm:RetornaCorEstadoBarra x:Key="RetornaCorEstadoBarra" />

And created a Style a little below that Resource:

<Style x:Key="ColorByGradeColumn" TargetType="DVC:ColumnDataPoint">
        <Setter Property="Template" >
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type DVC:ColumnDataPoint}">
                    <Border
                         BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"
                         Background="{Binding Slab.InfThick,Converter={StaticResource RetornaCorEstadoBarra}}"
                         >
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Ok, now's the catch:

 <DVC:Chart x:Name="ColumnChart" Grid.ColumnSpan="2" Width="{Binding Path=GridWidthSize}" >
                <DVC:ColumnSeries 
                AnimationSequence="FirstToLast" FlowDirection="LeftToRight" Title="Largura" ItemsSource="{Binding Path=Placas, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                ToolTip="{Binding Path=Slab.SlabId}" DependentValueBinding="{Binding Path=Slab.InfThick}" IndependentValueBinding="{Binding Path=Slab.SlabId}"
                    DataPointStyle="{StaticResource ColorByGradeColumn}">
                    <DVC:ColumnSeries.IndependentAxis>
                        <DVC:CategoryAxis Orientation="X" Visibility="Visible" Foreground="Transparent"/>
                    </DVC:ColumnSeries.IndependentAxis>
                </DVC:ColumnSeries>
             </DVC:Chart>
        </ScrollViewer>

Well, the problem is, the color into the Chart is a Static Resource. It doesn't change a second time. So, with a 'improvised' dynamic resource, the problem is fixed, right here:

Background="{Binding Slab.InfThick,Converter={StaticResource RetornaCorEstadoBarra}}"

We pass the parameter to that Converter RetornaCorEstadoBarra. It will receive the parameter, and return a color value. Then, inside my Chart, than Binds to my Resource, will populate the Chart with the value received by my Converter. But the Chart only gets the value once. However, my converter will always return a value when he receive a value. That's the catch.

Thanks for the help :)