0

I have a sample application I am using to highlight this issue.

In essence, I want to create a button that will automatically scroll the content when the content is too large to fit in the button, in this case text. To achieve this, I am trying to add a content element that is too large to fit in the container, and then using a StoryBoard to animate a TranslateTransform, as illustrated in this code:

    <Button VerticalAlignment="Center" HorizontalAlignment="Center" Width="75">
        <TextBlock HorizontalAlignment="Left" Text="LOTS OF TEXT IN A LONG STRING">
            <TextBlock.RenderTransform>
                <TranslateTransform x:Name="MyTransform"/>
            </TextBlock.RenderTransform>
            <TextBlock.Triggers>
                <EventTrigger RoutedEvent="Window.Loaded">
                    <BeginStoryboard>
                        <Storyboard RepeatBehavior="Forever">
                            <DoubleAnimation From="0" To="-180" Storyboard.TargetName="MyTransform" Storyboard.TargetProperty="X" Duration="0:0:5"/>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </TextBlock.Triggers>
        </TextBlock>
    </Button>

If you run this in a blank project, you would only see the first 3 words being scrolled, with the rest of the text missing. As well, you would see the text outside of the element, and not hidden when it leaves the parent container's bounds.

How do I get the rest of the text to show, and to hide the text not in the bounds of the parent container?

4

1 回答 1

3

RenderTransform内容已经被剪辑的时候。这意味着您需要一个TextBlock不被父级裁剪的完整尺寸。这就是为什么我插入了一个Canvas不进行任何剪辑并且可以进行定位的原因。防止Button设置ClipToBounds为 true 之外的文本。

<Button Width="75" Height="25" ClipToBounds="True">
    <Canvas>
        <TextBlock Canvas.Top="-7" Canvas.Left="0" Text="LOTS OF TEXT IN A LONG STRING">
            <TextBlock.Triggers>
                <EventTrigger RoutedEvent="Window.Loaded">
                    <BeginStoryboard>
                        <Storyboard RepeatBehavior="Forever">
                            <DoubleAnimation From="50" To="-200" Storyboard.TargetProperty="(Canvas.Left)" Duration="0:0:5"/>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </TextBlock.Triggers>
        </TextBlock>                
    </Canvas>
</Button>

但是这个解决方案不会“当内容太大而无法放入按钮时自动滚动内容”。更糟糕的是布局系统被破坏(没有内容大小,没有对齐),您必须TextBlock手动定位并DoubleAnimation根据文本长度调整值。恐怕要使它真正自动且易于使用,您需要的不仅仅是一些 XAML 行。

于 2013-09-30T21:50:10.970 回答