SelectedSeriesModifier on MouseHover StrokeThickness binding

SelectedSeriesModifier gets applied only on click (i guess that sets the isselcted). I found the ExecutesOn property that work on MouseMove.

However, I am unable to bind the strokethickness (I cannot use static/hardcoded values as strokethickness is decided by the user and I need to increase it by 1 when user hovers over the series).

Binding evaluation throws following error and crashes – WPF ‘System.Windows.Data.Binding’ is not a valid value for property ‘StrokeThickness’

                        <s:SeriesSelectionModifier ExecuteOn="MouseMove">
                            <s:SeriesSelectionModifier.SelectedSeriesStyle>
                                <Style TargetType="s:BaseRenderableSeries">
                                    <Setter Property="StrokeThickness" Value="{Binding Path=StrokeThickness, diag:PresentationTraceSources.TraceLevel=High}"/>
                                </Style>
                            </s:SeriesSelectionModifier.SelectedSeriesStyle>
                        </s:SeriesSelectionModifier>

Version

6.5

WPF SelectedSeriesModifier StrokeThickness Binding

Kapil Sinha asked 2 years ago
last edited 2 years ago

- Andrew Burnett-Thompson
- 2 years ago
- 1
This should be possible via a custom modifier, am talking to the team about it now. Just a question: how do you expect to deselect? When un-hovered? What is the use-case for this functionality?
- Kapil Sinha
- 2 years ago
- 1
i need to increase the StrokeThickness on hover so that the user can easily understand which series is highlighted. I will deselect on hover. I need this behavior as it was there before we switched to scichart.

You must login to post comments

Answers (2)

Hi Kapil,

At a basic level this can be achieved using the ChartModifier API.

We have a documentation page here describing how to make custom chartmodifiers
We have a sandbox application here showing various examples of custom chart modifier
Link to HitTest API documentation here

I’ve created you a new example which sets Series.IsSelected on hover rather than on click. This is only a few lines of code.

public class HoverSelectionModifier : ChartModifierBase
{
    public override void OnModifierMouseMove(ModifierMouseArgs e)
    {
        // Translate mouse point to modifier surface (required for left/top axis scenarios)
        var mousePoint = GetPointRelativeTo(e.MousePoint, ModifierSurface);

        // Call Series.HitTestProvider.HitTest to find which series is under the mouse point 
        var selectedSeries = this.ParentSurface.RenderableSeries.FirstOrDefault(x => x.HitTestProvider.HitTest(e.MousePoint).IsHit);

        // Apply the selection
        DeselectAllBut(selectedSeries);
    }

    private void DeselectAllBut(IRenderableSeries series)
    {
        DeselectAll();
        if (series != null)
        {
            series.IsSelected = true;
        }
    }

    private void DeselectAll()
    {
        ParentSurface.RenderableSeries.ForEachDo(rs => rs.IsSelected = false);
    }
}

Apply it like this:

<s:SciChartSurface ShowLicensingWarnings="False">
    <s:SciChartSurface.RenderableSeries>
        <s:FastLineRenderableSeries x:Name="line0" Stroke="LightSteelBlue" StrokeThickness="2" SelectedSeriesStyle="{StaticResource SelectedSeriesStyle}"/>
        <s:FastLineRenderableSeries x:Name="line1" Stroke="OrangeRed" StrokeThickness="2" SelectedSeriesStyle="{StaticResource SelectedSeriesStyle}"/>
        <s:FastLineRenderableSeries x:Name="line2" Stroke="MediumPurple" StrokeThickness="2" SelectedSeriesStyle="{StaticResource SelectedSeriesStyle}"/>
    </s:SciChartSurface.RenderableSeries>
    <s:SciChartSurface.XAxis>
        <s:NumericAxis GrowBy="0.1, 0.1"/>
    </s:SciChartSurface.XAxis>
    <s:SciChartSurface.YAxis>
        <s:NumericAxis GrowBy="0.1, 0.1"/>
    </s:SciChartSurface.YAxis>
    <s:SciChartSurface.ChartModifier>
        <local:HoverSelectionModifier/>
    </s:SciChartSurface.ChartModifier>

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();

        line0.DataSeries = GetData(1);
        line1.DataSeries = GetData(2);
        line2.DataSeries = GetData(3);

        line0.SelectionChanged += (s, e) => Console.WriteLine($"Series 0 IsSelected=${line0.IsSelected}");
        line1.SelectionChanged += (s, e) => Console.WriteLine($"Series 0 IsSelected=${line1.IsSelected}");
        line2.SelectionChanged += (s, e) => Console.WriteLine($"Series 0 IsSelected=${line2.IsSelected}");
    }

    private IDataSeries GetData(int index)
    {
        var xyDataSeries = new XyDataSeries<double>();
        for (int i = 0; i < 100; i++)
        {
            xyDataSeries.Append(i, Math.Sin(i * 0.05 * index) + Math.Cos(i * 0.01 * index + 0.05));
        }

        return xyDataSeries;
    }
}

This results in the following output

enter image description here

You can find a link to SeriesSelectOnHover project on Github here.

Best regards
Andrew

Andrew Burnett-Thompson answered 2 years ago

You must login to post comments

Sorry @Andrew
I modified the question after posting it and it has caused some confusion.

I was able to use SelectedSeriesModifier with ExecutesOn property (set to MouseMove) – I dont need to create another modifier.

My problem right now is the crash resulting from binding for strokethickness as I cant use hardcoded value for it during onHover.

The exception that I am getting is –
‘System.Windows.Data.Binding’ is not a valid value for property ‘StrokeThickness’

Let me know if you have any ideas about it.

Kapil Sinha answered 2 years ago

- Andrew Burnett-Thompson
- 2 years ago
- 1
I suggest opening a new question with code to reproduce the bug (please upload code to dropbox or as a zip. Exclude license files, bin/obj directories and anything proprietary from code you upload). Alternatively try my solution which works very well.