Image Animation with a Button WPF - wpf

Question

I have an image within a button, I've wrote an animation that leads to Grow or Shrink When IsMouseOver Occurs, However I dont want the button itself Grows or Shrinks but the Image within the Button has to Grow or Shrink. Do you have any idea? I am all yours.
here is my .XAML
<Button Margin="355,0,0,0" Width="100" Height="300" Click="Button_Click_1">
<Image Source="img/blue.jpg" />
<Button.Style>
<Style TargetType="Button">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ThicknessAnimation Duration="0:0:0.250" To="0"
Storyboard.TargetProperty="BorderThickness" />
<DoubleAnimation Duration="0:0:0.350" To="320"
Storyboard.TargetProperty="Height" />
<DoubleAnimation Duration="0:0:0.350" To="120"
Storyboard.TargetProperty="Width" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ThicknessAnimation Duration="0:0:0.250" To="0"
Storyboard.TargetProperty="BorderThickness" />
<DoubleAnimation Duration="0:0:0.550" To="300"
Storyboard.TargetProperty="Height" />
<DoubleAnimation Duration="0:0:0.550" To="100"
Storyboard.TargetProperty="Width" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>

Answer 1

You can simply apply the Style to the Image instead of the Button.
<Button ...>
<Image ...>
<Image.Style>
<Style TargetType="Image">
<Style.Triggers>
<!-- You get the idea -->
Note that Image does not have a Border control, therefore you can't use the BorderThickness animation on the Image, you can instead apply this animation on the Button as you were doing before.
Also, your Image will require a Height in order to animate. Otherwise, you can use the From property on the DoubleAnimation like this:
<DoubleAnimation Duration="0:0:0.350" From="300" To="320"
Storyboard.TargetProperty="Height" />

Answer 2

You have to give Height and Width to Image, else will get an Exception. As Mike said can't use BorderThickness.
<Button>
<Image Source="Edit.png" Height="50" Width="50">
<Image.Style>
<Style TargetType="Image">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<!--<ThicknessAnimation Duration="0:0:0.250" To="0" Storyboard.TargetProperty="BorderThickness" />-->
<DoubleAnimation Duration="0:0:0.350" To="320" Storyboard.TargetProperty="Height" />
<DoubleAnimation Duration="0:0:0.350" To="120" Storyboard.TargetProperty="Width" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<!--<ThicknessAnimation Duration="0:0:0.250" To="0" Storyboard.TargetProperty="BorderThickness" />-->
<DoubleAnimation Duration="0:0:0.550" To="300" Storyboard.TargetProperty="Height" />
<DoubleAnimation Duration="0:0:0.550" To="100" Storyboard.TargetProperty="Width" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
</Button>

Answer 3

Or you could try this
<Button Margin="355,0,0,0" Width="100" Height="300" Click="Button_Click_1">
<Border Width="50" Height="150">
<Border.Style>
<Style TargetType="Border">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ThicknessAnimation Duration="0:0:0.250" To="0"
Storyboard.TargetProperty="BorderThickness" />
<DoubleAnimation Duration="0:0:0.350" To="320"
Storyboard.TargetProperty="Height" />
<DoubleAnimation Duration="0:0:0.350" To="120"
Storyboard.TargetProperty="Width" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ThicknessAnimation Duration="0:0:0.250" To="0"
Storyboard.TargetProperty="BorderThickness" />
<DoubleAnimation Duration="0:0:0.550" To="150"
Storyboard.TargetProperty="Height" />
<DoubleAnimation Duration="0:0:0.550" To="50"
Storyboard.TargetProperty="Width" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</Style.Triggers>
</Style>
</Border.Style>
<Image Source="MyImage.jpg" Stretch="UniformToFill"/>
</Border>
</Button>