WPF ScrollViewer调用Arrange方法后位置上移问题求助

环境设置 #

在WPF项目中，Grid布局内的ScrollViewer包含Canvas元素（用于绘制内容），Grid第一行设置了“Draw”按钮，点击按钮会弹出保存对话框并完成截图操作；ScrollViewer位于Grid第二行。

问题描述 #

基于Stack Overflow示例实现截图功能后，截图本身可以正常生成，但执行截图代码时，调用Arrange方法后，ScrollViewer会向上偏移到与Grid第一行同一水平位置，破坏了原有的布局结构。

代码示例 #

XAML代码 #

<Window x:Class="WpfApp1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:WpfApp1"
    mc:Ignorable="d"
    Title="My Layout" Height="400" Width="420" Left="0" Top="0">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="50" />
            <RowDefinition Height="550"  />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100" />
            <ColumnDefinition Width="300" />
        </Grid.ColumnDefinitions>
        <Button Grid.Row="0" Grid.Column="0" x:Name="Draw" Content="Draw" FontSize="14" VerticalAlignment="Center" Click="Photo_Click" />
        <ScrollViewer Grid.Row="1" Grid.ColumnSpan="2" VerticalScrollBarVisibility="Visible" HorizontalScrollBarVisibility="Visible" Name="sv">
            <!-- 此处应包含需要截图的Canvas元素 -->
        </ScrollViewer>
    </Grid>
</Window>

后台代码（原问题版本） #

private void Photo_Click(object sender, RoutedEventArgs e)
{
    ExportToImage(sv);
}

public static void ExportToImage(ScrollViewer sv)
{
    var dlg = new SaveFileDialog
    {
        Filter = "PNG Files (*.png)|*.png",
        DefaultExt = "png",
        FilterIndex = 2,
        FileName = "DesignerImage.png",
        RestoreDirectory = true
    };

    bool? result = dlg.ShowDialog();
    string path = dlg.FileName;

    if (result == true)
    {
        try
        {
            RenderTargetBitmap renderBitmap = new RenderTargetBitmap(
                     (int)sv.ActualWidth, (int)sv.ActualHeight,
                      96d, 96d, PixelFormats.Pbgra32);
            sv.Measure(new Size((int)sv.ActualWidth, (int)sv.ActualHeight));
            sv.Arrange(new Rect(new Size((int)sv.ActualWidth, (int)sv.ActualHeight)));

            renderBitmap.Render(sv);
            BitmapEncoder imageEncoder = new PngBitmapEncoder();
            imageEncoder.Frames.Add(BitmapFrame.Create(renderBitmap));
            using (FileStream file = File.Create(path))
            {
                imageEncoder.Save(file);
            }
        }
        catch (Exception ex)
        {
            // 异常处理
        }
    }
}

问题原因 #

手动调用Measure和Arrange方法会强制ScrollViewer脱离Grid的布局控制，Arrange(new Rect(...))默认会把元素放置在坐标(0,0)的位置，也就是Grid的第一行区域，从而导致布局错位。实际上ScrollViewer已经通过Grid的Row定义完成了布局，不需要再手动触发布局流程。

解决方案 #

直接删除手动调用的Measure和Arrange两行代码，保留原有布局逻辑，直接对已完成布局的ScrollViewer进行渲染即可。

修改后的后台代码 #

private void Photo_Click(object sender, RoutedEventArgs e)
{
    ExportToImage(sv);
}

public static void ExportToImage(ScrollViewer sv)
{
    var dlg = new SaveFileDialog
    {
        Filter = "PNG Files (*.png)|*.png",
        DefaultExt = "png",
        FilterIndex = 2,
        FileName = "DesignerImage.png",
        RestoreDirectory = true
    };

    bool? result = dlg.ShowDialog();
    string path = dlg.FileName;

    if (result == true)
    {
        try
        {
            RenderTargetBitmap renderBitmap = new RenderTargetBitmap(
                     (int)sv.ActualWidth, (int)sv.ActualHeight,
                      96d, 96d, PixelFormats.Pbgra32);

            // 移除手动的Measure和Arrange调用
            renderBitmap.Render(sv);
            BitmapEncoder imageEncoder = new PngBitmapEncoder();
            imageEncoder.Frames.Add(BitmapFrame.Create(renderBitmap));
            using (FileStream file = File.Create(path))
            {
                imageEncoder.Save(file);
            }
        }
        catch (Exception ex)
        {
            // 异常处理
        }
    }
}

如果需要截取ScrollViewer内的完整内容（包括滚动区域外的部分），可以针对ScrollViewer的Content（比如内部的Canvas）进行渲染，此时需要手动调用Measure和Arrange，但要确保是对Content元素操作，而非ScrollViewer本身：

// 假设ScrollViewer的Content是名为canvas的Canvas元素
Canvas canvas = sv.Content as Canvas;
if (canvas != null)
{
    var renderBitmap = new RenderTargetBitmap(
        (int)canvas.ActualWidth, (int)canvas.ActualHeight,
        96d, 96d, PixelFormats.Pbgra32);
    canvas.Measure(new Size(canvas.ActualWidth, canvas.ActualHeight));
    canvas.Arrange(new Rect(0, 0, canvas.ActualWidth, canvas.ActualHeight));
    renderBitmap.Render(canvas);
}

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