WPF Image控件鼠标悬停放大图片且保持180*180尺寸的最简实现

Hey, here's the simplest approach to get the effect you need: keeping your Image control locked at 180×180 while zooming the inner image when the mouse hovers over it. We'll use a Style with a trigger and ScaleTransform to make this happen cleanly:

<Image Height="180" Width="180" Source="{Binding Result}" Grid.Column="1">
    <Image.Style>
        <Style TargetType="Image">
            <!-- 设置缩放原点为图片中心，避免放大时偏移 -->
            <Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>
            <!-- 默认状态：图片不缩放 -->
            <Setter Property="RenderTransform">
                <Setter.Value>
                    <ScaleTransform ScaleX="1" ScaleY="1"/>
                </Setter.Value>
            </Setter>
            <!-- 鼠标悬停触发缩放 -->
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="RenderTransform">
                        <Setter.Value>
                            <!-- 这里的ScaleX/Y值可以调整，1.5代表放大50% -->
                            <ScaleTransform ScaleX="1.5" ScaleY="1.5"/>
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Image.Style>
</Image>

关键细节说明： #

• RenderTransformOrigin="0.5,0.5"：把缩放的原点设置为图片的中心，这样放大时图片会从中间向外扩张，不会偏移到控件的角落
• ScaleTransform：通过调整ScaleX和ScaleY的值控制放大比例（大于1就是放大，小于1是缩小）
• 控件本身的Height和Width保持180不变，放大后超出控件边界的图片部分会被自动裁剪，完美符合你的需求

可选优化（平滑过渡）： #

如果想要更流畅的放大效果，可以给触发器添加动画，替换上面的Trigger内容即可：

<Trigger Property="IsMouseOver" Value="True">
    <Trigger.EnterActions>
        <BeginStoryboard>
            <Storyboard>
                <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleX" To="1.5" Duration="0:0:0.2"/>
                <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleY" To="1.5" Duration="0:0:0.2"/>
            </Storyboard>
        </BeginStoryboard>
    </Trigger.EnterActions>
    <Trigger.ExitActions>
        <BeginStoryboard>
            <Storyboard>
                <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleX" To="1" Duration="0:0:0.2"/>
                <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleY" To="1" Duration="0:0:0.2"/>
            </Storyboard>
        </BeginStoryboard>
    </Trigger.ExitActions>
</Trigger>

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