在 UWP TextBlock 移出其容器时对其进行剪辑

Question

我正在尝试在 UWP 中构建类似里程表的效果，当数字递增时，它向上滑动并消失，而递增的数字通过从底部向上滑动出现（与 Odometer JS library 有效）。

我有一个文本块中包含的数字，它正在正确设置动画。

<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 成为 "clipped"，以便它在移出 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>

在 UWP TextBlock 移出其容器时对其进行剪辑

Clip UWP TextBlock as it moves out of its container

c#

xaml

uwp

uwp-xaml