Use relative binding to bind prop Window.ActualHeight to DoubleAnimation.To prop

Question

I try use relative binding and bind Window.ActualHeight property to DoubleAnimation.To property.

Relative binding doesn’t work but if I use binding by ElementName it work.

NOT WORK:

<Window xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
        x:Class="Sample.Window"
        x:Name="Shell"
        Title="Sample"
        Width = "525"
        Height = "350">

    <Canvas Height="400">
        <Ellipse Canvas.Left="80"
                 Canvas.Top="0"
                 Width="30"
                 Height="30"
                 Fill="LimeGreen">
            <Ellipse.Triggers>
                <EventTrigger RoutedEvent="Ellipse.Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetProperty="(Canvas.Top)"
                                             Duration="0:0:5"
                                             RepeatBehavior="Forever"
                                             AutoReverse="True"
                                             To="{Binding RelativeSource={RelativeSource AncestorType={x:Type Window}, Mode=FindAncestor}, Path=ActualHeight}" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Ellipse.Triggers>
        </Ellipse>
    </Canvas>
</Window>

THIS WORK:

 <DoubleAnimation Storyboard.TargetProperty="(Canvas.Top)"
                                         Duration="0:0:5"
                                         RepeatBehavior="Forever"
                                         AutoReverse="True"
                                         To="{Binding ElementName=Shell, Path=ActualHeight}"/>  

It is possible use relative binding to Window.ActualHeight property ?

EDITED:

I tested again on routed event Ellipse.Loaded animation not work but if I changed routed event to MouseEnter animation work. I posted all project.

sample download

Thank

Answer 1

Strangely if any frameworkElement traverses Visual Tree till ancestral window, in that case DoubleAnimation too is able to find ancestral window but if no element is referring to ancestral window, DoubleAnimation is not able to traverse up the Visual tree.

In your sample in case i simply traverse till window outside of animation, it works. Test this sample (traverse tree using Tag property of canvas)-

<Canvas Height="400"
        Tag="{Binding RelativeSource={RelativeSource Mode=FindAncestor, 
                                                  AncestorType=Window}}"> <-HERE
   <Ellipse Canvas.Left="80"
            Canvas.Top="0"
            Width="30"
            Height="30"
            Fill="LimeGreen">
      <Ellipse.Triggers>
         <EventTrigger RoutedEvent="Ellipse.Loaded">
             <BeginStoryboard>
                 <Storyboard>
                   <DoubleAnimation Storyboard.TargetProperty="(Canvas.Top)"
                                    Duration="0:0:5"
                                    RepeatBehavior="Forever"
                                    AutoReverse="True"
                                    To="{Binding RelativeSource={RelativeSource 
                                                 AncestorType={x:Type Window}, 
                                                 Mode=FindAncestor}, 
                                                 Path=ActualHeight}" />
                  </Storyboard>
              </BeginStoryboard>
          </EventTrigger>
       </Ellipse.Triggers>
    </Ellipse>
 </Canvas>