Problem Creating png image of TextBlock using RenderTargetBitmap in WPF

Question

When using RenderTargetBitmap to generate a PNG file from a TextBlock that is a child of a Canvas, the text is stretched to match the width of the TextBlock. The TextBlock has a TextAlignment set to 'Right'. However, the generated PNG does not accurately represent the rendered TextBlock.

The sample code below produces images where the text is cut off. I understand that the issue arises from setting the left and top properties of the text. Could you explain why this happens and suggest a solution?

Canvas innerCanvas = new Canvas();
innerCanvas.Width = 500;
innerCanvas.Height = 500;

TextBlock textBlock1 = new TextBlock
{

    Width = 87,
    FontFamily = new FontFamily("Arial"),
    FontSize = 13.00,
    Foreground = Brushes.Black,
    TextAlignment = TextAlignment.Right,
    Text = "TEXT1"
};

TextBlock textBlock2 = new TextBlock
{
    Width = 87,
    FontFamily = new FontFamily("Arial"),
    FontSize = 13.00,
    Foreground = Brushes.Black,
    TextAlignment = TextAlignment.Left,
    Text = "TEXT2"
};

Canvas.SetLeft(textBlock1, -70);
Canvas.SetTop(textBlock1, 0);

Canvas.SetLeft(textBlock2, 50);
Canvas.SetTop(textBlock2, 0);

innerCanvas.Children.Add(textBlock1);           
innerCanvas.Children.Add(textBlock2);

innerCanvas.Measure(new Size(double.PositiveInfinity, double.PositiveInfinity));
innerCanvas.Arrange(new Rect(new Point(0, 0), innerCanvas.DesiredSize));

double dpi = 96;
double dpiScale = dpi / 96; // Adjust the dpi scale

foreach (UIElement child in innerCanvas.Children)
{
    if (child is TextBlock textBlock)
    {
        RenderTargetBitmap bmpCopied = new RenderTargetBitmap
        (
            (int)Math.Round(textBlock.ActualWidth * dpiScale),
            (int)Math.Round(textBlock.ActualHeight * dpiScale),
            dpi,
            dpi,
            PixelFormats.Pbgra32
        );

      
        bmpCopied.Render(child);

        var pngEncoder = new PngBitmapEncoder();
        pngEncoder.Frames.Add(BitmapFrame.Create(bmpCopied));

        String imageName = System.IO.Path.Combine(@"C:\temp\Images", textBlock.Text + ".png");

        using (var stream = new FileStream(imageName, FileMode.Create))
        {
            pngEncoder.Save(stream);
        }
    }
}

Answer 1

The problem you are facing is because of Width and Left values that you set for the TextBlock. I tried to replicate your code in Xaml and in this picture you can see what went wrong.

I guess Instead of TextAlignment = TextAlignment.Right, you mean to set the Horizontal Alignment of the TextBlock. in that case this is what you need:

TextBlock textBlock1 = new TextBlock
 {
     Width = 87,
     FontFamily = new FontFamily("Arial"),
     FontSize = 13.00,
     Foreground = Brushes.Black,
    // TextAlignment = TextAlignment.Right,
     Text = "TEXT2"
 };

 textBlock1.HorizontalAlignment = HorizontalAlignment.Right;

 Canvas.SetLeft(textBlock1, 0);
 Canvas.SetTop(textBlock1, 0);

Also if you want to give the TextBlock some margins from left or right, you should consider the alignment of the element.
When it aligned to right in order to add some space from the left edge of Canvas you can use Canvas.SetLeft a posetive value and when it aligned to the right you can set the value of Canvas.SetRight.