【WPF】文字列のテロップアニメーションを実装してみる【C#】

WPFにて文字列のテロップアニメーションを実装しました。
以下の２つのパターンを実装してみたので参考にしてください。

XAMLのみで実装する
コードビハインドも使って実装する（フォントサイズや文字数に応じて動作する）

後述しますが、まだ不完全なサンプルです。

スポンサードリンク

XAMLのみで実装する

XAMLに以下のコードを書くことでテロップが実装できます。

<Window
    x:Class="WpfApp1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Title="MainWindow"
    Width="300"
    Height="250"
    mc:Ignorable="d">
    <StackPanel>
        <Canvas
            Width="300"
            Height="100"
            ClipToBounds="True">
            <TextBlock
                x:Name="textBlock"
                FontSize="50"
                Text="スクロール　テキスト　サンプル">
                <TextBlock.Triggers>
                    <EventTrigger RoutedEvent="TextBlock.Loaded">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation
                                    AutoReverse="False"
                                    RepeatBehavior="Forever"
                                    Storyboard.TargetName="textBlock"
                                    Storyboard.TargetProperty="(Canvas.Left)"
                                    From="300.0"
                                    To="-600.0"
                                    Duration="0:0:5" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </TextBlock.Triggers>
            </TextBlock>
        </Canvas>
    </StackPanel>
</Window>

コードビハインドも使って実装する（フォントサイズや文字数に応じて動作する）

XAMLのみで実装したときに、アニメーションの動作領域などを調整するのが面倒だったので、フォントサイズや文字数に応じて動作領域を計算してくれるように変更しました。
XAMLでの書き方がわからなかったのでコードビハインドに記述しています。

XAML側のコード

<Window
    x:Class="WpfApp1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Title="MainWindow"
    Width="300"
    Height="250"
    mc:Ignorable="d">
    <StackPanel>
        <Canvas
            x:Name="canvas"
            Width="300"
            Height="100">
            <TextBlock
                x:Name="textBlock"
                FontSize="50"
                Text="スクロール　テキスト　サンプル" />
        </Canvas>
    </StackPanel>
</Window>

コードビハインド側のコード

このメソッドをコンストラクタで呼ぶと動作します。

private void InitializeAnimation()
{
    var startLeft = canvas.Width;

    // テキストのサイズを算出
    var typeface = new Typeface(textBlock.FontFamily, textBlock.FontStyle, textBlock.FontWeight, textBlock.FontStretch);
    var formattedText = new FormattedText(textBlock.Text, Thread.CurrentThread.CurrentCulture, textBlock.FlowDirection, typeface, textBlock.FontSize, textBlock.Foreground, VisualTreeHelper.GetDpi(textBlock).PixelsPerDip);
    var size = new Size(formattedText.Width, formattedText.Height);

    var animation = new DoubleAnimation()
    {
        From = canvas.Width,
        To = -size.Width,
        Duration = new Duration(TimeSpan.FromMilliseconds(10 * (size.Width + canvas.Width))),
        RepeatBehavior = RepeatBehavior.Forever,
    };
    Storyboard.SetTarget(animation, textBlock);
    Storyboard.SetTargetProperty(animation, new PropertyPath("(Canvas.Left)"));

    var storyboard = new Storyboard();
    storyboard.Children.Add(animation);
    storyboard.Begin();
}

最初に書きましたが、このサンプルはウィンドウサイズを変更してしまうとうまく動かなくなってしまいます。
ウィンドウサイズが変わっても正しく動作するサンプルは暇があったら実装してみます。

参考記事

以下の記事を参考にさせていただきました。

http://reehappy.com/c_002/