Terrible performance of custom-drawn control

Question

I am making simple graph control in wpf. And I can\'t explain nor fix performance problem: it\'s too slow compared to winforms. Perhaps I am doing something wro

Answer 1

This a kind of task WPF is not very good at. I mean vector graphics in general. Thanks to the retained mode. It's good for controls rendering, but not for the busy graphs which you update a lot. I struggled with the same problem trying to render GPS tracks on a WPF map.

I'd suggest using direct2d and hosting it in WPF. Something like that: http://www.codeproject.com/Articles/113991/Using-Direct-D-with-WPF

That will give you high performance.

PS Don't get me wrong. There is nothing bad with WPF. It is designed to solve specific problems. It's very easy to compose controls and build impressive UIs. We take a lot for granted from the automatic layout system. But it cannot be clever in every situation possible and Microsoft didn't do a great job explaining the situations, where it's not a good option. Let me give you an example. IPad is performant because it has the fixed resolution and an absolute layout. If you fix the WPF window size and use canvas panel you'll get the same experience.

Answer 2

It's strange and nobody here mentioned, but it is possible to use gdi draw in wpf natively (without hosting container).

I found this question first, which become normal render-based graph (use InvalidateVisuals() to redraw).

protected override void OnRender(DrawingContext context)
{
    using (var bitmap = new GDI.Bitmap((int)RenderSize.Width, (int)RenderSize.Height))
    {
        using (var graphics = GDI.Graphics.FromImage(bitmap))
        {
            // use gdi functions here, to ex.: graphics.DrawLine(...)
        }
        var hbitmap = bitmap.GetHbitmap();
        var size = bitmap.Width * bitmap.Height * 4;
        GC.AddMemoryPressure(size);
        var image = Imaging.CreateBitmapSourceFromHBitmap(hbitmap, IntPtr.Zero, Int32Rect.Empty, BitmapSizeOptions.FromEmptyOptions());
        image.Freeze();
        context.DrawImage(image, new Rect(RenderSize));
        DeleteObject(hbitmap);
        GC.RemoveMemoryPressure(size);
    }
}

This approach is capable to draw hundred thousands of lines. Very responsive.

Drawbacks:

• not as smooth, as pure gdi one graph, DrawImage occurs some times after, will flickers a bit.
• necessary to convert all wpf objects to gdi ones (sometimes is impossible): pens, brushes, points, rectangles, etc.
• no animations, graph itself can be animated (to example, transformed), but drawings are not.

Answer 3

here is a rewrite of your code using StreamGeometry this can give you a 5%-10% boost

    protected override void OnRender(DrawingContext context)
    {
        // designer bugfix
        if (DesignerProperties.GetIsInDesignMode(this))
            return;

        Stopwatch watch = new Stopwatch();
        watch.Start();

        // generate some big figure (try to vary that 2000!)
        var radius = 1.0;
        StreamGeometry geometry = new StreamGeometry();

        using (StreamGeometryContext ctx = geometry.Open())
        {
            Point start = new Point(radius * Math.Sin(0) + _offset.X, radius * Math.Cos(0) + _offset.Y);
            ctx.BeginFigure(start, false, false); 
            for (int i = 1; i < 2000; i++, radius += 0.1)
            {
                Point current = new Point(radius * Math.Sin(i) + _offset.X, radius * Math.Cos(i) + _offset.Y);
                ctx.LineTo(current, true, false);
            }
        }
        //var geometry = new PathGeometry(new[] { new PathFigure(figures[0].Point, figures, false) });
        geometry.Freeze();
        Pen pen = new Pen(Brushes.Black, 5);
        pen.Freeze();
        context.DrawGeometry(null, pen, geometry);

        // measure time
        var time = watch.ElapsedMilliseconds;
        Dispatcher.InvokeAsync(() =>
        {
            Window.GetWindow(this).Title = string.Format("{0:000}ms; {1:000}ms", time, watch.ElapsedMilliseconds);
        }, DispatcherPriority.Loaded);
    }

---

EDIT 2

here is a full rewrite of your class, this implements caching to avoid redraws and translate transform to perform the movements via mouse instead of redrawing again. also used UIElement as base for the element which is bit light weight then FrameworkElement

public class Graph : UIElement
{
    TranslateTransform _transform = new TranslateTransform() { X = 500, Y = 500 };
    public Graph()
    {
        CacheMode = new BitmapCache(1.4); //decrease this number to improve performance on the cost of quality, increasing improves quality 
        this.RenderTransform = _transform;
        IsHitTestVisible = false;
    }

    protected override void OnVisualParentChanged(DependencyObject oldParent)
    {
        base.OnVisualParentChanged(oldParent);

        if (VisualParent != null)
            (VisualParent as FrameworkElement).MouseMove += (s, a) => OnMouseMoveHandler(a);
    }

    protected override void OnRender(DrawingContext context)
    {
        // designer bugfix
        if (DesignerProperties.GetIsInDesignMode(this))
            return;

        Stopwatch watch = new Stopwatch();
        watch.Start();

        // generate some big figure (try to vary that 2000!)
        var radius = 1.0;
        StreamGeometry geometry = new StreamGeometry();

        using (StreamGeometryContext ctx = geometry.Open())
        {
            Point start = new Point(radius * Math.Sin(0), radius * Math.Cos(0));
            ctx.BeginFigure(start, false, false);
            for (int i = 1; i < 5000; i++, radius += 0.1)
            {
                Point current = new Point(radius * Math.Sin(i), radius * Math.Cos(i));
                ctx.LineTo(current, true, false);
            }
        }
        //var geometry = new PathGeometry(new[] { new PathFigure(figures[0].Point, figures, false) });
        geometry.Freeze();
        Pen pen = new Pen(Brushes.Black, 5);
        pen.Freeze();
        context.DrawGeometry(null, pen, geometry);

        // measure time
        var time = watch.ElapsedMilliseconds;
        Dispatcher.InvokeAsync(() =>
        {
            Application.Current.MainWindow.Title = string.Format("{0:000}ms; {1:000}ms", time, watch.ElapsedMilliseconds);
        }, DispatcherPriority.Loaded);
    }

    protected void OnMouseMoveHandler(MouseEventArgs e)
    {
        var mouse = e.GetPosition(VisualParent as FrameworkElement);
        if (e.LeftButton == MouseButtonState.Pressed)
        {
            _transform.X = mouse.X;
            _transform.Y = mouse.Y;
        }
    }
}

in example above I used 5000 to test and I can say that it is quite smooth.

As this enable fluid movements via mouse but actual render may take a bit longer to create the cache(first time only). I can say 1000% boost in moving object via mouse, render remain quite close to my previous approach with little overhead of caching. try this out and share what you feel

---

EDIT 3

here is a sample using DrawingVisual the lightest approach available in WPF

public class Graph : UIElement
{
    DrawingVisual drawing;
    VisualCollection _visuals;
    TranslateTransform _transform = new TranslateTransform() { X = 200, Y = 200 };
    public Graph()
    {
        _visuals = new VisualCollection(this);

        drawing = new DrawingVisual();
        drawing.Transform = _transform;
        drawing.CacheMode = new BitmapCache(1);
        _visuals.Add(drawing);
        Render();
    }

    protected void Render()
    {

        // designer bugfix
        if (DesignerProperties.GetIsInDesignMode(this))
            return;
        Stopwatch watch = new Stopwatch();
        watch.Start();

        using (DrawingContext context = drawing.RenderOpen())
        {

            // generate some big figure (try to vary that 2000!)
            var radius = 1.0;
            StreamGeometry geometry = new StreamGeometry();

            using (StreamGeometryContext ctx = geometry.Open())
            {
                Point start = new Point(radius * Math.Sin(0), radius * Math.Cos(0));
                ctx.BeginFigure(start, false, false);
                for (int i = 1; i < 2000; i++, radius += 0.1)
                {
                    Point current = new Point(radius * Math.Sin(i), radius * Math.Cos(i));
                    ctx.LineTo(current, true, false);
                }
            }
            geometry.Freeze();
            Pen pen = new Pen(Brushes.Black, 1);
            pen.Freeze();
            // measure time
            var time = watch.ElapsedMilliseconds;
            context.DrawGeometry(null, pen, geometry);

            Dispatcher.InvokeAsync(() =>
            {
                Application.Current.MainWindow.Title = string.Format("{0:000}ms; {1:000}ms", time, watch.ElapsedMilliseconds);
            }, DispatcherPriority.Normal);
        }

    }
    protected override Visual GetVisualChild(int index)
    {
        return drawing;
    }

    protected override int VisualChildrenCount
    {
        get
        {
            return 1;
        }
    }

    protected override void OnMouseMove(MouseEventArgs e)
    {
        if (e.LeftButton == MouseButtonState.Pressed)
        {
            var mouse = e.GetPosition(VisualParent as FrameworkElement);

            _transform.X = mouse.X;
            _transform.Y = mouse.Y;
        }
        base.OnMouseMove(e);
    }
}