Setting Bar Color

[Joseph]

I would like to bind the color of a BarSeries to the ValueBinding value so that the color of the bar will change depending on the value the bar represents.  I am running into two problems:

1. I cannot seem to bind to the background property of a border style.  I am getting the error message "Cannot set read-only property ''" (I'm using silverlight 4).
2. Binding to the ValueBinding of the BarSeries element doesn't seem to be the correct approach.

MainPage.xaml

<UserControl x:Class="BarChartTest.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    xmlns:chart="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Chart"
    xmlns:chartView="clr-namespace:Telerik.Windows.Controls.ChartView;assembly=Telerik.Windows.Controls.Chart"
    xmlns:barChartData="clr-namespace:BarChartTest"
    xmlns:converter="clr-namespace:BarChartTest"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <UserControl.DataContext>
        <barChartData:ReadinessViewModel />
    </UserControl.DataContext>

    <UserControl.Resources>
        <converter:BarColorConverter x:Key="BarColorConverter" />
        <Style TargetType="Border" x:Key="BarColor">
            <Setter Property="Background"
                    Value="{Binding ValueBinding, ElementName=Bar, Converter={StaticResource BarColorConverter}}" />
        </Style>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="White">
        <chart:RadCartesianChart x:Name="ReadinessBarChart">
            <chartView:BarSeries x:Name="Bar"
                                 ItemsSource="{Binding ReadinessInfo}"
                                 ValueBinding="Percentage"
                                 CategoryBinding="ReadinessType"
                                 DefaultVisualStyle="{StaticResource BarColor}" />
            <chart:RadCartesianChart.HorizontalAxis>
                <chartView:CategoricalAxis />
            </chart:RadCartesianChart.HorizontalAxis>
            <chart:RadCartesianChart.VerticalAxis>
                <chartView:LinearAxis Minimum="0" Maximum="1" />
            </chart:RadCartesianChart.VerticalAxis>
        </chart:RadCartesianChart>
    </Grid>
</UserControl>

ReadinessViewModel.cs

using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Collections.Generic;

namespace BarChartTest
{
    public class ReadinessViewModel
    {
        private IEnumerable<ReadinessData> readinessInfo;

        public IEnumerable<ReadinessData> ReadinessInfo
        {
            get
            {
                if (readinessInfo == null)
                {
                    readinessInfo = new List<ReadinessData>()
                    {
                        new ReadinessData("DEPLOY", .85),
                        new ReadinessData("IMR", .75),
                        new ReadinessData("FIT", .65),
                        new ReadinessData("FILL", .55)
                    };
                }

                return readinessInfo;
            }
        }
    }
}

ReadinessData.cs

using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace BarChartTest
{
    public class ReadinessData
    {
        private string readinessType;
        private double percentage;

        public string ReadinessType
        {
            get { return readinessType; }
        }

        public double Percentage
        {
            get { return percentage; }
        }

        public ReadinessData(string type, double percent)
        {
            readinessType = type;
            percentage = percent;
        }
    }
}

Coverter.cs

using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Data;

namespace BarChartTest
{
    public class Converter
    {

    }

    public class BarColorConverter : IValueConverter
    {
        object IValueConverter.Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            double score = Double.Parse(value.ToString());
            Color color = Colors.Red;
            if (score >= .7 && score < .8)
                color = Colors.Yellow;
            else if (score >= .8)
                color = Colors.Green;
            else if (score == -1.00)
                color = Colors.Gray;

            return new SolidColorBrush(color);
        }

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

[Joseph]

I think I figured it out.  The trick is to use a BarSeries PointTemplate and then set the fill property of the rectangle to bind to DataItem.Percentage which is the value I'm using in the ValueBinding.

MainPage.xaml

<UserControl x:Class="BarChartTest.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:chart="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Chart"
    xmlns:chartView="clr-namespace:Telerik.Windows.Controls.ChartView;assembly=Telerik.Windows.Controls.Chart"
    xmlns:barChartData="clr-namespace:BarChartTest"
    xmlns:converter="clr-namespace:BarChartTest"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <UserControl.DataContext>
        <barChartData:ReadinessViewModel />
    </UserControl.DataContext>

    <UserControl.Resources>
        <converter:BarColorConverter x:Key="BarColorConverter" />
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="White">
        <chart:RadCartesianChart x:Name="ReadinessBarChart">
            <chartView:BarSeries x:Name="Bar"
                                 ItemsSource="{Binding ReadinessInfo}"
                                 ValueBinding="Percentage"
                                 CategoryBinding="ReadinessType">
                <chartView:BarSeries.PointTemplate>
                    <DataTemplate>
                        <Rectangle Fill="{Binding DataItem.Percentage, Converter={StaticResource BarColorConverter}}" />
                    </DataTemplate>
                </chartView:BarSeries.PointTemplate>
            </chartView:BarSeries>
            <chart:RadCartesianChart.HorizontalAxis>
                <chartView:CategoricalAxis />
            </chart:RadCartesianChart.HorizontalAxis>
            <chart:RadCartesianChart.VerticalAxis>
                <chartView:LinearAxis Minimum="0" Maximum="1" />
            </chart:RadCartesianChart.VerticalAxis>
        </chart:RadCartesianChart>
    </Grid>
</UserControl>