如何在XAML中实现无间隙循环的文本左右滚动动画？

需求：让列表中的文本（name1、name2、name3、name4）向左循环滚动，循环衔接处无空白间隙，name1必须紧跟在name4之后，不能出现明显间隔。

当前实现的问题：滚动到末尾后会回到初始位置，出现空白间隙，无法实现无缝衔接。

当前XAML代码 #

<ListBox.ItemContainerStyle>
    <Style TargetType="ListBoxItem">
        <Setter Property="RenderTransform">
            <Setter.Value>
                <TranslateTransform/>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <EventTrigger RoutedEvent="Loaded">
                <EventTrigger.Actions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetProperty="RenderTransform.X" From="0" To="-150"  RepeatBehavior="Forever" Duration="0:0:5" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger.Actions>
            </EventTrigger>
        </Style.Triggers>
    </Style>
</ListBox.ItemContainerStyle>

<ListBox.ItemTemplate>
    <DataTemplate>
        <TextBlock x:Name="Listboxchild" Background="Yellow" Text="{Binding}" />
    </DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>

当前后台代码 #

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        DataContext = new ViewModel();
    }
}

public class ViewModel
{
    public ObservableCollection<Message> MessageCollection { get; set; } 
    public ViewModel()
    { 
        MessageCollection = new ObservableCollection<Message>();
        MessageCollection.Add (new Message() { MyName = "name1" });
        MessageCollection.Add (new Message() { MyName = "name2" });
        MessageCollection.Add (new Message() { MyName = "name3" });
        MessageCollection.Add (new Message() { MyName = "name4" });
    }
}
public class Message
{
    public string MyName { get; set; }
    public override string ToString()
    {
        return MyName;
    }
}

当前运行效果 #

解决方案：无缝滚动实现 #

要实现无缝循环滚动，核心是让内容在滚动到末尾时，复制一份相同内容紧跟其后，当滚动到原内容末尾时，复制内容恰好接上，再瞬间重置滚动位置，视觉上无间隙。

修改后的实现代码 #

1. 调整ViewModel，添加重复内容

public class ViewModel
{
    public ObservableCollection<Message> MessageCollection { get; set; } 
    public ViewModel()
    { 
        MessageCollection = new ObservableCollection<Message>();
        var originalItems = new List<Message>
        {
            new Message() { MyName = "name1" },
            new Message() { MyName = "name2" },
            new Message() { MyName = "name3" },
            new Message() { MyName = "name4" }
        };
        // 添加原内容+复制内容，为无缝衔接打基础
        foreach (var item in originalItems)
            MessageCollection.Add(item);
        foreach (var item in originalItems)
            MessageCollection.Add(item);
    }
}

2. 修改XAML动画与布局

<ListBox x:Name="ScrollListBox" ItemsSource="{Binding MessageCollection}" 
         HorizontalAlignment="Left" VerticalAlignment="Top"
         ScrollViewer.HorizontalScrollBarVisibility="Hidden"
         ScrollViewer.VerticalScrollBarVisibility="Hidden">
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <!-- 横向排列所有文本，确保滚动方向正确 -->
            <StackPanel Orientation="Horizontal" />
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
    <ListBox.ItemContainerStyle>
        <Style TargetType="ListBoxItem">
            <Setter Property="RenderTransform">
                <Setter.Value>
                    <TranslateTransform x:Name="ItemTransform"/>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <EventTrigger RoutedEvent="Loaded">
                    <BeginStoryboard>
                        <Storyboard x:Name="ScrollStoryboard">
                            <!-- 分阶段实现滚动+无缝重置 -->
                            <DoubleAnimationUsingKeyFrames 
                                Storyboard.TargetProperty="RenderTransform.X"
                                RepeatBehavior="Forever"
                                Duration="0:0:10">
                                <!-- 第一阶段：滚动到原内容末尾 -->
                                <LinearDoubleKeyFrame Value="0" KeyTime="0:0:0"/>
                                <LinearDoubleKeyFrame Value="-300" KeyTime="0:0:5"/>
                                <!-- 第二阶段：瞬间重置位置，视觉无感知 -->
                                <DiscreteDoubleKeyFrame Value="0" KeyTime="0:0:5"/>
                                <!-- 第三阶段：继续滚动复制的内容 -->
                                <LinearDoubleKeyFrame Value="-300" KeyTime="0:0:10"/>
                            </DoubleAnimationUsingKeyFrames>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Style.Triggers>
        </Style>
    </ListBox.ItemContainerStyle>

    <ListBox.ItemTemplate>
        <DataTemplate>
            <TextBlock Background="Yellow" Text="{Binding MyName}" Margin="5,0"/>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

关键说明 #

• 内容复制：将原列表内容复制一份追加到集合中，滚动到原内容末尾时，复制内容刚好接上，避免空白。
• 动画设计：使用DoubleAnimationUsingKeyFrames，在滚动到原内容宽度位置时，用DiscreteDoubleKeyFrame瞬间重置滚动位置，因复制内容与原内容一致，视觉上无跳变。
• 布局调整：设置ItemsPanel为横向StackPanel，确保所有文本在一行排列，保证滚动方向正确。

内容的提问来源于stack exchange，提问作者LSQ