wpf - 尊重父母/容器的动画控制

Question

我有一个控件，可以借助动画从底部移动到最终位置。我现在的问题是我想改变动画的行为，以便它尊重外部容器（DarkGray）。

橙色 Ractangle 应该只在白色背景上可见，而不是在深灰色网格上！

代码：

MainWindow.xaml：

<Grid Background="DarkGray">
    <Grid Margin="50"
          Background="White">
        <Rectangle x:Name="objectToMove"
                   VerticalAlignment="Bottom"
                   Fill="Orange"
                   Height="50"
                   Width="50"/>
        <Button Height="20"
                Width="40"
                Margin="20"
                Content="Move" 
                Click="Button_Click"
                VerticalAlignment="Top"/>
    </Grid>
</Grid>

MainWindow.xaml.cs：

private void Button_Click(object sender, RoutedEventArgs e)
{
    var target = objectToMove;

    var heightOfControl = target.ActualHeight;
    var trans = new TranslateTransform();
    target.RenderTransform = trans;

    var myAnimation = new DoubleAnimation(heightOfControl, 0, TimeSpan.FromMilliseconds(600));

    trans.BeginAnimation(TranslateTransform.YProperty, myAnimation);
}

当前的：

所需的解决方案：

Answer 1

为此使用ClipToBounds属性。

<Grid Margin="50"
      Background="White"
      ClipToBounds="True">