给定WPF图像控件，如何通过MouseEnter上的动画使其更大？

Question

我以前做过这个，但我完全忘记了怎么做。

我怎样才能拥有它，以便ImageO可以在3秒内增长一点（所以它很流畅）？

Answer 1

一种方法是使用触发器处理MouseEnter和MouseLeave事件，并使用它们来缩放图像：

<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>