Animate a WPF element in XAML using an attached property?

Question

I got my animation to work caused by a property in my ViewModel. If I set TargetProperty Width , then the code below really works when zooming in.

Then I wanted to actually move the image up and down. To do this, I added the Canvas component around my image to be able to animate based on the Canvas.Top property. Setting Canvas.Top on the image moves it to where I want.

However, if I set my StoryBoard.TargetProperty to Canvas.Top , I get an error:

Cannot resolve all property references in the Canvas.Top property path.

 <Style x:Key="LoadingImageAnimation" TargetType="{x:Type Image}"> <Style.Triggers> <DataTrigger Binding="{Binding IsLoading}" Value="True"> <DataTrigger.EnterActions> <BeginStoryboard> <Storyboard> <DoubleAnimation From="10" To="250" AutoReverse="True" Duration="0:0:30" Storyboard.TargetProperty="Canvas.Top"/> </Storyboard> </BeginStoryboard> </DataTrigger.EnterActions> </DataTrigger> </Style.Triggers> </Style> 

Is my approach completely off or just a matter of finding an Attached Property?

Answer 1

did some digging into the syntax of the property path . and the solution was actually simple. It was necessary to add parentheses "(Canvas.Top)".

The animation is not as smooth as we would like ... but at least it works now.