c# - 当 UWP TextBlock 移出其容器时对其进行剪辑

Question

我正在尝试在 UWP 中构建类似里程表的效果，当数字增加时，它会向上滑动并消失，而增加的数字则通过从底部向上滑动而出现(与 Odometer JS library 的工作方式非常相似) )。

我有一个文本 block 中包含的数字，该数字可以正确显示动画。

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

目前，当数字向上移动时，它仍然完全可见。我希望将 TextBlock“剪切”到其包含的 Canvas，以便它在移出 Canvas 边界时逐渐消失。

我尝试过将 TextBlock 剪切到 Canvas 上，反之亦然，但都没有达到预期的效果。

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

我不需要使用Canvas，这只是我正在玩的东西。我对 UWP 还很陌生，因此我们将不胜感激。

Answer 1

如果您引用UIElement.Clip :

The clipping geometry for UIElement.Clip in the Windows Runtime API must be a RectangleGeometry.

因此，如果您想为 canvas 提供轮廓，则需要为您的 canvas.clip 指定一个 RectangleGeometry，它需要 Canvas 实际大小的矩形。

您可以通过编程实现此目的:

private void Odometer_Loaded(object sender, RoutedEventArgs e)
{
    RectangleGeometry rectangle = new RectangleGeometry();
    rectangle.Rect = new Rect(0, 0, Odometer.ActualWidth, Odometer.ActualHeight);
    Odometer.Clip = rectangle;
}

并且不要忘记删除 xaml 中的剪辑:

<Canvas x:Name="Odometer" Loaded="Odometer_Loaded">
        <TextBlock x:Name="Digit1"
           FontSize="100"
           Text="8"
           Canvas.Left="104"
           Canvas.Top="10"
           RenderTransformOrigin="0.5,0.5">
                <TextBlock.RenderTransform>
                    <CompositeTransform />
                </TextBlock.RenderTransform>
        </TextBlock>
</Canvas>