How to combine multiple System.Windows.Media.DrawingVisual object into one image in WPF?

Question

I have multiple functions which are returning System.Windows.Media.DrawingVisual object. I need to combine all the DrawingVisual object into one image.

private System.Windows.Media.DrawingVisual Shape1()
{
    DrawingVisual dv = new DrawingVisual();
    using (DrawingContext dc = dv.RenderOpen())
    {
        ////--- draw shapes on 'dc'
    }
    return dv;
}

private System.Windows.Media.DrawingVisual Shape2()
{
    DrawingVisual dv = new DrawingVisual();
    using (DrawingContext dc = dv.RenderOpen())
    {
        ////--- draw shapes on 'dc'
    }
    return dv;
}

In my function I need to combine the returned objects like the following

private void Combine()
{
    System.Windows.Media.DrawingVisual s1 = Shape1();
    System.Windows.Media.DrawingVisual s2 = Shape2();

    //--- here i need to draw the s1 & s2 into an image and display on screen.
}

One more way is, save all the DrawingVisuals into separate BitmapSource object then create one more DrawingVisual and draw all bitmap images on them. But its very complicated way. Is there any better way of doing this?

Does you absolutely have to use `DrawingVisual`? A better way might be to have your methods return `GeometryDrawing` objects (or even just objects derived from `Geometry`). `GeometryDrawing` objects can be combined using a `DrawingGroup`, which can then be set as the `Drawing` property of a `DrawingBrush`, which in turn can be used in the same way as other WPF brushes. — Steven Rands, Dec 23 '15 at 14:45
Add them to the `Children` collection of a ContainerVisual (or another DrawingVisual). If you need a bitmap, use a RenderTargetBitmap to render the ContainerVisual. Otherwise create a Visual host control that renders the ContainerVisual on screen. — Clemens, Dec 23 '15 at 14:59
What is your end goal? One Visual that contains the entirety of the shapes? Specifically a bitmap that has those shapes rendered? or is placing those visuals in a Canvas good enough for your purposes (displayed on screen as separate objects but looks like one)? — Berin Loritsch, Dec 23 '15 at 15:47

score 0 · Answer 1 · edited Mar 20 '17 at 15:46

Refactor (extract method) the

draw shapes on 'dc'

part of your shape returning methods into Action<DrawingContext>.

Then use a sole DrawingContext to call all those actions upon, like below. Produce an ImageSource to assign to your Image control.

public static BitmapSource CreateBitmap(int width, int height, double dpi,
    IEnumerable<Action<DrawingContext>> renderActions)
{
    DrawingVisual drawingVisual = new DrawingVisual();

    using (DrawingContext drawingContext = drawingVisual.RenderOpen())
    {
        foreach (var render in renderActions)
            render(drawingContext);
    }

    RenderTargetBitmap bitmap = new RenderTargetBitmap(
        width, height, dpi, dpi, PixelFormats.Default);

    bitmap.Render(drawingVisual);

    return bitmap;
}

How to combine multiple System.Windows.Media.DrawingVisual object into one image in WPF?

1 Answers1