Help us improve
Share bugs, ideas, or general feedback.
From wpf-dev-pack
Delivers high-performance WPF rendering techniques including DrawingVisual, WriteableBitmap, CompositionTarget.Rendering, and BitmapCache for real-time graphics, game loops, particle systems, charts, or Shape performance issues.
npx claudepluginhub christian289/dotnet-with-claudecode --plugin wpf-dev-packHow this skill is triggered — by the user, by Claude, or both
Slash command
/wpf-dev-pack:rendering-wpf-high-performanceopusThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
| Technique | Use Case | Performance |
Implements WPF DrawingContext canvas for 10-50x faster rendering of thousands of shapes versus Shapes, bypassing layout and visual tree overhead.
Guides custom drawing in .NET MAUI using Microsoft.Maui.Graphics and GraphicsView, covering canvas operations, shapes, paths, text rendering, images, shadows, clipping, and state management with SaveState/RestoreState.
Building WPF on .NET 8+. Host builder, MVVM Toolkit, Fluent theme, performance, modern C# patterns.
Share bugs, ideas, or general feedback.
| 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 |
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:
Freeze() Brush/Pen for thread safety and performanceStreamGeometry instead of PathGeometry for read-only pathsVisualChildrenCount and GetVisualChildDirect 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:
<AllowUnsafeBlocks>true</AllowUnsafeBlocks> in .csprojAddDirtyRect for partial updatesPer-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.
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:
| 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 |
For detailed implementation patterns, see: