给定一个WPF Image控件，我怎么可以把它做大通过动画上的MouseEnter？ [英] Given a WPF Image control, how can I make it bigger through animation on MouseEnter?

问题描述

我以前曾经做过这个，但我已经完全忘了该怎么办呢。

I've done this once before but I have forgotten entirely how to do it.

如何能有这么一个图像可以在鼠标悬停在3秒内增长了一点（所以它的光滑）？

How can I have it so an Image can grow a bit within 3 seconds (so it's smooth) on MouseOver?

推荐答案

一个办法是处理与触发器的MouseEnter和鼠标离开事件，并用它们来缩放图像起来：

One way is to handle the MouseEnter and MouseLeave events with triggers, and use them to scale the image up:

<Image Width="100" Height="100" Source="...">
    <Image.RenderTransform>
        <ScaleTransform 
            x:Name="scale" 
            CenterX="50" 
            CenterY="50" 
            ScaleX="1" 
            ScaleY="1" />
    </Image.RenderTransform>

    <Image.Triggers>
        <EventTrigger RoutedEvent="Image.MouseEnter">
            <BeginStoryboard>
                <BeginStoryboard.Storyboard>
                    <Storyboard Duration="0:0:0.2">
                        <DoubleAnimation 
                            Storyboard.TargetName="scale" 
                            Storyboard.TargetProperty="ScaleX" 
                            To="1.5" />
                        <DoubleAnimation 
                            Storyboard.TargetName="scale" 
                            Storyboard.TargetProperty="ScaleY" 
                            To="1.5" />
                    </Storyboard>
                </BeginStoryboard.Storyboard>
            </BeginStoryboard>
        </EventTrigger>

        <EventTrigger RoutedEvent="Image.MouseLeave">
            <BeginStoryboard>
                <BeginStoryboard.Storyboard>
                    <Storyboard Duration="0:0:0.2">
                        <DoubleAnimation 
                            Storyboard.TargetName="scale" 
                            Storyboard.TargetProperty="ScaleX" 
                            To="1" />
                        <DoubleAnimation 
                            Storyboard.TargetName="scale" 
                            Storyboard.TargetProperty="ScaleY" 
                            To="1" />
                    </Storyboard>
                </BeginStoryboard.Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Image.Triggers>
</Image>

这篇关于给定一个WPF Image控件，我怎么可以把它做大通过动画上的MouseEnter？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！