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

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

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

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA