[C#/WPF] Storyboard 엘리먼트 : 비동기 프로세스 동안 연속 애니메이션 표시하기

■ Storyboard 엘리먼트와 BackgroundWorker 객체를 사용해 비동기 프로세스 동안 연속 애니메이션을 표시하는 방법을 보여준다.

TestProject.zip

0.01MB

▶ MainWindow.xaml

<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="800"
    Height="600"
    Title="TestProject"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Window.Resources>
        <Storyboard x:Key="PulseStoryboardKey"
            AutoReverse="True" >
            <ColorAnimationUsingKeyFrames
                Storyboard.TargetName="ellipse"
                Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)"
                BeginTime="00:00:00">
                <SplineColorKeyFrame KeyTime="00:00:00.50" Value="Lime" />
            </ColorAnimationUsingKeyFrames>
            <ColorAnimationUsingKeyFrames
                Storyboard.TargetName="ellipse"
                Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)"
                BeginTime="00:00:00">
                <SplineColorKeyFrame KeyTime="00:00:00.50" Value="Green" />
            </ColorAnimationUsingKeyFrames>
        </Storyboard>
    </Window.Resources>
    <Grid Margin="10">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"    />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Ellipse Name="ellipse"
            Margin="10"
            Width="400"
            Height="400"
            Stroke="{x:Null}">
            <Ellipse.Fill>
                <RadialGradientBrush GradientOrigin="0.25 0.25">
                    <GradientStop Offset="0" Color="Red"  />
                    <GradientStop Offset="1" Color="Blue" />
                </RadialGradientBrush>
            </Ellipse.Fill>
        </Ellipse>
        <Button Name="startButton" Grid.Row="1"
            Margin="10"
            Width="100"
            Height="30"
            Content="Start" />
    </Grid>
</Window>

 

▶ MainWindow.xaml.cs

using System.ComponentModel;
using System.Threading;
using System.Windows;
using System.Windows.Media.Animation;

namespace TestProject
{
    /// <summary>
    /// 메인 윈도우
    /// </summary>
    public partial class MainWindow : Window
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Field
        ////////////////////////////////////////////////////////////////////////////////////////// Private

        #region Field

        /// <summary>
        /// 펄스 스토리보드
        /// </summary>
        private Storyboard pulseStoryboard;

        /// <summary>
        /// 백그라운드 작업자
        /// </summary>
        private BackgroundWorker worker;

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - MainWindow()

        /// <summary>
        /// 생성자
        /// </summary>
        public MainWindow()
        {
            InitializeComponent();

            this.pulseStoryboard = Resources["PulseStoryboardKey"] as Storyboard;

            this.pulseStoryboard.RepeatBehavior = RepeatBehavior.Forever;

            this.worker = new BackgroundWorker();

            this.startButton.Click         += startButton_Click;
            this.worker.DoWork             += worker_DoWork;
            this.worker.RunWorkerCompleted += worker_RunWorkerCompleted;
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Private

        #region Start 버튼 클릭시 처리하기 - startButton_Click(sender, e)

        /// <summary>
        /// Start 버튼 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void startButton_Click(object sender, RoutedEventArgs e)
        {
            this.pulseStoryboard.Begin(this, true);

            this.worker.RunWorkerAsync();

            this.startButton.IsEnabled = false;
        }

        #endregion
        #region 백그라운자 작업자 작업시 처리하기 - worker_DoWork(sender, e)

        /// <summary>
        /// 백그라운자 작업자 작업시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void worker_DoWork(object sender, DoWorkEventArgs e)
        {
            for(int i = 1; i <= 50; i++)
            {
                Thread.Sleep(100);
            }
        }

        #endregion
        #region 백그라운자 작업자 작업 완료시 처리하기 - worker_RunWorkerCompleted(sender, e)

        /// <summary>
        /// 백그라운자 작업자 작업 완료시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void worker_RunWorkerCompleted(object sender, RunWorkerCompletedEventArgs e)
        {
            this.startButton.IsEnabled = true;

            this.pulseStoryboard.Stop(this);
        }

        #endregion
    }
}