WPF Ellipse не будет правильно изменять размер на MouseEnter Event

Question

Я использую ChartView Telerik WPF Library. Я хочу, чтобы очки увеличивались, когда пользователь наводил курсор на них. Но по некоторым причинам это не работает, как ожидалось. Эллипс становится больше, но он не меняет размер правильно. Но я не понимаю почему. Другие свойства, такие как цвет границы и толщина, работают правильно. Может кто-нибудь сказать мне, что мне здесь не хватает?

Вот как это выглядит сейчас, когда я пытаюсь изменить размер точки:

Вот исходный код:

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;
    }

Answer 1

На мой вопрос ответил мой Мартин Иванов:

Это происходит из-за механизма кэширования размера диаграммы. По сути, элемент управления устанавливает размер визуала при первоначальной загрузке, а затем не изменяет его, если что-то в API диаграммы не изменится. Чтобы удовлетворить ваши требования, вы можете обернуть эллипс на панели «Сетка», а его свойства «Ширина» и «Высота» будут такими же (или немного большими), что и размер большего эллипса.

Это решение:

private FrameworkElementFactory AddPointsToSeries(KeyValuePair<ChartSerie, List<ChartDataPoint>> chartSeries, int colorPaletteIndex)
    {
        var   seriesPredefinedColor = this.ChartBase.Palette.GlobalEntries[colorPaletteIndex].Fill;
        Brush brush                 = chartSeries.Key.ColorHex == null ? (seriesPredefinedColor) : ColorService.HexToBrush(chartSeries.Key.ColorHex);
        Brush mouseOnEnterColor     = new SolidColorBrush(ColorService.ChangeColorLightness(ColorService.BrushToColor(brush), 0.8));

        double ellipseMouseOverStrokeThickness = 2;
        double ellipseMouseOverHeightWidth     = 13;
        double ellipseStrokeThickness          = 1;
        double ellipseHeightWidth              = 9;

        FrameworkElementFactory frameworkElement = new FrameworkElementFactory(typeof(Ellipse));
        frameworkElement.SetValue(Ellipse.FillProperty, brush);
        frameworkElement.SetValue(Ellipse.MarginProperty, new Thickness(-4.5));
        frameworkElement.SetValue(Ellipse.HeightProperty, ellipseHeightWidth);
        frameworkElement.SetValue(Ellipse.WidthProperty, ellipseHeightWidth);
        frameworkElement.SetValue(Ellipse.StrokeProperty, new SolidColorBrush(Colors.White));
        frameworkElement.SetValue(Ellipse.StrokeThicknessProperty, ellipseStrokeThickness);


        frameworkElement.AddHandler(Ellipse.MouseEnterEvent, new MouseEventHandler((sender, args) =>
                                                                                   {
                                                                                       Ellipse ellipse = (Ellipse)sender;
                                                                                       ellipse.Fill            = new SolidColorBrush(Colors.White);
                                                                                       ellipse.Stroke          = mouseOnEnterColor;
                                                                                       ellipse.StrokeThickness = ellipseMouseOverStrokeThickness;
                                                                                       ellipse.Width           = ellipseMouseOverHeightWidth;
                                                                                       ellipse.Height          = ellipseMouseOverHeightWidth;
                                                                                   }));

        frameworkElement.AddHandler(Ellipse.MouseLeaveEvent, new MouseEventHandler((sender, args) =>
                                                                                   {
                                                                                       Ellipse ellipse = (Ellipse)sender;
                                                                                       ellipse.Stroke          = new SolidColorBrush(Colors.White);
                                                                                       ellipse.Fill            = brush;
                                                                                       ellipse.StrokeThickness = ellipseStrokeThickness;
                                                                                       ellipse.Height          = ellipseHeightWidth;
                                                                                       ellipse.Width           = ellipseHeightWidth;
                                                                                   }));

        FrameworkElementFactory stackPanelFactory = new FrameworkElementFactory(typeof(Grid));
        stackPanelFactory.SetValue(Grid.HeightProperty, ellipseMouseOverHeightWidth + ellipseMouseOverStrokeThickness);
        stackPanelFactory.SetValue(Grid.WidthProperty, ellipseMouseOverHeightWidth  + ellipseMouseOverStrokeThickness);
        stackPanelFactory.AppendChild(frameworkElement);

        return stackPanelFactory;
    }

Теперь это выглядит так: