WPF开发：在Image控件显示UI元素渲染图，实现PPT式分页缩略图

我来帮你完善这个WPF里生成页面缩略图并显示的功能，刚好做过类似的PPT分页预览需求～

首先，我们先补全你已经开始编写的CreateImageOfPage函数，完整实现将Visual（这里是你的RootGrid）渲染为BitmapSource，之后就能直接绑定到WPF的Image控件上了：

private BitmapSource CreateImageOfPage() 
{ 
    // 获取当前要渲染的工作表Grid
    var targetGrid = this.WorkSheetViewModelList.Last().RootGrid;
    int width = (int)targetGrid.Width; 
    int height = (int)targetGrid.Height; 

    // 创建RenderTargetBitmap，96是屏幕标准DPI，适配大多数显示场景
    var renderTargetBitmap = new RenderTargetBitmap(
        width, 
        height, 
        96, 
        96, 
        PixelFormats.Pbgra32);

    // 渲染目标Visual元素
    renderTargetBitmap.Render(targetGrid);

    // 返回的BitmapSource可以直接作为Image控件的Source属性值
    return renderTargetBitmap;
}

接下来，把生成的渲染图像绑定到Image控件上，这里提供两种常用方式：

1. 后台代码直接赋值 #

如果是在后台代码里直接控制单个缩略图Image控件，直接赋值即可：

// 假设你的缩略图控件命名为thumbnailImage
thumbnailImage.Source = CreateImageOfPage();

2. MVVM绑定模式（推荐多页面场景） #

如果是管理多个工作表的缩略图列表，建议给每个WorkSheetViewModel添加缩略图属性，贴合MVVM架构：

public class WorkSheetViewModel : INotifyPropertyChanged
{
    private BitmapSource _thumbnailSource;
    public BitmapSource ThumbnailSource
    {
        get => _thumbnailSource;
        set
        {
            _thumbnailSource = value;
            OnPropertyChanged();
        }
    }

    // 你的其他属性：RootGrid等...

    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

之后在生成缩略图时，给对应的ViewModel赋值：

// 更新最后一个工作表的缩略图
var lastSheet = this.WorkSheetViewModelList.Last();
lastSheet.ThumbnailSource = CreateImageOfPage();

最后在XAML里用ItemsControl实现类似PPT的侧边缩略图列表：

<ItemsControl ItemsSource="{Binding WorkSheetViewModelList}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <VirtualizingStackPanel Orientation="Vertical"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Border Margin="5" BorderBrush="LightGray" BorderThickness="1"
                    Width="120" Height="90" Cursor="Hand"
                    ToolTip="点击切换到该页面">
                <Image Source="{Binding ThumbnailSource}" Stretch="Uniform"/>
            </Border>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

实用优化建议 #

• 异步渲染避免UI卡顿：如果Grid内容复杂，同步渲染会阻塞UI线程，建议用后台线程处理（注意WPF的BitmapSource需要回到UI线程赋值）：

private async Task UpdateThumbnailAsync()
{
    var targetGrid = this.WorkSheetViewModelList.Last().RootGrid;
    int width = (int)targetGrid.Width;
    int height = (int)targetGrid.Height;

    BitmapSource bitmap = null;
    await Task.Run(() =>
    {
        // 后台线程创建渲染对象
        var rtb = new RenderTargetBitmap(width, height, 96, 96, PixelFormats.Pbgra32);
        // 若Grid不在可视化树中，需先执行Measure和Arrange确保渲染完整
        targetGrid.Measure(new Size(width, height));
        targetGrid.Arrange(new Rect(0, 0, width, height));
        rtb.Render(targetGrid);
        bitmap = rtb;
    });

    // 回到UI线程更新控件/ViewModel
    Application.Current.Dispatcher.Invoke(() =>
    {
        this.WorkSheetViewModelList.Last().ThumbnailSource = bitmap;
    });
}

• 缩小缩略图尺寸节省内存：如果原始Grid尺寸很大，可按比例缩小后渲染：

// 缩放到原始尺寸的1/4
int thumbnailWidth = width / 4;
int thumbnailHeight = height / 4;
var renderTargetBitmap = new RenderTargetBitmap(thumbnailWidth, thumbnailHeight, 96, 96, PixelFormats.Pbgra32);

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