DataTemplate for RolloverModifier on SciChart when RenderableSeries is bound to MVVM

Question

I am trying to customise the appearance of the RolloverModifier tooltips that appear on a SciChart Line Chart, using a DataTemplate (combined with the TooltipTemplate attribute of the RolloverModifier, but can't figure it out.

Here is my DataTemplate which I've made as simple as possible just to get it working.

<DataTemplate x:Key="ChartToolTipTemplate" DataType="{x:Type s:SeriesInfo}">
   <TextBlock Text="Hello" />
</DataTemplate>

What I've tried so far:

First:

<s:RolloverModifier x:Name="RolloverModifier" TooltipTemplate="{StaticResource ChartToolTipTemplate}">

but I get the error:

Unable to cast object of type 'SciChart.Charting.ChartModifiers.RolloverModifier' to type 'SciChart.Charting.Visuals.RenderableSeries.BaseRenderableSeries'.

From research online, it appears what I should be doing is:

<s:SciChartSurface.RenderableSeries>
    <s:FastLineRenderableSeries  s:TooltipModifier.TooltipTemplate="{StaticResource TooltipTemplate}" 
                                s:TooltipModifier.IncludeSeries="True"
                                s:SeriesValueModifier.IncludeSeries="False"/>
</s:SciChartSurface.RenderableSeries>

However, this is no good to me as my RenderableSeries is bound to an ObservableCollection<IRenderableSeries> in my ViewModel.

<s:SciChartSurface
    x:Name="SciChart"
    Grid.Column="0"
    Annotations="{Binding Annotations}"
    GridLinesPanelStyle="{StaticResource GridLinesPanelStyle}"
    RenderableSeries="{Binding ChartSeries}"
    Style="{StaticResource SurfaceStyle}">

A suggestion on a similar question to this was to use ObservableCollection<IRenderableSeriesViewModel> and set the style in the ViewModel as per this page in the documentation: Bind Tooltip Templates or Attached Properties in MVVM, but I couldn't figure out how to convert my IRenderableSeries to a LineRenderableSeriesViewModel and ended up with a blank chart.

Another suggestion in this similar question (SciChart: Custom RolloverModifierLabel for multiple DataSeries bound from code was to use an Implicit Style, so I added

    <s:SciChartSurface.Resources>
        <Style TargetType="s:BaseRenderableSeries">
            <Setter Property="s:RolloverModifier.TooltipTemplate" Value="{StaticResource ChartToolTipTemplate}" />
            <Setter Property="s:RolloverModifier.IncludeSeries" Value="True" />
            <Setter Property="s:RolloverModifier.IsEnabled" Value="True" />
            <Setter Property="FontSize" Value="30" />
        </Style>
    </s:SciChartSurface.Resources>

And kept the

    <s:SciChartSurface.ChartModifier>
        <s:ModifierGroup>
            <s:LegendModifier
                x:Name="LegendModifier"
                Margin="10"
                HorizontalAlignment="Right"
                LegendTemplate="{StaticResource LegendTemplate}"
                Orientation="Horizontal"
                ShowLegend="{Binding ShowLegend}"
                ShowVisibilityCheckboxes="False" />
                <s:RolloverModifier x:Name="RolloverModifier" />
            <s:SeriesSelectionModifier>
                <s:SeriesSelectionModifier.SelectedSeriesStyle>
                    <Style TargetType="s:BaseRenderableSeries">
                        <Setter Property="Stroke" Value="DeepPink" />
                        <Setter Property="StrokeThickness" Value="3" />
                    </Style>
                </s:SeriesSelectionModifier.SelectedSeriesStyle>
            </s:SeriesSelectionModifier>
        </s:ModifierGroup>
    </s:SciChartSurface.ChartModifier>

But the style has no effect at all on the tooltips (even the FontSize bit which I just put in to check if it was even working). Removing that line removes the tooltips completely.

Please provide a Minimal, Complete, and Verifiable example of your issue if you want any help: https://stackoverflow.com/help/mcve — mm8, Apr 21 '17 at 09:51
A LineRenderableSeriesViewModel is an IRenderableSeriesViewModel so you should simply bind to an ObservableCollection instead of an ObservableCollection. — mm8, Apr 21 '17 at 09:52
@mm8 yes if the OP is using the SeriesBinding Markup extension. Judging by the code sample he isn't. — Dr. Andrew Burnett-Thompson, Apr 24 '17 at 14:51

score 1 · Answer 1 · answered Apr 24 '17 at 15:07

I've done a bit of digging for you since this question gets asked a lot.

Basically the problem is that in the SciChart WPF library, BaseRenderableSeries and FastLineRenderableSeries already have a default style (a style without an x:key), so to override it implicitly, you have to set the type equal to the series type. Overridding the base doesn't work.

The following code does work. Placed in Window.Resources it applies a red stroke and stroke thickness of 5 to all FastLineRenderableSeries in the SciChartSurface:

<Window x:Class="WpfApplication3.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:s="http://schemas.abtsoftware.co.uk/scichart"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <Style TargetType="{x:Type FastLineRenderableSeries}">
            <Setter Property="Stroke" Value="#FF3333"/>
            <Setter Property="StrokeThickness" Value="5"/>
        </Style>    
    </Window.Resources>
    <Grid>
        <s:SciChartSurface>
            <s:SciChartSurface.RenderableSeries>
                <s:FastLineRenderableSeries x:Name="lineSeries"/>
            </s:SciChartSurface.RenderableSeries>

            <s:SciChartSurface.XAxis>
                <s:NumericAxis/>
            </s:SciChartSurface.XAxis>

            <s:SciChartSurface.YAxis>
                <s:NumericAxis/>
            </s:SciChartSurface.YAxis>
        </s:SciChartSurface>
    </Grid>
</Window>

You will need to add a style for all Series Types you wish to set a default tooltip for and this style will be applied to them all.

score 1 · Answer 2 · answered Apr 24 '17 at 15:47

I eventually got the MVVM method to work. As per mm8's comment I was already binding to ObservableCollection<IRenderableSeriesViewModel> however I was trying to copy my ObservableCollection<IRenderableSeries> to it so I changed it to just build the former from scratch.

return new LineRenderableSeriesViewModel()
       {
           DataSeries = dataSeries,
           Stroke = stroke,
           StrokeThickness = 2,
           StyleKey = "ChartTooltipStyle",
           AntiAliasing = true
       };

Then in the XAML...

(Partial thanks to SciChart, this page: WPF Chart Custom Tooltip Template Example)

<UserControl.Resources>

<!-- etc. etc. -->

    <DropShadowEffect x:Key="DropShadowEffect" BlurRadius="5" Direction="-45" ShadowDepth="6" Color="{StaticResource MyBlack}"></DropShadowEffect>

    <DataTemplate x:Key="ChartToolTipTemplate" DataType="{x:Type s:SeriesInfo}">

        <Border Padding="4, 2, 4, 1" 
                Margin="4, 0, 0, 2" 
                BorderThickness="0" 
                CornerRadius="0"
                Effect="{StaticResource DropShadowEffect}">

            <Border.Background>
                <SolidColorBrush Color="{Binding Stroke}" />
            </Border.Background>
            <TextBlock>
                <TextBlock.Text>
                    <MultiBinding StringFormat="{}{0}: {1:0.00}">
                        <Binding Path="SeriesName" />
                        <Binding Path="Value" />
                    </MultiBinding>
                </TextBlock.Text>
            </TextBlock>
        </Border>
    </DataTemplate>

    <Style x:Key="ChartToolTipContainerStyle" TargetType="s:TooltipControl">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="s:TooltipControl">
                    <ContentPresenter Content="{TemplateBinding DataContext}" ContentTemplate="{TemplateBinding ContentTemplate}" />
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style TargetType="s:FastLineRenderableSeries" x:Key="ChartTooltipStyle">
        <Setter Property="s:RolloverModifier.TooltipTemplate" Value="{StaticResource ChartToolTipTemplate}" />
        <Setter Property="s:RolloverModifier.TooltipContainerStyle" Value="{StaticResource ChartToolTipContainerStyle}" />
        <Setter Property="s:RolloverModifier.IncludeSeries" Value="True" />
        <Setter Property="s:SeriesValueModifier.IncludeSeries" Value="False" />
    </Style>

</UserControl.Resources>

its that StyleKey bit thats the key. Didn't spot that anywhere in the documentation — Tim Rutter, Dec 12 '19 at 10:09

DataTemplate for RolloverModifier on SciChart when RenderableSeries is bound to MVVM

2 Answers2