How can I make an Image grow in size (give the illusion of selection) through a WPF animation?

Question

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

Can anyone just give me a simple example about on Image control MouseDown (because there is no Click event in this control in WPF) makes the image bigger through a nifty looking animation?

Thanks bros.

Answer 1

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 off at 300x300 px. When the Image.MouseDown event is fired the Trigger begins the storyboard which changes the image size to 400x400 over a half second period.

However, if you wanted an effect that just affected the size of the image temporarily and didn't influence layout, you would 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>

Answer 2

The following will scale the image relative to it's current size, rather than changing the absolute values. This might be more flexible.

<Page xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation' xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'&gt;
  <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>