Exporting XAML as bitmap

[mjracca]

We would like to transform a XAML view to a .png or .jpg file.

The issue that we are facing is that, using RenderTargetBitmap we are limited of a max size of 4096px x 4096px, when we need to export a ScrollView of size 10000px x 6000px, like reported here.

How can we acomplish this?

[robmikh]

Currently this is the only supported way, and the limitation comes from a limitation of texture sizes for any given video hardware which you can read about here. Your best bet may be to somehow break up your content into chunks that can be rendered separately and then stitching them together as an image.

As always, using DirectX can give you more flexibility, but is a bit harder to use than just XAML. You can do most of your UI in XAML and then the bits that you'd want to export in DirectX. There is an article on DirectX and XAML interop here. You may also find that Win2D (which wraps Direct2D) fits your needs as well and is a bit easier to use.

[tomzorz]

@mjracca Hopping on the idea of "somehow break up your content into chunks": you could probably create a transparent element, move that over your content in chunks, and use the new Backdrop composition brush to always grab the content behind the rectangle. That way you don't need to do any changes in your XAML.

Although this depends on whether you can a) save a backdropbrush's content OR b) insert a new visual back on the rectangle and capture that with RenderTargetBitmap. Maybe @robmikh knows the answer for that one :)

[robmikh]

@tomzorz That would be a pretty slick solution! Unfortunately there isn't a way to capture the contents of a Visual at this time.

[tomzorz]

@robmikh I think we can get a win2d surface into composition as a brush - can't we do the reverse? And than save from win2d.

[robmikh]

@tomzorz You're correct that you can draw to a CompositionDrawingSurface using Win2D. That's what I do in the ImageLoader:

public async Task DrawSurface(CompositionDrawingSurface surface, Uri uri, Size size)
{
    var canvasDevice = CanvasComposition.GetCanvasDevice(_graphicsDevice);
    using (var canvasBitmap = await CanvasBitmap.LoadAsync(canvasDevice, uri))
    {
        var bitmapSize = canvasBitmap.Size;

        //
        // Because the drawing is done asynchronously and multiple threads could
        // be trying to get access to the device/surface at the same time, we need
        // to do any device/surface work under a lock.
        //
        lock (_drawingLock)
        {
            Size surfaceSize = size;
            if (surfaceSize.IsEmpty)
            {
                // Resize the surface to the size of the image
                CanvasComposition.Resize(surface, bitmapSize);
                surfaceSize = bitmapSize;
            }

            // Draw the image to the surface
            using (var session = CanvasComposition.CreateDrawingSession(surface))
            {
                session.Clear(Windows.UI.Color.FromArgb(0, 0, 0, 0));
                session.DrawImage(canvasBitmap, new Rect(0, 0, surfaceSize.Width, surfaceSize.Height), new Rect(0, 0, bitmapSize.Width, bitmapSize.Height));
            }
        }
    }
}

As you can see above, the main way to interface between Win2D and the Compositoin API is through the CanvasComposition static class.

You'll find there that you can only really create a session, which allows you to draw to the surface but not from the surface.

[mjracca]

Thanks for all your help!!

What do you think would be the best solution for us?

[robmikh]

Judging by some of your other posts, I'm assuming that your scenario is pretty special purpose and you'd like a lot of direct control. Especially when generating content or supporting non-natively handled file types, you may get more millage by "rolling your own". At that point it's up to you if you'd like to use Win2D (C#) or DirectX (C++).

Keep in mind that if you write your code in C++, you're not locked out of using C#. If you write your code as a C++\CX Windows Runtime Component you should be able to consume it from a C# app. That way you can write what you need in XAML/C# and leverage your C++ component for your custom scenarios.

[pgills]

Closing this issue, since there hasn't been any activity within the week.