RenderTargetBitmap 位置问题

Question

Objective

使用 RenderTargetBitmap 截取一个控件（或一组控件）的屏幕截图。

来源：

<Grid Height="200" Width="500">
    <!-- Here goes any content, in my case, a Label or a Shape-->
    <Label VerticalAligment="Top" HorizontalAligment="Left" Content="Text">
</Grid>

预期结果：

方法一

这个基本上是用UIElement作为RenderTargetBitmap的来源。

public static ImageSource GetRender(this UIElement source)
{
     double actualHeight = source.RenderSize.Height;
     double actualWidth = source.RenderSize.Width;

     var renderTarget = new RenderTargetBitmap((int)Math.Round(actualWidth), 
         (int)Math.Round(actualHeight), 96, 96, PixelFormats.Pbgra32);

     renderTarget.Render(source);
     return renderTarget;
}

结果：

方法二：

我不会直接将 UIElement 设置为 RenderTargetBitmap 的来源，而是使用 VisualBrush.

//Same RenderTargetBitmap...

DrawingVisual dv = new DrawingVisual();
using (DrawingContext ctx = dv.RenderOpen())
{
    VisualBrush vb = new VisualBrush(target);
    ctx.DrawRectangle(vb, null, new Rect(new Point(), bounds.Size));
}
rtb.Render(dv);

结果：

这个忽略里面Grid和Label的位置和大小：

这里发生了什么？

Answer 1

修改后的方法 2

我只需要获取 Grid 的后代的边界并只渲染需要的部分。

public static ImageSource GetRender(this UIElement source, double dpi)
{
    Rect bounds = VisualTreeHelper.GetDescendantBounds(source);

    var scale = dpi / 96.0;
    var width = (bounds.Width + bounds.X)*scale;
    var height = (bounds.Height + bounds.Y)*scale;

    RenderTargetBitmap rtb = 
        new RenderTargetBitmap((int)Math.Round(width, MidpointRounding.AwayFromZero), 
        (int)Math.Round(height, MidpointRounding.AwayFromZero), 
        dpi, dpi, PixelFormats.Pbgra32);        

    DrawingVisual dv = new DrawingVisual();
    using (DrawingContext ctx = dv.RenderOpen())
    {
        VisualBrush vb = new VisualBrush(source);
        ctx.DrawRectangle(vb, null, 
            new Rect(new Point(bounds.X, bounds.Y), new Point(width, height)));
    }

    rtb.Render(dv);
    return (ImageSource)rtb.GetAsFrozen();
}

结果：

渲染后的Label/Shape:

与另一张图片合并：

Answer 2

这是因为 RenderTargetBitmap 根据其父对象的坐标渲染视觉对象。其自身的边距、其父级的 Padding 或 BorderThickness 都会影响渲染图像。要解决这个问题，您可以简单地添加一个假父容器：如果原来的可视化逻辑树是这样的

<Grid>
    <Canvas Margin="20" />
</Grid>

改为

<Grid>
    <Border Margin="20">
        <Canvas />
    </Border>
</Grid>

Alignment\Margin 的设置也应移至父级。现在你会得到你想要的。

RenderTargetBitmap 位置问题

RenderTargetBitmap position issues

c#

wpf

.net-4.5

rendertargetbitmap

Objective

方法一

方法二：

修改后的方法 2