Animating Image in MVVM - wpf

Question

I have a view of a viewmodel as defined below
<DataTemplate DataType="{x:Type local:TestViewModel}">
<Grid>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" >
<Button Name="btnStart" Command="{Binding Start}" Margin="5,0,5,0" />
<Button Name="btnCancel" Command="{Binding Cancel}" Margin="5,0,5,0" />
</StackPanel>
</Grid>
</DataTemplate>
So when i click on startButton , I want to start an animation i.e i want to move an arrow image from top of my screent to bottom.
I tried defining the image in grid, defining storyboard in style and attaching datatrigger to property .But this is causing the whole ui to expand rather than the animation moving over the screen.
I want the animation to move over my stackPanel. How do i do that?

Answer 1

Please try the next animation example(it used the TranslateTransform of the Image):
<Grid x:Name="AnimationAreaRootGrid">
<Image x:Name="Image" HorizontalAlignment="Left" VerticalAlignment="Top" Source="Res/Koala.jpg" Width="50" Height="50" RenderTransformOrigin="1.0,1.0">
<Image.RenderTransform>
<TranslateTransform />
</Image.RenderTransform>
</Image>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" VerticalAlignment="Bottom" >
<Button Name="btnStart" Content="Animate Down" Margin="5,0,5,0">
<Button.Resources>
<Storyboard x:Key="DownMovingStoryBoardKey" Storyboard.TargetName="Image">
<!--From - the animation start point-->
<!--From - the animation end point-->
<DoubleAnimation Storyboard.TargetProperty="(Control.RenderTransform).(TranslateTransform.Y)"
From="0"
To="250"
Duration="0:0:1" />
</Storyboard>
</Button.Resources>
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard Storyboard="{StaticResource DownMovingStoryBoardKey}"/>
</EventTrigger>
</Button.Triggers>
</Button>
<Button Name="btnCancel" Margin="5,0,5,0" Content="Animate Up">
<Button.Resources>
<Storyboard x:Key="UpMovingStoryBoardKey" Storyboard.TargetName="Image">
<!--From - the animation start point-->
<!--From - the animation end point-->
<DoubleAnimation Storyboard.TargetProperty="(Control.RenderTransform).(TranslateTransform.Y)"
From="250"
To="0"
Duration="0:0:1" />
</Storyboard>
</Button.Resources>
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard Storyboard="{StaticResource UpMovingStoryBoardKey}"/>
</EventTrigger>
</Button.Triggers>
</Button>
</StackPanel>
</Grid>
Explanations
A clicking on a btnStart will trigger the Down moving animation so the image will be moved down.
A clicking on a btnCancel will trigger the Up moving animation so the image will be moved up.
Regards.

Answer 2

I would use a Canvas and have your Image animated by changing Canvas.Left/Canvas.Top -values.
Canvas, unlike StackPanel, is not affected by it's children when it is doing it's own layout. The downside is that you would have to locate your StackPanel's coordinates, if the animation by the StackPanel coordinates is a requirement.
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" >
<Canvas>
<Image ... />
</Canvas>
<Button Name="btnStart" Command="{Binding Start}" Margin="5,0,5,0" ></Button>
<Button Name="btnCancel" Command="{Binding Cancel}" Margin="5,0,5,0"></Button>
</StackPanel>

Answer 3

How about using a TranslateTransform to animate your Image? Use it with the UIElement.RenderTransform property and you won't affect the layout of the rest of your view.
More infos on WPF transforms:
https://msdn.microsoft.com/en-us/library/ms750596(v=vs.100).aspx
General overview for WPF animations:
https://msdn.microsoft.com/en-us/library/ms752312(v=vs.100).aspx