ClipToBounds 和 TranslateTransform答案

【问题标题】：ClipToBounds and TranslateTransformClipToBounds 和 TranslateTransform
【发布时间】：2026-01-28 17:20:06
【问题描述】：

我从右到左平滑地移动文本。对于运动，我使用 TranslateTransform。滚动时应显示出格的文本的右侧部分。但它在网格的右边缘被切断（剪辑）。即使向左移动也不会恢复。剪不出来怎么办？

    <Grid HorizontalAlignment="Left" Height="100" Width="180" VerticalAlignment="Top">
        <Label Content="Test Text" HorizontalAlignment="Left"  VerticalAlignment="Top" FontSize="72" RenderTransformOrigin="0.5,0.5">
            <Label.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform/>
                    <TranslateTransform X="-60"/>
                </TransformGroup>
            </Label.RenderTransform>
        </Label>
    </Grid>

【问题讨论】：

标签： wpf text scroll

【解决方案1】：

我的决定。完全删除Grid 并替换为Canvas。

回复@Erti-Chris Eelmaa 让我做出了正确的决定。但在我的情况下，这是一个不可能的建议。由于 Grid Row 的位置与 Canvas 中的位置不对应。 HorizontalAlignment="Left" VerticalAlignment="Top" 代表我替换为画布中的绝对位置的标签。

TranslateTransform我决定不使用了。并使用改变属性 Canvas.Left 的动画。

在 Canvas 的属性中，您必须启用 ClipToBounds = "True" 才能正确剪辑。

<Canvas  ClipToBounds="True">
       <Label x:Name="text_area" Content="Test Text"  Canvas.Left="0" Canvas.Top="0" FontSize="72">
</Canvas>

动画辅助函数：

ScrollText(text_area,-60,1000,30);


            public static void ScrollText(FrameworkElement c, double to, int wait_msec, int msec_perpixel)
            {
                DoubleAnimation animation = new DoubleAnimation
                {
                    AutoReverse = true,
                    BeginTime = new TimeSpan(0, 0, 0, 0, wait_msec),
                    To = to,
                    Duration = new Duration(new TimeSpan(0, 0, 0, 0, (int)Math.Abs(to) * msec_perpixel)),
                };


                c.BeginAnimation(Canvas.LeftProperty, animation);
            }

【讨论】：

【解决方案2】：

将 Label 元素包裹到 Canvas 中，如：

<Grid HorizontalAlignment="Left" Height="100" Width="180" VerticalAlignment="Top">
  <Canvas>
    <Label Content="Test Text" HorizontalAlignment="Left"  VerticalAlignment="Top" FontSize="72" RenderTransformOrigin="0.5,0.5">
        <Label.RenderTransform>
            <TransformGroup>
                <ScaleTransform/>
                <SkewTransform/>
                <RotateTransform/>
                <TranslateTransform X="-60"/>
            </TransformGroup>
        </Label.RenderTransform>
    </Label>
    </Canvas>
</Grid>

这将停止发生任何剪辑。

【讨论】：