在UWP TextBlock移出其容器时剪切它

本文关键字：UWP TextBlock 移出 | 更新日期: 2023-09-27 18:02:32

我试图在UWP中建立一个类似里程表的效果，当一个数字递增时，它向上滑动并消失，而递增的数字从底部向上滑动出现(与odometer JS库的工作方式非常相似)。

我有一个数字包含在一个文本块，这是正确的动画

<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还很陌生，所以如果有任何帮助，我将不胜感激。

在UWP TextBlock移出其容器时剪切它

如果您引用的是UIElement。剪辑:

元素的裁剪几何。Windows运行时API中的Clip必须是RectangleGeometry。

所以，如果你想给canvas一个轮廓，你需要为你的canvas.clip指定一个RectangleGeometry，它取画布的实际大小的矩形。

您可以通过编程实现:

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>
相关文章：