Canvas to WriteableBitmap

Gonzalez, Javier 20

Hello.

I'm imported an images and loaded in a WriteableBitmap.

Then i loaded that image in a Image variable. I need to draw a simple square . For that my next step was to load the Image variable in a canvas. Using a polygon i was able to draw a simple square and show in the app as canvas, but i need save as WriteableBitmap. I tried to use:

RenderTargetBitmap renderBitmap = new RenderTargetBitmap();

          await renderBitmap.RenderAsync(canvas);

But the resutl is 0 bytes in renderBitmap.

Roy Li - MSFT 33,926 Reputation points Microsoft Vendor

2025-02-03T02:21:38.8266667+00:00

I‘m a little bit confused about what you are trying to do. I understand that your goal is to save the UI of the app into a WriteableBitmap. But I'm not sure about the steps that you do.

Could you please share the code snippet that could reproduce this behavior? You could reproduce this behavior in a blank project and share the code with me. Also, please remember to share the steps to reproduce the behavior. It will be helpful for troubleshooting the problem.

Gonzalez, Javier 20

Hello Roy. Yes my main goal here is save in WriteableBitmap that i done inside a canvas.

The steps: I have an images saved in writeableBitmap variable = myimage. then: imageControl = new Image();

         imageControl.Source = myimage;

   Canvas canvas2 = new Canvas();

        canvas2.Width = outbitmap.PixelWidth;

        canvas2.Height = outbitmap.PixelHeight;

       canvas2.Children.Add(imageControl);

        var renderTargetBitmap = new RenderTargetBitmap();

        await renderTargetBitmap.RenderAsync(canvas2, (int)canvas2.ActualWidth, (int)canvas2.ActualHeight);

Accepted answer

Roy Li - MSFT 33,926 Reputation points Microsoft Vendor

2025-02-04T02:34:23.2533333+00:00

Hello,

Welcome to Microsoft Q&A!

I checked your code, I found that you haven't rendered your canvas2 into UI, right?

RenderTargetBitmap could only capture content that in the XAML visual tree. That means that you need to render your Canvas first in your UI. For example, add the canvas2 to your page's root element to make it visible. Then you could add the image and call the RenderAsync method to capture the content.

Thank you.

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.
Please sign in to rate this answer.
Gonzalez, Javier 20 Reputation points

2025-02-04T13:02:14.57+00:00

Thanks Roy:

Let me check if my understanding is correct:

In the UI I created a Grid <Grid x:Name="RenderedGrid"> inside the Grid I made visible canvas2.

After that I done:

RenderTargetBitmap renderTargetBitmap = new RenderTargetBitmap();

await renderTargetBitmap.RenderAsync(RenderedGrid, 1432, 625); MyImageout.Source = renderTargetBitmap; //For show in <Image x:"MyImageout" >

Roy Li - MSFT 33,926 Reputation points Microsoft Vendor

2025-02-05T02:11:54.2966667+00:00

Before you call the RenderAsync please make sure you've added the target image control in to the canvas2 and show it. As I mentioned, RenderTargetBitmap could only capture content that in the XAML visual tree, so please make sure the target image is shown in your UI first.

Gonzalez, Javier 20 Reputation points

2025-02-05T12:40:39.2133333+00:00

Thanks Roy.
Sign in to comment

Use comments to ask for clarification, additional information, or improvements to the question.

Share via

Canvas to WriteableBitmap

0 additional answers

Your answer