WinUI 3中实现图像双击缩放并光标位置居中的方法

问题核心：当ScrollViewer嵌套Image并设置Stretch="Uniform"时，直接使用光标相对于Image控件的位置计算滚动偏移，会因为图像实际渲染比例与控件尺寸不一致，导致居中逻辑失效。

修正思路 #

1. 计算图像的实际渲染缩放比例：由于Stretch="Uniform"，图像会按最小比例适配控件，需先算出该比例值。
2. 将光标在Image控件上的位置，转换为相对于图像原始内容的坐标。
3. 结合缩放前后的比例，计算正确的滚动偏移量，确保缩放后光标位置落在ScrollViewer视口中心。

修正后的Image_DoubleTapped代码 #

替换原有的Image_DoubleTapped方法：

private void Image_DoubleTapped(object sender, DoubleTappedRoutedEventArgs e)
{
    _isManualZoomChange = true;
    if (sender is not Image image || image.Source is not BitmapImage bitmapSource)
    {
        return;
    }

    // 获取图像原始尺寸
    double imageOriginalWidth = bitmapSource.PixelWidth;
    double imageOriginalHeight = bitmapSource.PixelHeight;
    if (imageOriginalWidth == 0 || imageOriginalHeight == 0)
    {
        _isManualZoomChange = false;
        return;
    }

    // 计算Image控件的实际可用尺寸
    double controlWidth = image.ActualWidth;
    double controlHeight = image.ActualHeight;

    // 计算Stretch=Uniform时的图像渲染缩放比例
    double scaleX = controlWidth / imageOriginalWidth;
    double scaleY = controlHeight / imageOriginalHeight;
    double currentImageScale = Math.Min(scaleX, scaleY);

    // 获取光标在Image控件上的位置
    var pointerPosInControl = e.GetPosition(image);

    // 转换为图像原始内容上的坐标
    double pointerPosInImageX = pointerPosInControl.X / currentImageScale;
    double pointerPosInImageY = pointerPosInControl.Y / currentImageScale;

    // 当前ScrollViewer的缩放因子和目标缩放值
    float currentZoom = scroll.ZoomFactor;
    float nextZoom = currentZoom == 1 ? 3 : 1;

    // 计算视口半宽/高
    double viewportHalfWidth = scroll.ViewportWidth / 2;
    double viewportHalfHeight = scroll.ViewportHeight / 2;

    // 计算目标偏移量：让光标位置处于视口中心
    double targetHorizontalOffset = Math.Max(pointerPosInImageX * nextZoom - viewportHalfWidth, 0);
    double targetVerticalOffset = Math.Max(pointerPosInImageY * nextZoom - viewportHalfHeight, 0);

    // 限制偏移量不超过滚动范围最大值
    targetHorizontalOffset = Math.Min(targetHorizontalOffset, scroll.ScrollableWidth);
    targetVerticalOffset = Math.Min(targetVerticalOffset, scroll.ScrollableHeight);

    // 应用视图变更
    _ = scroll.ChangeView(targetHorizontalOffset, targetVerticalOffset, nextZoom, true);
    ZoomSlider.Value = nextZoom;
    _isManualZoomChange = false;
}

关键说明 #

• 图像渲染比例计算：Stretch="Uniform"模式下，图像会取宽高比中较小的比例缩放以完整显示，因此用Math.Min(scaleX, scaleY)获取实际缩放比例。
• 坐标转换：光标在Image控件上的位置是经过缩放后的，需除以当前图像渲染比例，得到在原始图像上的真实坐标。
• 偏移量限制：通过Math.Max和Math.Min确保偏移量不会超出ScrollViewer的滚动范围，避免出现空白或滚动失效。

内容的提问来源于stack exchange，提问作者אפרת