C# WPF TextBlock의 Text를 오른쪽에서 왼쪽으로 애니메이션(BeginAnimation, 롤링) 하는방법

1. MainWindow.xaml 뷰에는 텍스트를 입력하는 TextBox와 TextBox에 입력된 텍스트가 바인딩되는 TextBlock이 있습니다.

<Window x:Class="WPF_TextBlocK_Rolling.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"
        xmlns:local="clr-namespace:WPF_TextBlocK_Rolling"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <StackPanel>
            <TextBox x:Name="inputText" Text="여기에 롤링 텍스트를 입력하세요."  FontSize="24" />
            <Canvas Grid.Row="1" x:Name="canvas">
                <TextBlock x:Name="rollingText" Text="{Binding Text, ElementName=inputText}" FontSize="24" Canvas.Left="0" SizeChanged="rollingText_SizeChanged"/>
            </Canvas>
        </StackPanel>
    </Grid>
</Window>

 

2.  MainWindow.xaml.cs 뷰의 비하인드 코드에 TextBlock의 크기가 Canvas 크기를 넘어가면 애니메이션이 시작되고, 넘어가지 않으면 중지되는 StartRollingAnimation 메소드를 작성합니다.

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media.Animation;

namespace WPF_TextBlocK_Rolling
{
    /// <summary>
    /// MainWindow.xaml에 대한 상호 작용 논리
    /// </summary>
    public partial class MainWindow : Window
    {
        // TextBlock의 원래 위치를 저장하는 변수
        private double rollingTextOriginalLeft;

        public MainWindow()
        {
            InitializeComponent();
            
            // TextBlock의 원래 위치를 저장
            rollingTextOriginalLeft = rollingText.ActualWidth;
        }

        private void StartRollingAnimation()
        {
            // TextBlock의 너비가 캔버스 너비보다 크면 애니메이션 시작
            if (rollingText.ActualWidth > canvas.ActualWidth)
            {
                DoubleAnimation rollingAnimation = new DoubleAnimation
                {
                    From = canvas.ActualWidth, // 시작 위치
                    To = -rollingText.ActualWidth, // 종료 위치
                    Duration = new Duration(TimeSpan.FromSeconds(30)), // 애니메이션 지속 시간
                    RepeatBehavior = RepeatBehavior.Forever // 반복 여부
                };

                rollingText.BeginAnimation(Canvas.LeftProperty, rollingAnimation);
            }
            else
            {
                // TextBlock의 너비가 캔버스 너비보다 작으면 애니메이션 중지
                rollingText.BeginAnimation(Canvas.LeftProperty, null);

                // TextBlock의 위치를 원래 위치로 조정하여 텍스트가 고정적으로 표시되도록 함
                Canvas.SetLeft(rollingText, rollingTextOriginalLeft);          
                
                // TextBlock을 가운데 정렬하려면 아래와 같이 코딩
                // double left = (canvas.ActualWidth - rollingText.ActualWidth) / 2;
                // Canvas.SetLeft(rollingText, left);
            }
        }

        private void rollingText_SizeChanged(object sender, SizeChangedEventArgs e)
        {
            // TextBlock의 크기가 변경될 때마다 애니메이션 재시작
            StartRollingAnimation();
        }
    }
}

 

시작 위치는 Canvas의 너비로 하고 종료 위치는 TextBlock의 너비에서 마이너스를 하면 오른쪽에서 왼쪽으로 애니메이션 됩니다.

 

왼쪽에서 오른쪽으로 애니메이션되게 하려면 시작위치는 0으로 하고, 종료 위치는 TextBlock의 너비로 하면 됩니다.

From = 0, // 시작 위치
To = rollingText.ActualWidth, // 종료 위치