Question

我试图创建一个自动滚动文本块。

这是我到目前为止的代码：

<Window x:Class="WpfApplication1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="150" Width="400">
<Grid HorizontalAlignment="Stretch">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="50"></ColumnDefinition>
        <ColumnDefinition Width="*"></ColumnDefinition>
        <ColumnDefinition Width="50"></ColumnDefinition>
    </Grid.ColumnDefinitions>

    <StackPanel Background="Red" Grid.Column="0" />

    <StackPanel x:Name="UserContainer" Grid.Column="1">
        <TextBlock x:Name="UserStatusLabel" TextWrapping="NoWrap" VerticalAlignment="Top"><Run Language="nl-nl" Text="Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit."/>
        <TextBlock.RenderTransform>
          <TranslateTransform x:Name="translate" />
            </TextBlock.RenderTransform>
              <TextBlock.Triggers>
                <EventTrigger RoutedEvent="FrameworkElement.Loaded">
                    <BeginStoryboard>
                        <Storyboard RepeatBehavior="Forever">
                            <DoubleAnimation
                                From="{Binding ElementName=UserContainer, Path=Width}" To="-200"
                                Storyboard.TargetName="translate"
                                Storyboard.TargetProperty="X"
                                Duration="0:0:3"
                                AutoReverse="True" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </TextBlock.Triggers>
        </TextBlock>
    </StackPanel>
    <StackPanel Background="Blue" Grid.Column="2" />
</Grid>

但我有3个问题：

文本应向左滚动直至结束。现在它停在某一点
文字不应该穿过左边的红色容器，也不应该穿过它。
文字在某个时刻被切断，但我不知道为什么。

Answer 1

首先，您需要将ClipToBounds="True"添加到中央StackPanel，以阻止文本在离开StackPanel的边界后显示。

其次，正如您所说的那样，文字会停留在“特定距离”，因为您通过将DoubleAnimation设置为仅移至-200来告诉它。我们需要将其替换为StackPanel.ActualWidth属性的实际值：

<DoubleAnimation To="{Binding ActualWidth, ElementName=UserContainer}" 
    Storyboard.TargetName="translate" Storyboard.TargetProperty="X" Duration="0:0:3" 
    AutoReverse="True" />

但是，这会将文本移动到右边缘。我现在要把这个给你作为答案，如果我能想出一个简单的方法来扭转运动的方向，我会稍后回来编辑它。

UPADTE＆gt;＆gt;＆gt;

好的，让文本向左移动的最简单方法是实现一个简单的Converter：

public class AdditiveInverseDoubleConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value == null || value.GetType() != typeof(double) && targetType != typeof(double)) return false;
        return -(double)value;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value == null || value.GetType() != typeof(double) && targetType != typeof(double)) return false;
        return -(double)value;
    }
}

然后更改您的XAML：

<DoubleAnimation To="{Binding ActualWidth, ElementName=UserContainer, Converter={
    StaticResource AdditiveInverseDoubleConverter}}" Storyboard.TargetName="translate" 
    Storyboard.TargetProperty="X" Duration="0:0:3" AutoReverse="True" />

不要忘记添加XML命名空间：

xmlns:Converters="clr-namespace:WpfApplication1.Converters"

Resource：

<Window.Resources>
    <Converters:AdditiveInverseDoubleConverter x:Key="AdditiveInverseDoubleConverter" />
</Window.Resources>

更新2＆gt;＆gt;＆gt;

啊，我刚刚解决了...... TextBlock被切断了，因为它不适合StackPanel，否则...... StackPanel更大会使文字更多出现。但是，答案是不使用StackPanel并使用Canvas代替...这会显示文本的所有。

Answer 2

问题在于，使用渲染变换，您只会变换已渲染的内容，并且您的文本已经被剪切。 LayoutTransform忽略TranslateTransform，因此您无法在此处使用它，但如果您使用的是RotateTransform，则会看到其余文本出现。不确定如何使用渲染变换实现目标。

            <TextBlock.LayoutTransform>
                <RotateTransform  x:Name="translate" />
            </TextBlock.LayoutTransform>
            <TextBlock.Triggers>
                <EventTrigger RoutedEvent="FrameworkElement.Loaded">
                    <BeginStoryboard>
                        <Storyboard RepeatBehavior="Forever">
                            <DoubleAnimation
                            From="0" To="90"
                            Storyboard.TargetName="translate"
                            Storyboard.TargetProperty="Angle"
                            Duration="0:0:3"
                            AutoReverse="True" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </TextBlock.Triggers>

编辑： Margin动画怎么样，它的工作正常：

<ThicknessAnimation
     Storyboard.TargetName="UserStatusLabel"
     Storyboard.TargetProperty="Margin"
     Duration="0:0:3" AutoReverse="True"  From="0,0,0,0" To="-200,0,0,0" />

无法创建水平自动滚动文本块

2 个答案: