How can I make an image grow in size (give the illusion of choice) through WPF animation?

Question

I am new to WPF and even new to animation in WPF. I know there are storyboards, etc. But I'm looking for a specific effect, so I can work from there and mess with it.

Can someone just give me a simple example about image control MouseDown (because there is no Click event in this control in WPF) makes the image bigger thanks to beautiful animation?

Thanks bros.

Answer 1

The following will scale the image relative to its current size, and not change the absolute values. It may be more flexible.

<Page xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation' xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'> <Image x:Name="MyImage" Source="c:\myImage.jpg" Width="250" Height="250"> <Image.RenderTransform> <ScaleTransform x:Name="ImageScale" ScaleX="1" ScaleY="1" RenderTransformOrigin="0.5, 0.5"/> </Image.RenderTransform> <Image.Triggers> <EventTrigger RoutedEvent="Image.MouseDown"> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetName="ImageScale" Storyboard.TargetProperty="(ScaleTransform.ScaleX)" To="1.5" Duration="0:0:0.25" AutoReverse="True"/> <DoubleAnimation Storyboard.TargetName="ImageScale" Storyboard.TargetProperty="(ScaleTransform.ScaleY)" To="1.5" Duration="0:0:0.25" AutoReverse="True"/> </Storyboard> </BeginStoryboard> </EventTrigger> </Image.Triggers> </Image> </Page> 

Answer 2

Here is an example that does what I think you want:

 <Window x:Class="WpfApplication.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Window1" Height="600" Width="600"> <Window.Resources> <Storyboard x:Key="ScaleImageStoryboard"> <DoubleAnimation Duration="0:0:0.5" From="300" To="400" Storyboard.TargetName="Image" Storyboard.TargetProperty="Height"/> <DoubleAnimation Duration="0:0:0.5" From="300" To="400" Storyboard.TargetName="Image" Storyboard.TargetProperty="Width"/> </Storyboard> </Window.Resources> <Grid> <Image Name="Image" Source="C:\Users\Public\Pictures\Sample Pictures\Desert.jpg" Stretch="Fill" Width="300" Height="300"> <Image.Triggers> <EventTrigger RoutedEvent="Image.MouseDown"> <BeginStoryboard Storyboard="{StaticResource ScaleImageStoryboard}"/> </EventTrigger> </Image.Triggers> </Image> </Grid> </Window> 

Here the image starts with 300x300 px. When the Image.MouseDown event is fired, the trigger starts a storyboard that resizes the image to 400x400 for half the second period.

However, if you need an effect that temporarily affects the size of the image and does not affect the layout, you should use:

 <Window x:Class="WpfApplication.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Window1" Height="600" Width="600"> <Window.Resources> <Storyboard x:Key="ScaleImageStoryboard"> <DoubleAnimation Duration="0:0:0.2" From="1" To="1.2" AutoReverse="True" Storyboard.TargetName="ScaleImage" Storyboard.TargetProperty="ScaleX"/> <DoubleAnimation Duration="0:0:0.2" From="1" To="1.2" AutoReverse="True" Storyboard.TargetName="ScaleImage" Storyboard.TargetProperty="ScaleY"/> </Storyboard> </Window.Resources> <Grid> <Image Name="Image" Source="C:\Users\Public\Pictures\Sample Pictures\Desert.jpg" Stretch="Fill" Width="300" Height="300" RenderTransformOrigin="0.5, 0.5"> <Image.RenderTransform> <ScaleTransform x:Name="ScaleImage"/> </Image.RenderTransform> <Image.Triggers> <EventTrigger RoutedEvent="Image.MouseDown"> <BeginStoryboard Storyboard="{StaticResource ScaleImageStoryboard}"/> </EventTrigger> </Image.Triggers> </Image> </Grid> </Window>