WPF图片捏合缩放优化：初始全屏显示+限制最小缩放边界

嘿，我来帮你搞定这两个需求！咱们分两步来实现：

1. 让图片初始状态完全缩小、完整显示 #

要实现初始时图片完整显示在ScrollViewer中，我们需要计算图片与容器的缩放比例，取最小的那个比例来缩放图片。注意要等图片和容器都加载完成后再计算，否则获取不到正确的尺寸。

步骤1：添加必要的变量和事件处理 #

首先在MainWindow类里定义一个私有变量保存最小缩放比例，然后添加窗口加载和ScrollViewer尺寸变化的事件处理：

private double _minScale = 1.0;
private readonly object mutex = new object();
private int nrOfTouchPoints = 0;

public MainWindow()
{
    InitializeComponent();
    var files = System.IO.Directory.GetFiles(@"D:\", "*.jpg");
    var bitmap = new BitmapImage(new Uri(files[0]));
    // 确保图片加载完成后再计算初始缩放
    bitmap.DownloadCompleted += Bitmap_DownloadCompleted;
    MainImage.Source = bitmap;
}

private void Bitmap_DownloadCompleted(object sender, EventArgs e)
{
    // 延迟一点确保容器尺寸也已确定
    Dispatcher.BeginInvoke(new Action(CalculateInitialScale), System.Windows.Threading.DispatcherPriority.Loaded);
}

private void Window_Loaded(object sender, RoutedEventArgs e)
{
    CalculateInitialScale();
}

private void ScrollViewerParent_SizeChanged(object sender, SizeChangedEventArgs e)
{
    CalculateInitialScale();
    // 如果当前缩放比例小于新的最小比例，自动调整到新的最小比例
    var matrix = MainImage.LayoutTransform.Value;
    if (matrix.M11 < _minScale)
    {
        matrix.ScaleAt(_minScale / matrix.M11, _minScale / matrix.M22, ScrollViewerParent.ActualWidth / 2, ScrollViewerParent.ActualHeight / 2);
        MainImage.LayoutTransform = new MatrixTransform(matrix);
    }
}

步骤2：实现初始缩放计算逻辑 #

编写CalculateInitialScale方法来计算并应用最小缩放比例：

private void CalculateInitialScale()
{
    if (MainImage.Source == null || ScrollViewerParent.ActualWidth == 0 || ScrollViewerParent.ActualHeight == 0)
        return;

    var bitmap = MainImage.Source as BitmapImage;
    if (bitmap == null) return;

    // 获取图片原始像素尺寸
    double imageWidth = bitmap.PixelWidth;
    double imageHeight = bitmap.PixelHeight;

    // 计算X和Y方向的缩放比例，取较小值保证图片完整显示
    double scaleX = ScrollViewerParent.ActualWidth / imageWidth;
    double scaleY = ScrollViewerParent.ActualHeight / imageHeight;
    _minScale = Math.Min(scaleX, scaleY);

    // 应用初始缩放
    MainImage.LayoutTransform = new MatrixTransform(new Matrix(_minScale, 0, 0, _minScale, 0, 0));

    // 重置滚动位置到左上角
    ScrollViewerParent.ScrollToHorizontalOffset(0);
    ScrollViewerParent.ScrollToVerticalOffset(0);
}

步骤3：更新XAML事件绑定 #

给ScrollViewer添加SizeChanged事件，同时确保窗口绑定Loaded事件：

<Window x:Class="YourNamespace.MainWindow"
        ...
        Loaded="Window_Loaded">
    <Grid>
        <ScrollViewer Grid.Row="1" x:Name="ScrollViewerParent" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" PanningMode="Both" SizeChanged="ScrollViewerParent_SizeChanged">
            <Image MouseDown="MainImage_MouseDown" x:Name="MainImage" IsManipulationEnabled="True" TouchDown="MainImage_TouchDown" TouchUp="MainImage_TouchUp" ManipulationDelta="Image_ManipulationDelta" ManipulationStarting="Image_ManipulationStarting"/>
        </ScrollViewer>
    </Grid>
</Window>

2. 限制缩放至最小状态后禁止继续缩小 #

接下来修改Image_ManipulationDelta事件，在缩放前检查当前缩放比例，确保不会小于我们定义的_minScale：

private void Image_ManipulationDelta(object sender, ManipulationDeltaEventArgs e)
{
    int nrOfPoints = 0;
    lock (mutex)
    {
        nrOfPoints = nrOfTouchPoints;
    }
    if (nrOfPoints >= 2)
    {
        var matrix = MainImage.LayoutTransform.Value;
        Point? centerOfPinch = (e.ManipulationContainer as FrameworkElement)?.TranslatePoint(e.ManipulationOrigin, ScrollViewerParent);
        if (centerOfPinch == null)
        {
            return;
        }

        var deltaManipulation = e.DeltaManipulation;
        // 计算缩放后的预期比例
        double newScaleX = matrix.M11 * deltaManipulation.Scale.X;
        double newScaleY = matrix.M22 * deltaManipulation.Scale.Y;

        // 如果缩放后会小于最小比例，调整delta缩放值，限制在最小比例
        if (newScaleX < _minScale || newScaleY < _minScale)
        {
            // 计算需要的缩放比例，确保结果不小于_minScale
            double adjustScaleX = Math.Max(_minScale / matrix.M11, deltaManipulation.Scale.X);
            double adjustScaleY = Math.Max(_minScale / matrix.M22, deltaManipulation.Scale.Y);
            deltaManipulation.Scale = new Vector(adjustScaleX, adjustScaleY);
        }

        // 应用缩放
        matrix.ScaleAt(deltaManipulation.Scale.X, deltaManipulation.Scale.Y, centerOfPinch.Value.X, centerOfPinch.Value.Y);
        MainImage.LayoutTransform = new MatrixTransform(matrix);

        // 滚动偏移处理保持不变
        Point? originOfManipulation = (e.ManipulationContainer as FrameworkElement)?.TranslatePoint(e.ManipulationOrigin, MainImage);
        double scrollViewerOffsetX = ScrollViewerParent.HorizontalOffset;
        double scrollViewerOffsetY = ScrollViewerParent.VerticalOffset;
        double pointMovedOnXOffset = originOfManipulation.Value.X - originOfManipulation.Value.X * deltaManipulation.Scale.X;
        double pointMovedOnYOffset = originOfManipulation.Value.Y - originOfManipulation.Value.Y * deltaManipulation.Scale.Y;
        double multiplicatorX = ScrollViewerParent.ExtentWidth / MainImage.ActualWidth;
        double multiplicatorY = ScrollViewerParent.ExtentHeight / MainImage.ActualHeight;
        ScrollViewerParent.ScrollToHorizontalOffset(scrollViewerOffsetX - pointMovedOnXOffset * multiplicatorX);
        ScrollViewerParent.ScrollToVerticalOffset(scrollViewerOffsetY - pointMovedOnYOffset * multiplicatorY);

        e.Handled = true;
    }
    else
    {
        // 平移处理保持不变
        ScrollViewerParent.ScrollToHorizontalOffset(ScrollViewerParent.HorizontalOffset - e.DeltaManipulation.Translation.X);
        ScrollViewerParent.ScrollToVerticalOffset(ScrollViewerParent.VerticalOffset - e.DeltaManipulation.Translation.Y);
    }
}

这样修改后，当图片缩放至最小显示状态时，用户再进行捏合缩小操作不会有任何效果，但平移操作依然可以正常进行。

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