0

我正在尝试创建一个自动滚动文本块。

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

<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个问题：

  • 文本应向左滚动到最后。现在它停在某个点
  • 文本不应穿过左侧的红色容器，不应穿过它。
  • 文本在某个点被切断，但我不知道为什么。
4

2 回答 2

1

首先，您需要向ClipToBounds="True"您添加 centralStackPanel以阻止文本在离开StackPanel.

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

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

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

更新>>>

好的，所以让文本向左移动的最简单的方法是实现一个简单的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 >>>

啊，我刚刚解决了...TextBlock被切断了，因为它不适合StackPanel其他...使StackPanel更大的文本出现。但是，答案是不要使用StackPanelandCanvas而是使用 a ......这显示了所有文本。

于 2013-09-10T10:05:44.470 回答
1

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

            <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>

编辑：边距动画怎么样，它工作正常：

<ThicknessAnimation
     Storyboard.TargetName="UserStatusLabel"
     Storyboard.TargetProperty="Margin"
     Duration="0:0:3" AutoReverse="True"  From="0,0,0,0" To="-200,0,0,0" />
于 2013-09-10T11:02:38.633 回答