Provides high-performance WPF rendering techniques including DrawingVisual, WriteableBitmap, CompositionTarget.Rendering, and BitmapCache. Use when implementing real-time graphics, game loops, particle systems, charts, or when Shape controls cause performance issues.
View on GitHubchristian289/dotnet-with-claudecode
wpf-dev-pack
wpf-dev-pack/skills/rendering-wpf-high-performance/SKILL.md
January 23, 2026
Select agents to install to:
npx add-skill https://github.com/christian289/dotnet-with-claudecode/blob/main/wpf-dev-pack/skills/rendering-wpf-high-performance/SKILL.md -a claude-code --skill rendering-wpf-high-performanceInstallation paths:
.claude/skills/rendering-wpf-high-performance/# 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.
```csharp
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.
```csharp
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
{