WPF动画位置取决于窗口大小

Question

我想创建一个动画（如果可能的话，请从XAML），其中矩形对象从页面外部滑动（右图）并贴合。

动画应在任何大小的窗口上工作，因此，我这样创建这样的动画：

<Storyboard x:Key="SlidingIntro">
    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="icon">
        <EasingDoubleKeyFrame KeyTime="0" Value="{Binding ActualWidth, ElementName=AnimationCanvas}"/>
        <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
    </DoubleAnimationUsingKeyFrames>
</Storyboard>
<Page.Triggers>
    <EventTrigger RoutedEvent="FrameworkElement.Loaded">
        <BeginStoryboard Storyboard="{StaticResource SlidingIntro}"/>
    </EventTrigger>
</Page.Triggers>

用像这样初始化的矩形：

<Canvas x:Name="AnimationCanvas">
        <Rectangle Width="{Binding ActualWidth, ElementName=AnimationCanvas}" 
                       Height="{Binding ActualHeight, ElementName=AnimationCanvas}" 
                       Canvas.Top="{Binding ActualHeight, ElementName=AnimationCanvas, Converter={StaticResource Math}, ConverterParameter=-x/2}"
                       RenderTransformOrigin="0.5,0.5" >
            <Rectangle.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform/>
                    <TranslateTransform X="{Binding ActualWidth, ElementName=AnimationCanvas}"/>
                </TransformGroup>
            </Rectangle.RenderTransform>
        </Rectangle>
    </Canvas>

事实是矩形出现在其最终位置而没有动画的情况下。它就像第一个帧的值是0，因为绑定失败了……关于它被冻结的东西？

Answer 1

尝试这样的东西：

<Grid>
    <Rectangle Fill="Gray">
        <Rectangle.Style>
            <Style TargetType="Rectangle">
                <Style.Triggers>
                    <EventTrigger RoutedEvent="Loaded">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation To="0" Duration="0:0:1"
                                    Storyboard.TargetProperty="RenderTransform.X"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Style.Triggers>
            </Style>
        </Rectangle.Style>
        <Rectangle.RenderTransform>
            <TranslateTransform X="{Binding ActualWidth,
                                RelativeSource={RelativeSource AncestorType=Rectangle}}"/>
        </Rectangle.RenderTransform>
    </Rectangle>
</Grid>