WPF中如何为SKElement绘制的缩放图片添加滚动条功能

1. 修改XAML布局 #

首先纠正你原XAML中SkiaSharp命名空间的语法错误（命名空间和程序集之间要使用分号分隔，不是冒号），然后在外层嵌套ScrollViewer控件，内部加一个尺寸可动态调整的容器承载SKElement：

<UserControl xmlns:skia="clr-namespace:SkiaSharp.Views.WPF;assembly=SkiaSharp.Views.WPF">
    <ScrollViewer x:Name="ImageScrollViewer" 
                  HorizontalScrollBarVisibility="Auto"
                  VerticalScrollBarVisibility="Auto">
        <!-- 该容器的尺寸会根据图片缩放比例动态调整，用于触发滚动条显示 -->
        <Grid x:Name="ContentContainer">
            <skia:SKElement Name="Canvas" PaintSurface="SKElement_PaintSurface"/>
        </Grid>
    </ScrollViewer>
</UserControl>

2. 调整后端逻辑 #

核心逻辑是动态计算缩放后的内容尺寸赋值给内部容器，让ScrollViewer自动识别内容大小生成滚动条，同时绘制时适配滚动偏移量。
首先定义全局存储变量：

// 可根据你的实际逻辑调整变量定义
private float _zoomFactor = 1.0f; // 当前缩放比例
private SKBitmap _targetBitmap; // 你要绘制的位图对象

缩放比例变更时（比如鼠标滚轮触发缩放后），调用以下方法更新容器尺寸：

private void RefreshContentSize()
{
    if (_targetBitmap == null) return;
    // 计算缩放后实际内容尺寸
    double scaledWidth = _targetBitmap.Width * _zoomFactor;
    double scaledHeight = _targetBitmap.Height * _zoomFactor;
    // 赋值给内部容器，ScrollViewer会自动识别尺寸变化生成滚动条
    ContentContainer.Width = scaledWidth;
    ContentContainer.Height = scaledHeight;
    // 触发画布重绘
    Canvas.InvalidateVisual();
}

修改PaintSurface绘制逻辑，适配滚动偏移量：

private void SKElement_PaintSurface(object sender, SKPaintSurfaceEventArgs e)
{
    var canvas = e.Surface.Canvas;
    canvas.Clear();
    if (_targetBitmap == null) return;

    // 获取当前滚动条偏移量
    float offsetX = (float)ImageScrollViewer.HorizontalOffset;
    float offsetY = (float)ImageScrollViewer.VerticalOffset;

    canvas.Save();
    // 先平移画布抵消滚动偏移，再应用缩放
    canvas.Translate(-offsetX, -offsetY);
    canvas.Scale(_zoomFactor);

    // 此处保留你原有绘制位图的逻辑
    canvas.DrawBitmap(_targetBitmap, 0, 0);

    canvas.Restore();
}

3. 常见注意事项 #

• 若系统开启了DPI缩放，需要获取当前窗口的DPI系数，将WPF的设备无关单位转换为Skia的物理像素单位，避免绘制内容模糊
• 如果你用鼠标滚轮控制缩放，可额外添加缩放锚点逻辑，保持鼠标指向的内容位置不变，提升交互体验
• 滚动条滚动时会自动触发SKElement重绘，无需额外监听ScrollViewer的滚动事件

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