High-Performance WPF Rendering

Quick Reference

Technique Use Case Performance

DrawingVisual 1K-100K shapes 10-50x faster than Shape

WriteableBitmap Pixel manipulation, heatmaps Fastest for raw pixels

CompositionTarget.Rendering Game loops, real-time animation ~60 FPS frame callback

BitmapCache Complex static visuals GPU texture caching

1. DrawingVisual Pattern

Lightweight visual for high-volume rendering without layout overhead.

public class ChartVisual : FrameworkElement { private readonly VisualCollection _visuals;

public ChartVisual() => _visuals = new VisualCollection(this);

public void Render(IEnumerable<Point> points)
{
    _visuals.Clear();
    var visual = new DrawingVisual();

    using (var dc = visual.RenderOpen())
    {
        var pen = new Pen(Brushes.Blue, 1);
        pen.Freeze();

        var prev = points.First();
        foreach (var pt in points.Skip(1))
        {
            dc.DrawLine(pen, prev, pt);
            prev = pt;
        }
    }

    _visuals.Add(visual);
}

protected override int VisualChildrenCount => _visuals.Count;
protected override Visual GetVisualChild(int index) => _visuals[index];

}

Key Points:

• Always Freeze() Brush/Pen for thread safety and performance

• Use StreamGeometry instead of PathGeometry for read-only paths

• Override VisualChildrenCount and GetVisualChild

2. WriteableBitmap Pattern

Direct pixel manipulation for maximum performance.

public class PixelCanvas : Image { private WriteableBitmap _bitmap;

public void Initialize(int width, int height)
{
    _bitmap = new WriteableBitmap(width, height, 96, 96, PixelFormats.Bgra32, null);
    Source = _bitmap;
}

public unsafe void DrawPixel(int x, int y, Color color)
{
    _bitmap.Lock();
    try
    {
        var ptr = (byte*)_bitmap.BackBuffer;
        int stride = _bitmap.BackBufferStride;
        int offset = y * stride + x * 4;

        ptr[offset + 0] = color.B;
        ptr[offset + 1] = color.G;
        ptr[offset + 2] = color.R;
        ptr[offset + 3] = color.A;

        _bitmap.AddDirtyRect(new Int32Rect(x, y, 1, 1));
    }
    finally { _bitmap.Unlock(); }
}

}

Key Points:

• Enable <AllowUnsafeBlocks>true</AllowUnsafeBlocks> in .csproj

• Use AddDirtyRect for partial updates

• BGRA32 format: Blue, Green, Red, Alpha order

3. CompositionTarget.Rendering

Per-frame callback for game loops and real-time updates.

public class GameLoop { private TimeSpan _lastRender;

public void Start()
{
    CompositionTarget.Rendering += OnRendering;
}

public void Stop()
{
    CompositionTarget.Rendering -= OnRendering;
}

private void OnRendering(object sender, EventArgs e)
{
    var args = (RenderingEventArgs)e;

    // Skip duplicate frames
    if (args.RenderingTime == _lastRender) return;

    var deltaTime = (args.RenderingTime - _lastRender).TotalSeconds;
    _lastRender = args.RenderingTime;

    Update(deltaTime);
    Render();
}

private void Update(double dt) { /* Physics, AI */ }
private void Render() { /* Drawing */ }

}

Critical: Always unsubscribe in Unloaded event to prevent memory leaks.

4. BitmapCache

GPU-cached rendering for complex but static visuals.

<Border> <Border.CacheMode> <BitmapCache RenderAtScale="1" EnableClearType="False"/> </Border.CacheMode> <!-- Complex content here --> </Border>

element.CacheMode = new BitmapCache { RenderAtScale = 1.0 };

When to Use:

• ✅ Transform animations (rotate, scale, translate)

• ✅ Complex PathGeometry, DrawingVisual

• ❌ Frequently changing content

• ❌ Simple shapes (Rectangle, Ellipse)

Performance Comparison

Method 10K Points Use Case

Shape (Ellipse) ~500ms <100 elements

DrawingVisual ~20ms 1K-100K shapes

WriteableBitmap (managed) ~5ms Pixel grids

WriteableBitmap (unsafe) ~1ms Real-time heatmaps

Related References

For detailed implementation patterns, see:

• reference/drawingvisual-advanced.md - Hit testing, transforms

• reference/writeablebitmap-algorithms.md - Bresenham, flood fill

• reference/compositiontarget-examples.md - Particle systems

• reference/bitmapcache-optimization.md - Memory management