如何在WPF Image控件中按比例放大BitmapSource指定区域并完整显示？

嘿，我明白你的问题了——你现在的放大比例看似对，但缩放中心没跟着活动区域走，导致放大后位置不对是吧？其实问题出在缩放因子和中心坐标的计算逻辑没有结合控件的实际显示尺寸，我给你梳理下问题，再把代码改好。

首先先贴你的原代码，方便对比：

原XAML代码 #

<DockPanel> 
    <Button DockPanel.Dock="Bottom" Content="Zoom" Click="Button_Click" /> 
    <Border DockPanel.Dock="Top" ClipToBounds="True"> 
        <Image Name="TheImage" /> 
    </Border> 
</DockPanel>

原C#代码 #

private const int WIDTH = 1280;
private const int HEIGHT = 1024;
private const int MIN_X = 100;
private const int MAX_X = 200;
private const int MIN_Y = 100;
private const int MAX_Y = 200;

public MainWindow() 
{ 
    InitializeComponent(); 
    byte[] image = new byte[WIDTH * HEIGHT]; 
    for (int y = MIN_Y; y <= MAX_Y; y++) 
        for (int x = MIN_X; x <= MAX_X; x++) 
            image[y * WIDTH + x] = byte.MaxValue; 
    TheImage.Source = BitmapSource.Create(WIDTH, HEIGHT, 96.0, 96.0, PixelFormats.Gray8, null, image, WIDTH); 
}

private void Button_Click(object sender, RoutedEventArgs e) 
{ 
    double factor = 1.0 / Math.Max((MAX_X - MIN_X) / (double)WIDTH, (MAX_Y - MIN_Y) / (double)HEIGHT); 
    Matrix matrix = Matrix.Identity; 
    matrix.ScaleAt(factor, factor, (MIN_X + MAX_X) / 2.0 / WIDTH * TheImage.ActualWidth, (MIN_Y + MAX_Y) / 2.0 / HEIGHT * TheImage.ActualHeight); 
    TheImage.RenderTransform = new MatrixTransform(matrix); 
}

问题分析 #

你的原代码有两个核心问题：

1. 缩放因子基于原始图像尺寸，而非控件实际显示尺寸：如果窗口调整大小，Image控件的ActualWidth/Height和原始1280x1024不一致时，放大后的活动区域可能超出控件视口，或者没有最大化利用空间。
2. 缩放中心的逻辑虽然方向对，但没有结合缩放后的坐标偏移：当控件尺寸和原始图像比例不同时，直接按比例转换的中心会有偏差，导致活动区域放大后位置不对。

修正后的代码 #

我把Button_Click方法重写了，保证缩放中心精准对准活动区域，同时最大化利用控件空间，所有活动像素都能显示：

private const int WIDTH = 1280;
private const int HEIGHT = 1024;
private const int MIN_X = 100;
private const int MAX_X = 200;
private const int MIN_Y = 100;
private const int MAX_Y = 200;
// 如果需要多次点击逐步放大，就加这个变量保存当前缩放比例
private double _currentScale = 1.0;

public MainWindow() 
{ 
    InitializeComponent(); 
    byte[] image = new byte[WIDTH * HEIGHT]; 
    for (int y = MIN_Y; y <= MAX_Y; y++) 
        for (int x = MIN_X; x <= MAX_X; x++) 
            image[y * WIDTH + x] = byte.MaxValue; 
    TheImage.Source = BitmapSource.Create(WIDTH, HEIGHT, 96.0, 96.0, PixelFormats.Gray8, null, image, WIDTH); 
}

private void Button_Click(object sender, RoutedEventArgs e)
{
    // 1. 计算活动区域的实际像素尺寸
    int activeWidth = MAX_X - MIN_X;
    int activeHeight = MAX_Y - MIN_Y;

    // 2. 获取Image控件的实际显示尺寸（视口大小）
    double viewportWidth = TheImage.ActualWidth;
    double viewportHeight = TheImage.ActualHeight;

    // 3. 计算最大允许的缩放因子——保证活动区域完全放入视口，保持宽高比
    double maxScaleX = viewportWidth / activeWidth;
    double maxScaleY = viewportHeight / activeHeight;
    double targetScale = Math.Min(maxScaleX, maxScaleY);

    // 如果是逐步放大（不是一次到最大），就用下面的逻辑替换上面的targetScale
    // targetScale = Math.Min(_currentScale * 1.5, Math.Min(maxScaleX, maxScaleY));
    // _currentScale = targetScale;

    // 4. 计算活动区域在原始图像中的中心像素坐标
    double activeCenterX = (MIN_X + MAX_X) / 2.0;
    double activeCenterY = (MIN_Y + MAX_Y) / 2.0;

    // 5. 把原始图像的中心坐标转换为Image控件内的坐标位置（适配控件尺寸）
    double controlCenterX = activeCenterX * viewportWidth / WIDTH;
    double controlCenterY = activeCenterY * viewportHeight / HEIGHT;

    // 6. 创建变换矩阵，围绕活动区域在控件内的中心进行缩放
    Matrix matrix = Matrix.Identity;
    matrix.ScaleAt(targetScale, targetScale, controlCenterX, controlCenterY);

    TheImage.RenderTransform = new MatrixTransform(matrix);
}

关键逻辑说明 #

• 缩放因子适配控件尺寸：用控件的实际宽高除以活动区域的宽高，取最小值作为最大缩放比例，确保活动区域完全显示在控件内，不会被裁剪。
• 缩放中心精准转换：把活动区域在原始图像的中心，按控件与原始图像的尺寸比例转换为控件内的坐标，这样缩放时就会围绕活动区域的中心放大，保证放大后区域居中。
• 可选逐步放大：如果不想一次放大到最大，就启用注释里的逐步放大逻辑，每次点击放大1.5倍，直到达到最大允许比例。

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