Back to list
christian289

rendering-wpf-high-performance

by christian289

ClaudeCode와 함께하는 .NET 개발 튜토리얼

1🍴 0📅 Jan 25, 2026

SKILL.md


name: rendering-wpf-high-performance description: 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.

High-Performance WPF Rendering

Quick Reference

TechniqueUse CasePerformance
DrawingVisual1K-100K shapes10-50x faster than Shape
WriteableBitmapPixel manipulation, heatmapsFastest for raw pixels
CompositionTarget.RenderingGame loops, real-time animation~60 FPS frame callback
BitmapCacheComplex static visualsGPU 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

Method10K PointsUse Case
Shape (Ellipse)~500ms<100 elements
DrawingVisual~20ms1K-100K shapes
WriteableBitmap (managed)~5msPixel grids
WriteableBitmap (unsafe)~1msReal-time heatmaps

For detailed implementation patterns, see:

Score

Total Score

65/100

Based on repository quality metrics

SKILL.md

SKILL.mdファイルが含まれている

+20
LICENSE

ライセンスが設定されている

+10
説明文

100文字以上の説明がある

0/10
人気

GitHub Stars 100以上

0/15
最近の活動

1ヶ月以内に更新

+10
フォーク

10回以上フォークされている

0/5
Issue管理

オープンIssueが50未満

+5
言語

プログラミング言語が設定されている

+5
タグ

1つ以上のタグが設定されている

+5

Reviews

💬

Reviews coming soon