renderTargetBitmap.RenderAsync Ignores Image on UserContol

Question

I have a UserControl like this:

I initialize it by this way:

 //Initializing task card.
                var item = new TaskCard(Name_TextBox.Text.ToUpper() + " " + Surname_TextBox.Text.ToUpper(), Task_TextBox.Text, ExamArea_TextBox.Text, HallName_TextBox.Text, HallNumber_TextBox.Text, DateConverter.Get(Date_Picker.Date.ToString())); // Creating card.

After that, as you knew, we must display UserControl on anything for using the renderTargetBitmap is needed.So, I prepared a grid for showing the UserControl.

  
                
                    
                    
                
                

                    
                        
                        
                    
                    
                    
                
                
            



 //Converting UIelement to Rendered Bitmap

                    ItemAddFrame_RingWaiter.Content = item; // Adding card to canvas.

                    RenderTargetBitmap renderTargetBitmap = new RenderTargetBitmap();

                    await renderTargetBitmap.RenderAsync(ItemAddFrame_RingWaiter); // Render frame.
                    var pixelBuffer = await renderTargetBitmap.GetPixelsAsync();

Finally, you can see two Image element in my usercontrol. It looks perfectly after binding it to the Frame. However, when I exported it to a image with FileSavePicker and BitmapEncoder, those Image elements in my user controls randomly appear and disappeared. If I try to export all of the WaiterGrid, Image controls stands in its native place. I could not figure out. Could you help me? Thank you.

Usercontrol on grid:

Exported Image

Sunteen Wu · Accepted Answer

However, when I exported it to a image with FileSavePicker and BitmapEncoder, those Image elements in my user controls randomly appear and disappeared

This is caused by no enough time for the images to load. As soon as you add the UserControl taskcard to the frame, you render the frame immediately. But when rendering the ItemAddFrame_RingWaiter in that time the images are not loaded completed so that images will not be rendered. Add Task.Delay to waiting for a while you will find it work well.

ItemAddFrame_RingWaiter.Content = item; // Adding card to canvas. 
await Task.Delay(1000);
RenderTargetBitmap renderTargetBitmap = new RenderTargetBitmap();
await renderTargetBitmap.RenderAsync(ItemAddFrame_RingWaiter); // Render frame.
imgshow.Source = renderTargetBitmap;

Task.Delay can help know the reason but is not a good solution. In your previous thread you could see that in my answer I add the UserControl in XAML by code like follows:

If adding the UserControl by this way, the above issue may not appear. I'm not sure why you add the control code behind, if you do want to add the control code behind, try to monitor the Image_Loaded event handle from your UserControl inside.

renderTargetBitmap.RenderAsync Ignores Image on UserContol

Answers (1)

Related Questions