创建水平自动滚动文本块时出现问题

本文关键字：问题 文本 水平 滚动 创建 | 更新日期: 2023-09-27 18:30:43

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

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

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

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

创建水平自动滚动文本块时出现问题

首先

，您需要将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" />

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

乌帕特>>>

好的，所以使文本向左移动的最简单方法是实现一个简单的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可显示更多文本。但是，答案是不要使用StackPanel，而是使用Canvas......这将显示所有文本。

问题是，使用渲染转换，您只会转换已渲染的内容，并且此时文本已被剪切。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>

编辑：边距动画呢，它的工作正常：

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