Clip UWP TextBlock as it moves out of its container
<p>I'm attempting to build an odometer like effect in UWP where when a number is incremented it slides up and dissappears while the incremented number appears by sliding up from the bottom (in a very similar mannor to how the <a href="http://github.hubspot.com/odometer/docs/welcome/" rel="nofollow">Odometer JS library</a> works).</p>

<p>I have the number contained in a text block, that is animating properly.</p>

<pre><code>&lt;DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
                               Storyboard.TargetName="Digit1"&gt;
    &lt;EasingDoubleKeyFrame KeyTime="0" Value="0" /&gt;
    &lt;EasingDoubleKeyFrame KeyTime="0:0:1" Value="-80" /&gt;
&lt;/DoubleAnimationUsingKeyFrames&gt;
</code></pre>

<p>Currently, when the number moves up it is still completely visible.  I want the <code>TextBlock</code> to be "clipped" to its containing <code>Canvas</code> so that it progressively dissappears as it moves outside the bounds of the <code>Canvas</code>.</p>

<p>I have tried both clipping the <code>TextBlock</code> to the <code>Canvas</code> and visa versa, neither of which had the desired effect.</p>

<pre><code>&lt;Canvas x:Name="Odometer"
        Clip="{Binding Clip, ElementName=Digit1}"&gt;
    &lt;TextBlock x:Name="Digit1"
               FontSize="100"
               Text="8"
               Canvas.Left="-104"
               Canvas.Top="-30"
               RenderTransformOrigin="0.5,0.5"
               Clip="{Binding Clip, ElementName=Odometer}"&gt;
        &lt;TextBlock.RenderTransform&gt; &lt;CompositeTransform /&gt; &lt;/TextBlock.RenderTransform&gt;
    &lt;/TextBlock&gt;
&lt;/Canvas&gt;
</code></pre>

<p>I do not need to use a <code>Canvas</code>, it's just what I was playing around with.  I'm still very new to UWP, so any help would be appreciated.</p>