Question

I am drawing simple line charts using the WPF toolkit. My goal is to set the line color of my series via Data Binding. This succeeds only partially. The question is: why?

Setup

Namespaces:

xmlns:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit" x:Class="WpfApplication3.MainWindow"
xmlns:media="clr-namespace:System.Windows.Media;assembly=PresentationCore"

Chart:

<chartingToolkit:Chart x:Name="chart">
    <chartingToolkit:LineSeries x:Name="seriesEntries" IndependentValueBinding="{Binding Key}" DependentValueBinding="{Binding Value}" DataPointStyle="{StaticResource CommonLineSeriesDataPoint}">
        <chartingToolkit:LineSeries.Tag>
            <media:Brush>Green</media:Brush>
        </chartingToolkit:LineSeries.Tag>
    </chartingToolkit:LineSeries>
</chartingToolkit:Chart>

Ignore the Tag for now, it will be relevant later.

Notice the chart has a custom data point style, CommonLineSeriesDataPoint:

<Style x:Key="CommonLineSeriesDataPoint" TargetType="chartingToolkit:LineDataPoint">
    <Setter Property="Background">
        <Setter.Value>
            <media:Brush>Red</media:Brush>
        </Setter.Value>
    </Setter>
</Style>
<Style TargetType="chartingToolkit:LineSeries">
    <Setter Property="DataPointStyle" Value="{StaticResource CommonLineSeriesDataPoint}" />
</Style>

As expected, this colors my line series red:

Breaking Change

Now I want to data bind my data point background. I make only one change. Instead of specifying the background brush directly, I bind it to the Tag property of my LineSeries, which is also a brush (see previous LineSeries declaration, it’s a green one).

<Style x:Key="CommonLineSeriesDataPoint" TargetType="chartingToolkit:LineDataPoint">
    <Setter Property="Background">
        <Setter.Value>
            <Binding Path="Tag" RelativeSource="{RelativeSource AncestorType={x:Type chartingToolkit:LineSeries}}" />
        </Setter.Value>
    </Setter>
</Style>
<Style TargetType="chartingToolkit:LineSeries">
    <Setter Property="DataPointStyle" Value="{StaticResource CommonLineSeriesDataPoint}" />
</Style>

The result is this:

So the dots are green. But the line is gone.

My expectation is to see a green line as well! Where is it?

Answer 1

I found a solution after digging in the WPF Toolkit Sources.

Turns out the Stroke property of the series’ Polyline is bound to a Background property via TemplateBinding. I suspect this doesn’t go well with my try binding the Background property itself.

This answer on SO suggests that TemplateBinding is evaluated at compile time. So let’s get rid of the TemplateBinding and bind the Stroke property directly to the Tag of my LineSeries (remember: the Tag contains the green brush).

From the WPF Toolkit Source \Source\DataVisualization\Themes\generic.xaml I copied part of the style definition for the LineSeries and added it to my ResourceDictionary:

<Style x:Key="CommonLineSeries" TargetType="chartingToolkit:LineSeries" BasedOn="{StaticResource {x:Type chartingToolkit:LineSeries}}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="chartingToolkit:LineSeries">
                <Canvas x:Name="PlotArea">
                    <Polyline Points="{TemplateBinding Points}" Stroke="{Binding Tag, RelativeSource={RelativeSource AncestorType={x:Type chartingToolkit:LineSeries}}}" Style="{TemplateBinding PolylineStyle}"/>
                </Canvas>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

(If interested you can search for <!-- charting:LineSeries --> in generic.xaml to find the source I copied from.)

The only thing I modified is the binding of Stroke. Here I use the same binding I used for my data points.

Last thing to do: tell the LineSeries to use this style:

<chartingToolkit:LineSeries x:Name="seriesEntries" IndependentValueBinding="{Binding Key}" DependentValueBinding="{Binding Value}" DataPointStyle="{StaticResource CommonLineSeriesDataPoint}" Style="{StaticResource CommonLineSeries}">

And lo and behold, it works. The line is back and it’s green:

(If you look closely you see that the legend entry for the series still has the wrong color. But I assume the solution will be quite similar to the above.)