WPF中用RenderTargetBitmap生成Canvas子TextBlock的PNG时文本异常

在WPF里用RenderTargetBitmap从Canvas的子元素TextBlock生成PNG时，文本会被拉伸适配TextBlock宽度，设置了TextAlignment=Right的TextBlock导出的PNG无法还原实际渲染效果，甚至出现文本截断。已知问题根源在于给TextBlock设置了Canvas.Left和Canvas.Top属性。

原因分析 #

• Canvas是绝对定位容器，子元素的Canvas.Left/Top是相对于Canvas的偏移量，但直接调用RenderTargetBitmap.Render(child)时，只会渲染TextBlock自身的布局空间，完全不考虑它在Canvas中的偏移对内容显示的影响。
• 以textBlock1为例，它的Canvas.Left=-70，而自身Width是87：因为TextBlock设置了右对齐，文本原本应该显示在TextBlock的右侧区域，但负偏移导致TextBlock的可视区域只能覆盖原本内容的右侧一小部分，导出时自然会截断文本。
• 单独渲染TextBlock时，它的布局上下文是自身的Size，而非在Canvas中的实际显示区域，所以无法还原Canvas中的真实渲染效果。

解决方案 #

方案1：渲染整个Canvas后裁剪目标区域 #

通过先渲染完整的Canvas，再根据TextBlock在Canvas中的实际位置和大小裁剪对应区域，完整保留TextBlock在Canvas中的真实显示效果。

修改后的完整代码：

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);

// 完成Canvas的测量与排列
innerCanvas.Measure(new Size(double.PositiveInfinity, double.PositiveInfinity));
innerCanvas.Arrange(new Rect(new Point(0, 0), innerCanvas.DesiredSize));
innerCanvas.UpdateLayout(); // 确保布局完全生效

double dpi = 96;
double dpiScale = dpi / 96;

// 先渲染整个Canvas
RenderTargetBitmap fullCanvasBmp = new RenderTargetBitmap(
    (int)Math.Round(innerCanvas.ActualWidth * dpiScale),
    (int)Math.Round(innerCanvas.ActualHeight * dpiScale),
    dpi,
    dpi,
    PixelFormats.Pbgra32
);
fullCanvasBmp.Render(innerCanvas);

foreach (UIElement child in innerCanvas.Children)
{
    if (child is TextBlock textBlock)
    {
        // 计算TextBlock在Canvas中的实际位置（按DPI缩放）
        double scaledLeft = Canvas.GetLeft(textBlock) * dpiScale;
        double scaledTop = Canvas.GetTop(textBlock) * dpiScale;
        double scaledWidth = textBlock.ActualWidth * dpiScale;
        double scaledHeight = textBlock.ActualHeight * dpiScale;

        // 裁剪对应区域
        CroppedBitmap croppedBmp = new CroppedBitmap(fullCanvasBmp, new Int32Rect(
            (int)Math.Round(scaledLeft),
            (int)Math.Round(scaledTop),
            (int)Math.Round(scaledWidth),
            (int)Math.Round(scaledHeight)
        ));

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

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

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

方案2：临时脱离Canvas渲染TextBlock #

如果不需要依赖Canvas的上下文，可以临时将TextBlock从Canvas中移除，用临时容器包裹后单独渲染，确保内容完整显示：

// 遍历子元素时的修改部分（其余代码不变）
foreach (UIElement child in innerCanvas.Children.ToList()) // 转ToList避免遍历中修改集合
{
    if (child is TextBlock textBlock)
    {
        // 临时从Canvas移除，消除Canvas布局影响
        innerCanvas.Children.Remove(textBlock);
        double originalLeft = Canvas.GetLeft(textBlock);
        double originalTop = Canvas.GetTop(textBlock);

        // 创建临时容器包裹TextBlock，确保内容完整渲染
        Border tempContainer = new Border
        {
            Width = textBlock.ActualWidth,
            Height = textBlock.ActualHeight,
            Child = textBlock
        };

        // 完成临时容器的布局
        tempContainer.Measure(new Size(textBlock.ActualWidth, textBlock.ActualHeight));
        tempContainer.Arrange(new Rect(0, 0, textBlock.ActualWidth, textBlock.ActualHeight));
        tempContainer.UpdateLayout();

        RenderTargetBitmap bmpCopied = new RenderTargetBitmap
        (
            (int)Math.Round(textBlock.ActualWidth * dpiScale),
            (int)Math.Round(textBlock.ActualHeight * dpiScale),
            dpi,
            dpi,
            PixelFormats.Pbgra32
        );

        bmpCopied.Render(tempContainer);

        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);
        }

        // 将TextBlock放回Canvas并恢复原偏移
        innerCanvas.Children.Add(textBlock);
        Canvas.SetLeft(textBlock, originalLeft);
        Canvas.SetTop(textBlock, originalTop);
    }
}

内容的提问来源于stack exchange，提问作者Bob