Question

I am using a custom style in a resource dictionary for the LineDataPoint available with the toolkit.

I want the datapoint to increase in size on the mouseover event and the revert back to its original size once the mouse leaves. What’s the best way to implement this?

Answer 1

I haven’t found a better solution then using an extended class with necessary functionality:

public class ExtendedLineSeries : LineSeries
{
    //I assume that all points have the same size
    private double _originalDataPointWidth;
    private double _originalDataPointHeight;

    protected override DataPoint CreateDataPoint()
    {
        var dp = base.CreateDataPoint();

        if (this.IncreaseDataPointSizeTo != null)
        {
            dp.MouseEnter += new MouseEventHandler(OnDataPointMouseEnter);
            dp.MouseLeave += new MouseEventHandler(OnDataPointMouseLeave);
        }

        return dp;
    }
    /// <summary>
    /// The width and height to which the point is increased in size
    /// </summary>
    public double? IncreaseDataPointSizeTo { get; set; }

    void OnDataPointMouseLeave(object sender, MouseEventArgs e)
    {
        var dp = sender as DataPoint;
        if (dp != null)
        {
            //return to the original size
            dp.Width = _originalDataPointWidth;
            dp.Height = _originalDataPointHeight;
            dp.UpdateLayout();
            base.UpdateDataPoint(dp);
        }
    }

    void OnDataPointMouseEnter(object sender, MouseEventArgs e)
    {
        var dp = sender as DataPoint;
        if (dp != null)
        {
            //remember the original size and enlarge the data point
            _originalDataPointWidth = dp.ActualWidth;
            _originalDataPointHeight = dp.ActualHeight;
            dp.Width = dp.Height = IncreaseDataPointSizeTo.Value;
            dp.UpdateLayout();
            base.UpdateDataPoint(dp);
        }
    }
}

This class can be used everywhere where you use the common LineSeries class. It has the additional property IncreaseDataPointSizeTo which contains the final size in width and height of the hovered datapoint.

Example of xaml code:

<charting:Chart>
    <charting:Chart.Series>
        <ext:ExtendedLineSeries IsSelectionEnabled="True"
                                IncreaseDataPointSizeTo="16" ...