WPF中如何修改Canvas画布尺寸且不缩放内部图片

问题根因 #

你当前的代码存在3个直接导致图片随Canvas缩放的逻辑错误：

• Image控件的Width、Height和Canvas绑定了同一个尺寸数据源，Canvas尺寸变更时会直接强制Image同步修改宽高，即使设置了Stretch="None"也无法避免尺寸被强制改写。
• 缩放变换ScaleTransform被赋值给了Canvas的LayoutTransform属性，该变换会在布局计算阶段生效，Canvas下所有子元素都会被纳入缩放范围，Canvas尺寸、缩放参数变动都会连带缩放内部所有内容。
• Canvas面板不支持子元素的HorizontalAlignment、VerticalAlignment属性，你写的居中对齐逻辑实际不生效，图片默认固定在Canvas左上角坐标(0,0)位置。

修复方案 #

核心逻辑是彻底解耦Canvas尺寸和内部Image的尺寸、变换逻辑，具体调整如下：

• 拆分尺寸绑定属性：Canvas的宽高绑定独立的画布尺寸属性，Image的宽高直接绑定图片源的原生像素尺寸，二者不要共用同一个属性值。
• 移除Canvas上的LayoutTransform，所有针对图片的缩放变换直接绑定到Image的RenderTransform属性上，RenderTransform只在元素渲染阶段生效，不会影响布局计算，也不会被Canvas的尺寸变动影响。
• 图片居中通过Canvas的附加属性Canvas.Left、Canvas.Top实现，不要使用水平/垂直对齐属性，居中偏移量通过简单的值转换器计算即可。
• 保留ClipToBounds="True"属性，确保Canvas尺寸小于图片尺寸时，超出范围的图片内容被正常裁剪不溢出。

修正后代码示例 #

首先实现一个简单的居中偏移转换器，用来计算图片在Canvas中的居中坐标：

using System;
using System.Globalization;
using System.Windows.Data;

public class CenterOffsetConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value is double containerSize && parameter is double itemSize)
        {
            return (containerSize - itemSize) / 2;
        }
        return 0d;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotSupportedException();
    }
}

在窗口/控件资源中注册转换器后，即可使用如下XAML代码：

<Canvas ClipToBounds="True" Name="ImageDropShadowThumbnail"
        Height="{Binding CanvasHeight}"
        Width="{Binding CanvasWidth}">
    <Image Source="{Binding ImagePath}"
           Stretch="None"
           Width="{Binding ImageOriginalWidth}"
           Height="{Binding ImageOriginalHeight}">
        <Canvas.Left>
            <Binding Path="ActualWidth"
                     ElementName="ImageDropShadowThumbnail"
                     Converter="{StaticResource CenterOffsetConverter}"
                     ConverterParameter="{Binding ImageOriginalWidth}"/>
        </Canvas.Left>
        <Canvas.Top>
            <Binding Path="ActualHeight"
                     ElementName="ImageDropShadowThumbnail"
                     Converter="{StaticResource CenterOffsetConverter}"
                     ConverterParameter="{Binding ImageOriginalHeight}"/>
        </Canvas.Top>
        <Image.RenderTransform>
            <ScaleTransform
                ScaleX="{Binding Value, ElementName=ScaleXSlider}"
                ScaleY="{Binding Value, ElementName=ScaleYSlider}"
                CenterX="{Binding ImageOriginalWidth}"
                CenterY="{Binding ImageOriginalHeight}"/>
        </Image.RenderTransform>
        <Image.Effect>
            <DropShadowEffect
                BlurRadius="{Binding Value, ElementName=BlurRadiusSlider}"
                Direction="{Binding Value, ElementName=DirectionSlider}"
                Opacity="{Binding Value, ElementName=OpacitySlider}"
                ShadowDepth="{Binding Value, ElementName=ShadowDepthSlider}"/>
        </Image.Effect>
    </Image>
</Canvas>

补充说明 #

• 如果不需要滑块控制图片缩放，直接删除Image.RenderTransform节点即可，此时无论Canvas尺寸如何修改，图片都会保持原生尺寸居中显示，不会产生任何缩放效果。
• 不要给Canvas设置任何LayoutTransform、RenderTransform，所有针对图片的效果、变换全部直接作用在Image元素本身，避免画布变动影响图片渲染。

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