Animate control with respecting parents/container <p>I have a control that I move with help of animation from the bottom to the final position. My problem is now that I want to change the behaviour of the animation, so that it respects the outer container (DarkGray).</p> <p>The orange Ractangle should only be visible on the white background and not on the darkgray Grid!</p> <p><strong>Code:</strong></p> <p>MainWindow.xaml:</p> <pre><code>&lt;Grid Background="DarkGray"&gt; &lt;Grid Margin="50" Background="White"&gt; &lt;Rectangle x:Name="objectToMove" VerticalAlignment="Bottom" Fill="Orange" Height="50" Width="50"/&gt; &lt;Button Height="20" Width="40" Margin="20" Content="Move" Click="Button_Click" VerticalAlignment="Top"/&gt; &lt;/Grid&gt; &lt;/Grid&gt; </code></pre> <p>MainWindow.xaml.cs:</p> <pre><code>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); } </code></pre> <p>Current:<br> <img src="https://i.stack.imgur.com/sNscV.png" alt="Snapshot of the running code snippets"></p> <p>Desired solution:<br> <img src="https://i.stack.imgur.com/69eVr.png" alt="Should be like this"></p>