WPF实现上下滚动字幕效果

在 WPF 中，实现上下滚动字幕效果通常可以使用 TranslateTransform 和 DoubleAnimation 实现。具体步骤如下：

步骤一：创建外层容器

首先，我们需要创建一个外层容器，用于包含字幕元素。这个容器可以是一个 StackPanel 或 Canvas，根据项目实际需求而定。这里我们使用 StackPanel 作为示例。

<StackPanel Name="scrollingText" Width="300" Height="50"/>

步骤二：创建字幕元素

接着，在外层容器中创建一些字幕元素，例如 TextBlock。

<TextBlock Text="Hello, World!" FontSize="20"/>
<TextBlock Text="Lorem ipsum dolor sit amet consectetur adipisicing elit." FontSize="20"/>
<TextBlock Text="Sed egestas, nunc in dapibus ultrices, turpis ex maximus." FontSize="20"/>

步骤三：创建动画

现在我们需要创建一个动画，将字幕元素从上到下滚动。我们创建一个名为 Animate 的动画，将其添加到每个 TextBlock 元素的 RenderTransform 属性中。

<Storyboard x:Key="Animate">
    <DoubleAnimation From="0" To="-50" Duration="0:0:5" RepeatBehavior="Forever"/>
</Storyboard>

<TextBlock Text="Hello, World!" FontSize="20">
    <TextBlock.RenderTransform>
        <TranslateTransform x:Name="Translate" Y="0"/>
    </TextBlock.RenderTransform>
    <TextBlock.Triggers>
        <EventTrigger RoutedEvent="Loaded">
            <BeginStoryboard Storyboard="{StaticResource Animate}"/>
        </EventTrigger>
    </TextBlock.Triggers>
</TextBlock>

在动画中，我们将 From 属性设置为 0， To 属性设置为 -50，意味着元素会从初始位置向上移动 50 个像素。 Duration 定义动画的持续时间，这里设置为5秒钟。RepeatBehavior 使动画无限循环。在字幕元素的 RenderTransform 属性中，我们添加了一个 TranslateTransform，Y 属性初始化为 0，即元素初始位置。TextBlock.Triggers 将 EventTrigger 添加到元素被加载时启动动画。

步骤四：启动动画

最后一步是启动动画。我们使用 BeginStoryboard 动作在元素被加载时启动动画。这将使每个 TextBlock 元素逐个向上滚动。

<TextBlock Text="Hello, World!" FontSize="20">
    <TextBlock.RenderTransform>
        <TranslateTransform x:Name="Translate" Y="0"/>
    </TextBlock.RenderTransform>
    <TextBlock.Triggers>
        <EventTrigger RoutedEvent="Loaded">
            <BeginStoryboard Storyboard="{StaticResource Animate}"/>
        </EventTrigger>
    </TextBlock.Triggers>
</TextBlock>

以下是完整代码示例。

<StackPanel Name="scrollingText" Width="300" Height="50">
    <StackPanel.Resources>
        <Storyboard x:Key="Animate">
            <DoubleAnimation From="0" To="-50" Duration="0:0:5" RepeatBehavior="Forever"/>
        </Storyboard>
    </StackPanel.Resources>
    <TextBlock Text="Hello, World!" FontSize="20">
        <TextBlock.RenderTransform>
            <TranslateTransform x:Name="Translate" Y="0"/>
        </TextBlock.RenderTransform>
        <TextBlock.Triggers>
            <EventTrigger RoutedEvent="Loaded">
                <BeginStoryboard Storyboard="{StaticResource Animate}"/>
            </EventTrigger>
        </TextBlock.Triggers>
    </TextBlock>
    <TextBlock Text="Lorem ipsum dolor sit amet consectetur adipisicing elit." FontSize="20">
        <TextBlock.RenderTransform>
            <TranslateTransform x:Name="Translate" Y="0"/>
        </TextBlock.RenderTransform>
        <TextBlock.Triggers>
            <EventTrigger RoutedEvent="Loaded">
                <BeginStoryboard Storyboard="{StaticResource Animate}"/>
            </EventTrigger>
        </TextBlock.Triggers>
    </TextBlock>
    <TextBlock Text="Sed egestas, nunc in dapibus ultrices, turpis ex maximus." FontSize="20">
        <TextBlock.RenderTransform>
            <TranslateTransform x:Name="Translate" Y="0"/>
        </TextBlock.RenderTransform>
        <TextBlock.Triggers>
            <EventTrigger RoutedEvent="Loaded">
                <BeginStoryboard Storyboard="{StaticResource Animate}"/>
            </EventTrigger>
        </TextBlock.Triggers>
    </TextBlock>
</StackPanel>

实例说明

示例一：单行上下滚动字幕

创建一个新的 WPF 应用程序，并在 MainWindow.xaml 中添加以下代码。这里我们创建一个单行滚动字幕，只使用一个 TextBlock 元素。我们将 TextBlock 元素添加到一个 Grid 容器中，设置其 HorizontalAlignment 为 Center，这将使字幕水平居中。

<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="350" Width="525">
    <Grid>
        <TextBlock Text="This is a scrolling text" FontSize="24">
            <TextBlock.RenderTransform>
                <TransformGroup>
                    <TranslateTransform x:Name="TranslateTransform" Y="0"/>
                </TransformGroup>
            </TextBlock.RenderTransform>
            <TextBlock.Triggers>
                <EventTrigger RoutedEvent="Loaded">
                    <BeginStoryboard Name="Storyboard">
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetName="TranslateTransform" Storyboard.TargetProperty="Y" From="0.0" To="-30.0" Duration="0:0:5"/>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
                <EventTrigger RoutedEvent="FrameworkElement.SizeChanged">
                    <StopStoryboard BeginStoryboardName="Storyboard"/>
                    <BeginStoryboard Name="Storyboard">
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetName="TranslateTransform" Storyboard.TargetProperty="Y" From="0.0" To="{Binding ActualHeight, ElementName=text}" Duration="0:0:5"/>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </TextBlock.Triggers>
        </TextBlock>
    </Grid>
</Window>

示例二：多行上下滚动字幕

在这个示例中，我们将使用 ListBox 元素来创建多行滚动字幕。同样，我们将 ListBox 元素添加到 Grid 容器中，将其 HorizontalAlignment 设置为 Center，以使字幕水平居中。

<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="350" Width="525">
    <Grid>
        <ListBox Name="lstBox" FontSize="24" VerticalAlignment="Center"HorizontalAlignment="Center" Height="200" Width="400" ItemsSource="{Binding}">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding}" FontSize="24">
                        <TextBlock.RenderTransform>
                            <TransformGroup>
                                <TranslateTransform x:Name="TranslateTransform" Y="0"/>
                            </TransformGroup>
                        </TextBlock.RenderTransform>
                        <TextBlock.Triggers>
                            <EventTrigger RoutedEvent="Loaded">
                                <BeginStoryboard Name="Storyboard">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="TranslateTransform" Storyboard.TargetProperty="Y" From="0.0" To="-30.0" Duration="0:0:5"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger>
                            <EventTrigger RoutedEvent="FrameworkElement.SizeChanged">
                                <StopStoryboard BeginStoryboardName="Storyboard"/>
                                <BeginStoryboard Name="Storyboard">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="TranslateTransform" Storyboard.TargetProperty="Y" From="0.0" To="{Binding ActualHeight, ElementName=text}" Duration="0:0:5"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger>
                        </TextBlock.Triggers>
                    </TextBlock>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid>
</Window>

在代码中，我们绑定一个字符串数组到 ListBox 的 ItemsSource 属性上，这将使我们可以显示多行滚动字幕。在 ListBox 的 ItemTemplate 中，我们定义了 TextBlock 元素的样式和动画。在 FrameworkElement.SizeChanged 事件中，我们停止当前动画并重新启动动画来滚动新的元素。