Animating WPF element in XAML using attached property?

Question

I got my animation to work triggered by a property in my ViewModel. If I set my TargetProperty to Width, the below code actually works in growing the image.

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

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

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

<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 totally off, or just a matter of finding the Attached Property?

Answer 1

did some digging around on Property Path Syntax. and the solution was actually simple.. Needed to add parentheses "(Canvas.Top)".

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