I use a WPF Toolkit chart to display several line series with data points. I have created styles for the LineDataPoints that use a canvas on which symbols (like a circle) are drawn.
Here's one of the style definitions:
<Style x:Key="CircleDataPointStyleRed"
TargetType="chartingToolkit:LineDataPoint">
<Setter Property="Background"
Value="Red" />
<Setter Property="IsTabStop"
Value="False" />
<Setter Property="Width"
Value="10" />
<Setter Property="Height"
Value="10" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="chartingToolkit:LineDataPoint">
<Canvas>
<Ellipse Height="10"
Width="10"
Stroke="Red" />
</Canvas>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
When I load data into the view model, the chart is displayed correctly, the lines are visible and the data points drawn centered to the correct position so the center point of the circle lies where the actual data point is. Now when I load a different set of data into the chart (change the ObservableCollections the LineSeries are bound to), the lines are still drawn correctly but the circles are not drawn centered any more but with the upper left corner of their canvas lying on the location of the actual data point. When I resize the chart, the positions of the circles gets correct again.
Here's some screen shots to clarify:
After first data is loaded:
After data has changed to different values:
After the chart has been resized:
What I have tried so far (each to no avail):
- Set HorizontalAlignment and VerticalAlignment on the Canvases in the Templates
- Tried to call UpdateLayout() as well as all the InvalidateXxx methods on the control
How can I achieve the data points to be drawn at the correct positions even after changing the data?
