This is a migrated thread and some comments may be shown as answers.

ChartView Ellipse wont resize on MouseEnter Event

3 Answers 7 Views
ChartView
This is a migrated thread and some comments may be shown as answers.
Devid
Top achievements
Rank 1
Devid asked on 03 Sep 2018, 12:35 PM

I am using ChartView Telerik WPF Library. I want the points to get bigger when the user hovers over them. But for some reason it is not working as expected. The Ellipse gets bigger but it does not resize correctly. But I don't understand why. The other properties as border color and thickness are working correctly. Can someone tell me what am I missing here ?

This is how it looks currently(Look at the gif)

Here is the source code:

private FrameworkElementFactory AddPointsToSeries(KeyValuePair<ChartSerie, List<ChartDataPoint>> chartSeries, int colorPaletteIndex)
    {
        var seriesPredefinedColor = this.ChartBase.Palette.GlobalEntries[colorPaletteIndex].Fill;
 
        FrameworkElementFactory frameworkElement = new FrameworkElementFactory(typeof(Ellipse));
        frameworkElement.SetValue(Ellipse.FillProperty, ColorService.BrushFromHex(chartSeries.Key.ColorHex) ?? seriesPredefinedColor);
        frameworkElement.SetValue(Ellipse.HeightProperty, 9.0D);
        frameworkElement.SetValue(Ellipse.WidthProperty, 9.0D);
 
 
        frameworkElement.AddHandler(Ellipse.MouseEnterEvent, new MouseEventHandler((sender, args) =>
           {
               Ellipse ellipse = (Ellipse)sender;
               ellipse.Stroke = ColorService.BrushFromHex(ColorService.BlendHex((chartSeries.Key.ColorHex ?? ColorService.BrushToHex(seriesPredefinedColor)), "#000000", 0.4));
 
               // this is not correctly applied!
               ellipse.Width = 15;
               ellipse.Height = 15;
 
               ellipse.StrokeThickness = 2;
           }));
 
        frameworkElement.AddHandler(Ellipse.MouseLeaveEvent, new MouseEventHandler((sender, args) =>
           {
               Ellipse ellipse = (Ellipse)sender;
               ellipse.Height = 8;
               ellipse.Width  = 8;
 
               ellipse.Stroke = null;
           }));
 
 
        return frameworkElement;
    }
 
    // Here I create the Line Series and here I use the AddPointsToSeries Method
    private LineSeries CreateLineSeries(KeyValuePair<ChartSerie, List<ChartDataPoint>> chartSeries, ChartLegendSettings legendSettings,
                                        int colorPaletteIndex)
    {
        FrameworkElementFactory addPoints = AddPointsToSeries(chartSeries, colorPaletteIndex);
        var lineSerie = new LineSeries()
        {
            VerticalAxis    = CreateMultipleVerticalAxis(chartSeries, colorPaletteIndex, out var multipleVerticalAxis) ? multipleVerticalAxis : null,
            ZIndex          = 150, // the line series should always be displayed on top of other series.
            StrokeThickness = 3.5,
            LegendSettings  = (SeriesLegendSettings)legendSettings,
            Opacity         = 0.8,
            StackGroupKey = chartSeries.Key.Group,
            CombineMode   = string.IsNullOrEmpty(chartSeries.Key.Group) ? ChartSeriesCombineMode.None :
            ChartSeriesCombineMode.Stack,
 
            PointTemplate = new DataTemplate()
            {
                VisualTree = addPoints,
            },
        };
 
        // this is the color of line series
        if (chartSeries.Key.ColorHex != null)
        {
            lineSerie.Stroke = (SolidColorBrush)(new BrushConverter().ConvertFrom(chartSeries.Key.ColorHex));
        }
 
        foreach (ChartDataPoint serie in chartSeries.Value)
        {
            lineSerie.DataPoints.Add(new CategoricalDataPoint()
            {
                Category = serie.XPoint.Label,
                Value    = (double?)serie.Value,
            });
        }
 
        return lineSerie;
    }

 

3 Answers, 1 is accepted

Sort by
0
Devid
Top achievements
Rank 1
answered on 06 Sep 2018, 10:00 AM
Is the question not understandable or is there no one to offer help here  ? 
0
Accepted
Martin Ivanov
Telerik team
answered on 11 Sep 2018, 08:25 AM
Hello Devid,

This behavior comes from the size caching mechanism of the chart. Basically, the control is setting the size of the visual when initially loaded and then it doesn't change it unless something on the chart's API changes. In order to achieve your requirement you can wrap the ellipse in a Grid panel and its its Width and Height properties to be the same (or little bigger) then the size of the bigger ellipse. I've prepared a small example based on this approach. I hope it helps.

Regards,
Martin Ivanov
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Devid
Top achievements
Rank 1
answered on 12 Sep 2018, 10:42 AM
Thanks very much now it is working as expected. This small change makes the whole chart look much better
Tags
ChartView
Asked by
Devid
Top achievements
Rank 1
Answers by
Devid
Top achievements
Rank 1
Martin Ivanov
Telerik team
Share this question
or