SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, and now iOS Charting & Android Chart Components

0
0

I am using the MVVM pattern.
I need the ability to create and style a variable number of line series in a chart.
In order to accomplish this I am binding the RenderableSeries to a collection in my view model.

<SciChart:SciChartSurface 
  x:Name="historicalChart"
  Grid.Row="1" 
  Grid.Column="0"
  telerik:RadDragAndDropManager.AllowDrop="True"
  RenderableSeries="{Binding HistoricalRenderableSeries, Mode=TwoWay}"
  DataSet="{Binding ChartData, Mode=TwoWay}" SciChart:ThemeManager.Theme="ExpressionLight">
</SciChart:SciChartSurface>

And then I am setting the various styles like SeriesColor and StrokeThickness in my view model.
I am now trying to color the points on each line to match the color of the line using a control template.

<ControlTemplate x:Key="ChartShowPointTemplate">
<Ellipse Height="6" Width="6">
<Ellipse.Style>
<Style TargetType="{x:Type Ellipse}">
<Setter Property="Visibility" Value="Visible"/>
<!–<Setter Property="Fill" Value="Green"/>–>
<Setter Property="Fill" Value="{Binding Path=SeriesColor, Converter={StaticResource ColorToBrushConverter}, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type SciChart:FastLineRenderableSeries}}}"/>–>
</Style>
</Ellipse.Style>
</Ellipse>
</ControlTemplate>

But I get the following error:

System.Windows.Data Error: 4 : Cannot find source for binding with reference ‘RelativeSource FindAncestor, AncestorType=’Abt.Controls.SciChart.FastLineRenderableSeries’, AncestorLevel=’1”.
BindingExpression:Path=SeriesColor; DataItem=null; target element is ‘Ellipse’ (Name=”); target property is ‘Fill’ (type ‘Brush’)

I have tried many several options to try and get this work.
If I hard code to GREEN I do see green points on my line.

Any ideas?

  • You must to post comments
0
0

Hi there,

Thanks for posting such a clear question & example! 🙂 I know why this doesn’t work. The ControlTemplate internally is rendered to a bitmap and stored on the RenderableSeries. Later it is blitted directly to the screen, i.e. the UIElement created by the ControlTemplate is never in the Visual Tree.

The only way I can think of to do this, is to create the control template in code via a helper class. See this article on creating control templates programmatically.

For instance, if you had a class, call it PointMarkerHelper, it might have a method with the following signature

public PointMarkerHelper
{
    public ControlTemplate CreateMarker(Color fill, Color? stroke, Shape shape)
    {
        // TODO
    }
}

Then you could create a point marker with minimum fuss programmatically.

Here, I’ve attached a sample to this post. Also a screenshot of the result. Take a look and let me know if it helps!

Images
  • Charith Jayasundara
    Hi Andrew,Could you please attach your PointMarkerStyling.zip attachment again? Link seems to have broken.Thanks!
  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.