How to improve Canvas rendering performance? How to improve Canvas rendering performance? wpf wpf

How to improve Canvas rendering performance?


Need to use Visual objects instead of Shape; in particular, as suggested, DrawingVisual: a visual object that can be used to render vector graphics. In fact, as written in the MSDN library:

DrawingVisual is a lightweight drawing class that is used to render shapes, images, or text. This class is considered lightweight because it does not provide layout, input, focus, or event handling, which improves its performance. For this reason, drawings are ideal for backgrounds and clip art.

So, for example, to create a DrawingVisual that contains a rectangle:

private DrawingVisual CreateDrawingVisualRectangle(){   DrawingVisual drawingVisual = new DrawingVisual();   // Retrieve the DrawingContext in order to create new drawing content.   DrawingContext drawingContext = drawingVisual.RenderOpen();   // Create a rectangle and draw it in the DrawingContext.   Rect rect = new Rect(new System.Windows.Point(160, 100), new System.Windows.Size(320, 80));   drawingContext.DrawRectangle(System.Windows.Media.Brushes.LightBlue, (System.Windows.Media.Pen)null, rect);   // Persist the drawing content.   drawingContext.Close();   return drawingVisual;}

In order to use DrawingVisual objects, you need to create a host container for the objects. The host container object must derive from the FrameworkElement class, which provides the layout and event handling support that the DrawingVisual class lacks. When you create a host container object for visual objects, you need to store the visual object references in a VisualCollection.

public class MyVisualHost : FrameworkElement{   // Create a collection of child visual objects.   private VisualCollection _children;   public MyVisualHost()   {       _children = new VisualCollection(this);       _children.Add(CreateDrawingVisualRectangle());       // Add the event handler for MouseLeftButtonUp.       this.MouseLeftButtonUp += new System.Windows.Input.MouseButtonEventHandler(MyVisualHost_MouseLeftButtonUp);   }}

The event handling routine can then implement hit testing by invoking the HitTest method. The method's HitTestResultCallback parameter refers to a user-defined procedure that you can use to determine the resulting action of a hit test.


Agreed that if you want to draw millions of elements, you simply can't do it in WPF. WriteableBitmapEx as mentioned is a good alternative.

See this related question which goes into depth on high performance graphics in WPF and the alternatives available.

If you simply must use Canvas, check out this ZoomableApplication2 - A million items. This is a Canvas based demo which makes heavy use of Virtualization to get reasonable performance with 1,000,000 UIElements on a Canvas.


That's a lot of UIElements and probably isn't going to give the kind of performance you're looking for. Do you need to be able to interact with each of the elements you're rendering? If not, I would highly recommend looking into using WriteableBitmap instead. If you need to draw shapes and don't want to create all that logic yourself (who would want to?), check out the WriteableBitmapEx project over on CodePlex.