[C#/WPF] Storyboard 클래스 : 이미지 슬라이드 쇼 보여주기

■ Storyboard 클래스를 사용해 이미지 슬라이드 쇼를 만드는 방법을 보여준다.

TestProject.zip

다운로드

▶ 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="Storyboard 클래스 : 이미지 슬라이드 쇼 보여주기"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid>
        <Image Name="image"
            Margin="10"
            Stretch="Uniform" />
    </Grid>
</Window>

 

▶ MainWindow.xaml.cs

using System;
using System.Collections.Generic;
using System.IO;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media.Imaging;
using System.Windows.Media.Animation;
using System.Windows.Threading;

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

        #region Field

        /// <summary>
        /// 비트맵 이미지 리스트
        /// </summary>
        private List<BitmapImage> bitmapImageList = new List<BitmapImage>();

        /// <summary>
        /// 비트맵 이미지 카운트
        /// </summary>
        private int bitmapImageCount = 0;

        /// <summary>
        /// 디스패처 타이머
        /// </summary>
        private DispatcherTimer dispatcherTimer = new DispatcherTimer();

        #endregion

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

        #region 생성자 - MainWindow()

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

            Loaded += Window_Loaded;
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Private
        //////////////////////////////////////////////////////////////////////////////// Event

        #region 윈도우 로드시 처리하기 - Window_Loaded(sender, e)

        /// <summary>
        /// 윈도우 로드시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            DirectoryInfo directoryInfo = new DirectoryInfo(Path.Combine(Environment.CurrentDirectory, "IMAGE"));

            foreach(FileInfo fileInfo in directoryInfo.GetFiles())
            {
                if((fileInfo.Extension.ToLower() == ".jpg") || (fileInfo.Extension.ToLower() == ".png"))
                {
                    this.bitmapImageList.Add(new BitmapImage(new Uri(fileInfo.FullName)));
                }
            }

            if(this.bitmapImageList.Count > 0)
            {
                this.image.Source = this.bitmapImageList[0];

                this.dispatcherTimer.Interval = TimeSpan.FromSeconds(3);

                this.dispatcherTimer.Tick += dispatcherTimer_Tick;

                this.dispatcherTimer.Start();
            }
        }

        #endregion
        #region 디스패처 타이머 틱 처리하기 - dispatcherTimer_Tick(sender, e)

        /// <summary>
        /// 디스패처 타이머 틱 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void dispatcherTimer_Tick(object sender, EventArgs e)
        {
            this.bitmapImageCount = (this.bitmapImageCount + 1) % this.bitmapImageList.Count;

            ShowNextImage(this.image);
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////// Function

        #region 다음 이미지 표시하기 - ShowNextImage(image)

        /// <summary>
        /// 다음 이미지 표시하기
        /// </summary>
        /// <param name="image">이미지</param>
        private void ShowNextImage(Image image)
        {
            const double TRANSITION_TIME = 0.9;

            Storyboard storyboard = new Storyboard();

            #region 기존 이미지를 사라지게 한다.

            DoubleAnimation fadeOutDoubleAnimation = new DoubleAnimation
            (
                1.0,
                0.0,
                TimeSpan.FromSeconds(TRANSITION_TIME)
            );

            fadeOutDoubleAnimation.BeginTime = TimeSpan.FromSeconds(0);

            Storyboard.SetTarget(fadeOutDoubleAnimation, image);

            Storyboard.SetTargetProperty(fadeOutDoubleAnimation, new PropertyPath(Image.OpacityProperty));

            storyboard.Children.Add(fadeOutDoubleAnimation);

            #endregion
            #region 다음 이미지를 이미지 엘리먼트 소스에 설정한다.

            ObjectAnimationUsingKeyFrames objectAnimationUsingKeyFrames = new ObjectAnimationUsingKeyFrames();

            objectAnimationUsingKeyFrames.BeginTime = TimeSpan.FromSeconds(TRANSITION_TIME);

            DiscreteObjectKeyFrame discreteObjectKeyFrame = new DiscreteObjectKeyFrame
            (
                this.bitmapImageList[this.bitmapImageCount],
                TimeSpan.Zero
            );

            objectAnimationUsingKeyFrames.KeyFrames.Add(discreteObjectKeyFrame);

            Storyboard.SetTarget(objectAnimationUsingKeyFrames, image);

            Storyboard.SetTargetProperty(objectAnimationUsingKeyFrames, new PropertyPath(Image.SourceProperty));

            storyboard.Children.Add(objectAnimationUsingKeyFrames);

            #endregion
            #region 다음 이미지가 나타나게 한다.

            DoubleAnimation fadeInDoubleAnimation = new DoubleAnimation
            (
                0.0,
                1.0,
                TimeSpan.FromSeconds(TRANSITION_TIME)
            );

            fadeInDoubleAnimation.BeginTime = TimeSpan.FromSeconds(TRANSITION_TIME);

            Storyboard.SetTarget(fadeInDoubleAnimation, image);

            Storyboard.SetTargetProperty(fadeInDoubleAnimation, new PropertyPath(Image.OpacityProperty));

            storyboard.Children.Add(fadeInDoubleAnimation);

            #endregion

            storyboard.Begin(image);
        }

        #endregion
    }
}