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.
How can I have it so开发者_如何学Python an Image can grow a bit within 3 seconds (so it's smooth) on MouseOver?
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>
精彩评论