Charts: Custom LineDataPoint style with different line colors

This post is a follow up to my initial post on much the same topic – “Charts: Creating custom style for LineDataPoint”. The reason for this new post was that after the last post I needed to create a new chart with multiple lines, on these lines I wanted a custom DataPoint style – and different dynamically set line colors.

When trying to change the colors on a LineSeries with a custom DataPointStyle, I ran into some problems. As in the previous post, I used a custom style called  ”DataPointStyle” (yes I know, not very inventive ) and referenced it from the code in the same way as previously:

Style dpStyle = Application.Current.Resources["DataPointStyle"] as Style;
lineSeries.DataPointStyle = dpStyle;

What I did differently this time was that I wanted to change the Background color of the style, allowing me to have different colors for the lines shown on the chart.

Style dpStyle = Application.Current.Resources["DataPointStyle"] as Style;
dpStyle.Setters.Add(new Setter(BackgroundProperty, new SolidColorBrush(Colors.Red)));
lineSeries.DataPointStyle = dpStyle;

Changing the color like in the code above did actually work, but only if there was a single LineSeries shown on the chart. As soon as the style was applied to line two the application crashed.

It seemed obvious that it was because I was adding a new setter to the style multiple times, so I tried different solutions where I checked if the setter was already set in the style – and if so then just changing the value. However try as I might, it did not want to work…

Changing the color of the lines with the default style however, was not a problem. It could be done like in the following example:

Style dpStyle = new Style(typeof(LineDataPoint));
dpStyle.Setters.Add(new Setter(BackgroundProperty, new SolidColorBrush(Colors.Red)));
lineSeries.DataPointStyle = dpStyle;

In light of the example above I was pretty confident that problem had something to do with the fact that a new instance of this style was not created for each line. Finally after too many frustrating failed attempts, I managed to find the solution – a simple one indeed, but one that I was not aware of:

Style originalStyle = Application.Current.Resources["DataPointStyle"] as Style;
var dpStyle = new Style() {BasedOn = originalStyle};
dpStyle.TargetType = typeof (LineDataPoint);
dpStyle.Setters.Add(new Setter(BackgroundProperty, new SolidColorBrush(Colors.Red)));
lineSeries.DataPointStyle = dpStyle;

It is the BasedOn property for the style that does the magic here, also you have to manually tell the style which TargeTtype it should use. But once that is done everything works like a charm – the BasedOn property is available from Silverlight 3 and up, more info can be found here.

Finally a little picture illustrating the final result with three different lines, in three different colors – and with a custom tooltip…

 Best Regards
/Peter

See larger image Silverlight 4 in Action (Paperback) By (author) Pete Brown List Price: $49.99 USD New From: $24.99 In Stock Used from: $19.75 In Stock