MICROSOFT Archives - 90 중 4 번째 페이지

[C#/WPF] KeyTime 구조체 : Paced 정적 속성을 사용해 키 프레임 애니메이션 타이밍 제어하기

■ KeyTime 구조체의 Paced 정적 속성을 사용해 키 프레임 애니메이션의 타이밍을 제어하는 방법을 보여준다. ▶ 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>

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

▶ MainWindow.xaml.cs


using System;
using System.Windows;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

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

        #region 생성자 - MainWindow()

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

            #region 이동 변환을 생성한다.

            TranslateTransform translateTransform = new TranslateTransform();

            #endregion
            #region 사각형을 생성한다.

            Rectangle rectangle = new Rectangle();

            rectangle.Width           = 50;
            rectangle.Height          = 50;
            rectangle.Stroke          = Brushes.Black;
            rectangle.StrokeThickness = 5;
            rectangle.Fill            = Brushes.Orange;
            rectangle.RenderTransform = translateTransform;

            #endregion
            #region 이동 변환 애니메이션을 생성한다.

            DoubleAnimationUsingKeyFrames translateTransformAnimation = new DoubleAnimationUsingKeyFrames();

            translateTransformAnimation.Duration = TimeSpan.FromSeconds(10);

            translateTransformAnimation.KeyFrames.Add(new LinearDoubleKeyFrame(100, KeyTime.Paced));
            translateTransformAnimation.KeyFrames.Add(new LinearDoubleKeyFrame(200, KeyTime.Paced));
            translateTransformAnimation.KeyFrames.Add(new LinearDoubleKeyFrame(300, KeyTime.Paced));

            #endregion

            rectangle.Loaded += delegate(object sender, RoutedEventArgs e)
            {
                translateTransform.BeginAnimation(TranslateTransform.XProperty, translateTransformAnimation);
            };

            Content = rectangle;
        }

        #endregion
    }
}

using System;

using System.Windows;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public partial class MainWindow : Window

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

#region 이동 변환을 생성한다.

TranslateTransform translateTransform = new TranslateTransform();

#endregion

#region 사각형을 생성한다.

Rectangle rectangle = new Rectangle();

rectangle.Width = 50;

rectangle.Height = 50;

rectangle.Stroke = Brushes.Black;

rectangle.StrokeThickness = 5;

rectangle.Fill = Brushes.Orange;

rectangle.RenderTransform = translateTransform;

#endregion

#region 이동 변환 애니메이션을 생성한다.

DoubleAnimationUsingKeyFrames translateTransformAnimation = new DoubleAnimationUsingKeyFrames();

translateTransformAnimation.Duration = TimeSpan.FromSeconds(10);

translateTransformAnimation.KeyFrames.Add(new LinearDoubleKeyFrame(100, KeyTime.Paced));

translateTransformAnimation.KeyFrames.Add(new LinearDoubleKeyFrame(200, KeyTime.Paced));

translateTransformAnimation.KeyFrames.Add(new LinearDoubleKeyFrame(300, KeyTime.Paced));

#endregion

rectangle.Loaded += delegate(object sender, RoutedEventArgs e)

{

translateTransform.BeginAnimation(TranslateTransform.XProperty, translateTransformAnimation);

};

Content = rectangle;

}

#endregion

}

TestProject.zip

[C#/WPF] LinearDoubleKeyFrame 엘리먼트 : KeyTime 속성에서 Uniform 값을 사용해 키 프레임 애니메이션 타이밍 제어하기

■ LinearDoubleKeyFrame 엘리먼트의 KeyTime 속성에서 Uniform 값을 사용해 키 프레임 애니메이션의 타이밍을 제어하는 방법을 보여준다. ▶ 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">
    <Rectangle
        Width="50"
        Height="50"
        Stroke="Black"
        StrokeThickness="5"
        Fill="Red">
        <Rectangle.RenderTransform>
            <TranslateTransform x:Name="translateTransform" />
        </Rectangle.RenderTransform>
        <Rectangle.Triggers>
            <EventTrigger RoutedEvent="Rectangle.Loaded">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimationUsingKeyFrames
                            Storyboard.TargetName="translateTransform"
                            Storyboard.TargetProperty="X"
                            Duration="00:00:10">
                            <LinearDoubleKeyFrame KeyTime="Uniform" Value="100" />
                            <LinearDoubleKeyFrame KeyTime="Uniform" Value="200" />
                            <LinearDoubleKeyFrame KeyTime="Uniform" Value="300" />
                        </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Rectangle.Triggers>
    </Rectangle>
</Window>

<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">

<Rectangle

Width="50"

Height="50"

Stroke="Black"

StrokeThickness="5"

Fill="Red">

<Rectangle.RenderTransform>

</Rectangle.RenderTransform>

<Rectangle.Triggers>

<DoubleAnimationUsingKeyFrames

Storyboard.TargetName="translateTransform"

Storyboard.TargetProperty="X"

Duration="00:00:10">

</DoubleAnimationUsingKeyFrames>

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Rectangle.Triggers>

</Rectangle>

</Window>

TestProject.zip

[C#/WPF] KeyTime 구조체 : Uniform 정적 속성을 사용해 키 프레임 애니메이션 타이밍 제어하기

■ KeyTime 구조체의 Uniform 정적 속성을 사용해 키 프레임 애니메이션의 타이밍을 제어하는 방법을 보여준다. ▶ MainWnidow.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>

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

▶ MainWnidow.xaml.cs


using System;
using System.Windows;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

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

        #region 생성자 - MainWindow()

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

            #region 이동 변환을 생성한다.

            TranslateTransform translateTransform = new TranslateTransform();

            #endregion
            #region 사각형을 생성한다.

            Rectangle rectangle = new Rectangle();

            rectangle.Width           = 50;
            rectangle.Height          = 50;
            rectangle.StrokeThickness = 5;
            rectangle.Stroke          = Brushes.Black;
            rectangle.Fill            = Brushes.Red;
            rectangle.RenderTransform = translateTransform;

            #endregion
            #region 이동 변환 애니메이션을 생성한다.

            DoubleAnimationUsingKeyFrames translateTransformAnimation =    new DoubleAnimationUsingKeyFrames();

            translateTransformAnimation.Duration = TimeSpan.FromSeconds(10);

            translateTransformAnimation.KeyFrames.Add(new LinearDoubleKeyFrame(100, KeyTime.Uniform));
            translateTransformAnimation.KeyFrames.Add(new LinearDoubleKeyFrame(200, KeyTime.Uniform));
            translateTransformAnimation.KeyFrames.Add(new LinearDoubleKeyFrame(300, KeyTime.Uniform));

            #endregion

            rectangle.Loaded += delegate(object sender, RoutedEventArgs e)
            {
                translateTransform.BeginAnimation(TranslateTransform.XProperty, translateTransformAnimation);
            };

            Content = rectangle;
        }

        #endregion
    }
}

using System;

using System.Windows;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public partial class MainWindow : Window

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

#region 이동 변환을 생성한다.

TranslateTransform translateTransform = new TranslateTransform();

#endregion

#region 사각형을 생성한다.

Rectangle rectangle = new Rectangle();

rectangle.Width = 50;

rectangle.Height = 50;

rectangle.StrokeThickness = 5;

rectangle.Stroke = Brushes.Black;

rectangle.Fill = Brushes.Red;

rectangle.RenderTransform = translateTransform;

#endregion

#region 이동 변환 애니메이션을 생성한다.

DoubleAnimationUsingKeyFrames translateTransformAnimation = new DoubleAnimationUsingKeyFrames();

translateTransformAnimation.Duration = TimeSpan.FromSeconds(10);

translateTransformAnimation.KeyFrames.Add(new LinearDoubleKeyFrame(100, KeyTime.Uniform));

translateTransformAnimation.KeyFrames.Add(new LinearDoubleKeyFrame(200, KeyTime.Uniform));

translateTransformAnimation.KeyFrames.Add(new LinearDoubleKeyFrame(300, KeyTime.Uniform));

#endregion

rectangle.Loaded += delegate(object sender, RoutedEventArgs e)

{

translateTransform.BeginAnimation(TranslateTransform.XProperty, translateTransformAnimation);

};

Content = rectangle;

}

#endregion

}

TestProject.zip

[C#/WPF] LinearDoubleKeyFrame 엘리먼트 : KeyTime 속성에서 시간 비율을 사용해 키 프레임 애니메이션 타이밍 제어하기

■ LinearDoubleKeyFrame 엘리먼트의 KeyTime 속성에서 시간 비율을 사용해 키 프레임 애니메이션의 타이밍을 제어하는 방법을 보여준다. ▶ 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">
    <Rectangle
        Width="50"
        Height="50"
        Stroke="Black"
        StrokeThickness="5"
        Fill="Purple">
        <Rectangle.RenderTransform>
            <TranslateTransform x:Name="translateTransform" />
        </Rectangle.RenderTransform>
        <Rectangle.Triggers>
            <EventTrigger RoutedEvent="Rectangle.Loaded">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimationUsingKeyFrames
                            Storyboard.TargetName="translateTransform"
                            Storyboard.TargetProperty="X"
                            Duration="00:00:10">
                            <LinearDoubleKeyFrame KeyTime="30%"  Value="100" />
                            <LinearDoubleKeyFrame KeyTime="40%"  Value="300" />
                            <LinearDoubleKeyFrame KeyTime="100%" Value="500" />
                        </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Rectangle.Triggers>
    </Rectangle>
</Window>

<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">

<Rectangle

Width="50"

Height="50"

Stroke="Black"

StrokeThickness="5"

Fill="Purple">

<Rectangle.RenderTransform>

</Rectangle.RenderTransform>

<Rectangle.Triggers>

<DoubleAnimationUsingKeyFrames

Storyboard.TargetName="translateTransform"

Storyboard.TargetProperty="X"

Duration="00:00:10">

</DoubleAnimationUsingKeyFrames>

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Rectangle.Triggers>

</Rectangle>

</Window>

TestProject.zip

[C#/WPF] KeyTime 구조체 : FromPercent 정적 메소드를 사용해 키 프레임 애니메이션 타이밍 제어하기

■ KeyTime 구조체의 FromPercent 정적 메소드를 사용해 키 프레임 애니메이션의 타이밍을 제어하는 방법을 보여준다. ▶ 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>

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

▶ MainWindow.xaml.cs


using System;
using System.Windows;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

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

        #region 생성자 - MainWindow()

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

            #region 이동 변환을 생성한다.

            TranslateTransform translateTransform = new TranslateTransform();

            #endregion
            #region 사각형을 생성한다.

            Rectangle rectangle = new Rectangle();

            rectangle.Width           = 50;
            rectangle.Height          = 50;
            rectangle.StrokeThickness = 5;
            rectangle.Stroke          = Brushes.Black;
            rectangle.Fill            = Brushes.Purple;
            rectangle.RenderTransform = translateTransform;

            #endregion
            #region 이동 변환 애니메이션을 생성한다.

            DoubleAnimationUsingKeyFrames translateTransformAnimation = new DoubleAnimationUsingKeyFrames();

            translateTransformAnimation.Duration = TimeSpan.FromSeconds(10);

            translateTransformAnimation.KeyFrames.Add(new LinearDoubleKeyFrame(100, KeyTime.FromPercent(0.3)));
            translateTransformAnimation.KeyFrames.Add(new LinearDoubleKeyFrame(200, KeyTime.FromPercent(0.4)));
            translateTransformAnimation.KeyFrames.Add(new LinearDoubleKeyFrame(300, KeyTime.FromPercent(1.0)));

            #endregion

            rectangle.Loaded += delegate(object sender, RoutedEventArgs e)
            {
                translateTransform.BeginAnimation(TranslateTransform.XProperty, translateTransformAnimation);
            };

            Content = rectangle;
        }

        #endregion
    }
}

using System;

using System.Windows;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public partial class MainWindow : Window

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

#region 이동 변환을 생성한다.

TranslateTransform translateTransform = new TranslateTransform();

#endregion

#region 사각형을 생성한다.

Rectangle rectangle = new Rectangle();

rectangle.Width = 50;

rectangle.Height = 50;

rectangle.StrokeThickness = 5;

rectangle.Stroke = Brushes.Black;

rectangle.Fill = Brushes.Purple;

rectangle.RenderTransform = translateTransform;

#endregion

#region 이동 변환 애니메이션을 생성한다.

DoubleAnimationUsingKeyFrames translateTransformAnimation = new DoubleAnimationUsingKeyFrames();

translateTransformAnimation.Duration = TimeSpan.FromSeconds(10);

translateTransformAnimation.KeyFrames.Add(new LinearDoubleKeyFrame(100, KeyTime.FromPercent(0.3)));

translateTransformAnimation.KeyFrames.Add(new LinearDoubleKeyFrame(200, KeyTime.FromPercent(0.4)));

translateTransformAnimation.KeyFrames.Add(new LinearDoubleKeyFrame(300, KeyTime.FromPercent(1.0)));

#endregion

rectangle.Loaded += delegate(object sender, RoutedEventArgs e)

{

translateTransform.BeginAnimation(TranslateTransform.XProperty, translateTransformAnimation);

};

Content = rectangle;

}

#endregion

}

TestProject.zip

[C#/WPF] LinearDoubleKeyFrame 엘리먼트 : KeyTime 속성에서 시간을 사용해 키 프레임 애니메이션 타이밍 제어하기

■ LinearDoubleKeyFrame 엘리먼트의 KeyTime 속성에서 시간을 사용해 키 프레임 애니메이션의 타이밍을 제어하는 방법을 보여준다. ▶ 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">
    <Rectangle
        Width="50"
        Height="50"
        StrokeThickness="5"
        Stroke="Black"
        Fill="Blue">
        <Rectangle.RenderTransform>
            <TranslateTransform x:Name="translateTransform" />
        </Rectangle.RenderTransform>
        <Rectangle.Triggers>
            <EventTrigger RoutedEvent="Rectangle.Loaded">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimationUsingKeyFrames
                            Storyboard.TargetName="translateTransform"
                            Storyboard.TargetProperty="X"
                            Duration="00:00:10">
                            <LinearDoubleKeyFrame KeyTime="00:00:03" Value="100" />
                            <LinearDoubleKeyFrame KeyTime="00:00:04" Value="200" />
                            <LinearDoubleKeyFrame KeyTime="00:00:10" Value="300" />
                        </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Rectangle.Triggers>
    </Rectangle>
</Window>

<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">

<Rectangle

Width="50"

Height="50"

StrokeThickness="5"

Stroke="Black"

Fill="Blue">

<Rectangle.RenderTransform>

</Rectangle.RenderTransform>

<Rectangle.Triggers>

<DoubleAnimationUsingKeyFrames

Storyboard.TargetName="translateTransform"

Storyboard.TargetProperty="X"

Duration="00:00:10">

</DoubleAnimationUsingKeyFrames>

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Rectangle.Triggers>

</Rectangle>

</Window>

TestProject.zip

[C#/WPF] KeyTime 구조체 : FromTimeSpan 정적 메소드를 사용해 키 프레임 애니메이션 타이밍 제어하기

■ KeyTime 구조체의 FromTimeSpan 정적 메소드를 사용해 키 프레임 애니메이션의 타이밍을 제어하는 방법을 보여준다. ▶ 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>

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

▶ MainWindow.xaml.cs


using System;
using System.Windows;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

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

        #region 생성자 - MainWindow()

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

            #region 이동 변환을 생성한다.

            TranslateTransform translateTransform = new TranslateTransform();

            #endregion
            #region 사각형을 생성한다.

            Rectangle rectangle = new Rectangle();

            rectangle.Width           = 50;
            rectangle.Height          = 50;
            rectangle.StrokeThickness = 5;
            rectangle.Stroke          = Brushes.Black;
            rectangle.Fill            = Brushes.Blue;
            rectangle.RenderTransform = translateTransform;

            #endregion
            #region 이동 변환 애니메이션을 생성한다.

            DoubleAnimationUsingKeyFrames translateTransformAnimation = new DoubleAnimationUsingKeyFrames();

            translateTransformAnimation.Duration = TimeSpan.FromSeconds(10);

            translateTransformAnimation.KeyFrames.Add
            (
                new LinearDoubleKeyFrame
                (
                    100,
                    KeyTime.FromTimeSpan(TimeSpan.FromSeconds(3))
                )
            );

            translateTransformAnimation.KeyFrames.Add
            (
                new LinearDoubleKeyFrame
                (
                    200,
                    KeyTime.FromTimeSpan(TimeSpan.FromSeconds(4))
                )
            );

            translateTransformAnimation.KeyFrames.Add
            (
                new LinearDoubleKeyFrame
                (
                    300,
                    KeyTime.FromTimeSpan(TimeSpan.FromSeconds(10))
                )
            );

            #endregion

            rectangle.Loaded += delegate(object sender, RoutedEventArgs e)
            {
                translateTransform.BeginAnimation(TranslateTransform.XProperty, translateTransformAnimation);
            };

            Content = rectangle;
        }

        #endregion
    }
}

using System;

using System.Windows;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public partial class MainWindow : Window

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

#region 이동 변환을 생성한다.

TranslateTransform translateTransform = new TranslateTransform();

#endregion

#region 사각형을 생성한다.

Rectangle rectangle = new Rectangle();

rectangle.Width = 50;

rectangle.Height = 50;

rectangle.StrokeThickness = 5;

rectangle.Stroke = Brushes.Black;

rectangle.Fill = Brushes.Blue;

rectangle.RenderTransform = translateTransform;

#endregion

#region 이동 변환 애니메이션을 생성한다.

DoubleAnimationUsingKeyFrames translateTransformAnimation = new DoubleAnimationUsingKeyFrames();

translateTransformAnimation.Duration = TimeSpan.FromSeconds(10);

translateTransformAnimation.KeyFrames.Add

(

new LinearDoubleKeyFrame

(

100,

KeyTime.FromTimeSpan(TimeSpan.FromSeconds(3))

)

);

translateTransformAnimation.KeyFrames.Add

(

new LinearDoubleKeyFrame

(

200,

KeyTime.FromTimeSpan(TimeSpan.FromSeconds(4))

)

);

translateTransformAnimation.KeyFrames.Add

(

new LinearDoubleKeyFrame

(

300,

KeyTime.FromTimeSpan(TimeSpan.FromSeconds(10))

)

);

#endregion

rectangle.Loaded += delegate(object sender, RoutedEventArgs e)

{

translateTransform.BeginAnimation(TranslateTransform.XProperty, translateTransformAnimation);

};

Content = rectangle;

}

#endregion

}

TestProject.zip

[C#/WPF] ThicknessAnimationUsingKeyFrames 엘리먼트 : 키 프레임을 사용해 두께 값에 애니메이션 효과 주기

■ ThicknessAnimationUsingKeyFrames 엘리먼트에서 키 프레임을 사용해 두께 값에 애니메이션 효과를 주는 방법을 보여준다. ▶ 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">
    <Border
        HorizontalAlignment="Center"
        VerticalAlignment="Center"
        Margin="10"
        BorderThickness="1"
        BorderBrush="#ccccff"
        Background="#99ffffff"
        Padding="20"  >
        <Border.Triggers>
            <EventTrigger RoutedEvent="Border.Loaded">
                <BeginStoryboard>
                    <Storyboard>
                        <ThicknessAnimationUsingKeyFrames
                            Storyboard.TargetProperty="BorderThickness"
                            Duration="00:00:05"
                            RepeatBehavior="Forever"
                            FillBehavior="HoldEnd">
                            <ThicknessAnimationUsingKeyFrames.KeyFrames>
                                <LinearThicknessKeyFrame KeyTime="00:00:00.5">
                                    <LinearThicknessKeyFrame.Value>
                                        <Thickness
                                            Left="8"
                                            Top="6"
                                            Right="8"
                                            Bottom="6" />
                                    </LinearThicknessKeyFrame.Value>
                                </LinearThicknessKeyFrame>
                                <DiscreteThicknessKeyFrame KeyTime="00:00:01">
                                    <DiscreteThicknessKeyFrame.Value>
                                        <Thickness
                                            Left="28"
                                            Top="24"
                                            Right="28"
                                            Bottom="24" />
                                    </DiscreteThicknessKeyFrame.Value>
                                </DiscreteThicknessKeyFrame>
                                <SplineThicknessKeyFrame
                                    KeyTime="00:00:03"
                                    KeySpline="0.6 0.0 0.9 0.00">
                                    <SplineThicknessKeyFrame.Value>
                                        <Thickness
                                            Left="1"
                                            Right="1"
                                            Top="1"
                                            Bottom="8" />
                                    </SplineThicknessKeyFrame.Value>
                                </SplineThicknessKeyFrame>
                            </ThicknessAnimationUsingKeyFrames.KeyFrames>
                        </ThicknessAnimationUsingKeyFrames>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Border.Triggers>
        <TextBlock>
            ThicknessAnimationUsingKeyFrames 엘리먼트 : 키 프레임을 사용해 두께 값에 애니메이션 효과 주기
        </TextBlock>
    </Border>
</Window>

<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">

<Border

HorizontalAlignment="Center"

VerticalAlignment="Center"

Margin="10"

BorderThickness="1"

BorderBrush="#ccccff"

Background="#99ffffff"

Padding="20" >

<Border.Triggers>

<ThicknessAnimationUsingKeyFrames

Storyboard.TargetProperty="BorderThickness"

Duration="00:00:05"

RepeatBehavior="Forever"

FillBehavior="HoldEnd">

<ThicknessAnimationUsingKeyFrames.KeyFrames>

<LinearThicknessKeyFrame.Value>

<Thickness

Left="8"

Top="6"

Right="8"

Bottom="6" />

</LinearThicknessKeyFrame.Value>

</LinearThicknessKeyFrame>

<DiscreteThicknessKeyFrame.Value>

<Thickness

Left="28"

Top="24"

Right="28"

Bottom="24" />

</DiscreteThicknessKeyFrame.Value>

</DiscreteThicknessKeyFrame>

<SplineThicknessKeyFrame

KeyTime="00:00:03"

KeySpline="0.6 0.0 0.9 0.00">

<SplineThicknessKeyFrame.Value>

<Thickness

Left="1"

Right="1"

Top="1"

Bottom="8" />

</SplineThicknessKeyFrame.Value>

</SplineThicknessKeyFrame>

</ThicknessAnimationUsingKeyFrames.KeyFrames>

</ThicknessAnimationUsingKeyFrames>

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Border.Triggers>

ThicknessAnimationUsingKeyFrames 엘리먼트 : 키 프레임을 사용해 두께 값에 애니메이션 효과 주기

</TextBlock>

</Border>

</Window>

TestProject.zip

[C#/WPF] SizeAnimationUsingKeyFrames 엘리먼트 : 키 프레임을 사용해 크기 값에 애니메이션 효과 주기

■ SizeAnimationUsingKeyFrames 엘리먼트에서 키 프레임을 사용해 크기 값에 애니메이션 효과를 주는 방법을 보여준다. ▶ 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">
    <Path
        HorizontalAlignment="Center"
        VerticalAlignment="Center"
        StrokeThickness="3"
        Stroke="Black">
        <Path.Data>
            <PathGeometry>
                <PathGeometry.Figures>
                    <PathFigureCollection>
                        <PathFigure StartPoint="100 200">
                            <PathFigure.Segments>
                                <PathSegmentCollection>
                                    <ArcSegment x:Name="arcSegment"
                                        SweepDirection="Clockwise"
                                        Point="500 200"
                                        Size="90 80" />
                                </PathSegmentCollection>
                            </PathFigure.Segments>
                        </PathFigure>
                    </PathFigureCollection>
                </PathGeometry.Figures>
            </PathGeometry>
        </Path.Data>
        <Path.Triggers>
            <EventTrigger RoutedEvent="Path.Loaded">
                <BeginStoryboard>
                    <Storyboard>
                        <SizeAnimationUsingKeyFrames
                            Storyboard.TargetName="arcSegment"
                            Storyboard.TargetProperty="Size"
                            RepeatBehavior="Forever"
                            AutoReverse="True">
                            <SizeAnimationUsingKeyFrames.KeyFrames>
                                <LinearSizeKeyFrame   KeyTime="00:00:00.5" Value="120 120" />
                                <DiscreteSizeKeyFrame KeyTime="00:00:01"   Value="150 150" />
                                <SplineSizeKeyFrame   KeyTime="00:00:03"   Value="300 300" KeySpline="0.6 0.0 0.9 0.00" />
                            </SizeAnimationUsingKeyFrames.KeyFrames>
                        </SizeAnimationUsingKeyFrames>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Path.Triggers>
    </Path>
</Window>

<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">

<Path

HorizontalAlignment="Center"

VerticalAlignment="Center"

StrokeThickness="3"

Stroke="Black">

<Path.Data>

<PathGeometry.Figures>

<PathFigure.Segments>

<ArcSegment x:Name="arcSegment"

SweepDirection="Clockwise"

Point="500 200"

Size="90 80" />

</PathSegmentCollection>

</PathFigure.Segments>

</PathFigure>

</PathFigureCollection>

</PathGeometry.Figures>

</PathGeometry>

</Path.Data>

<Path.Triggers>

<SizeAnimationUsingKeyFrames

Storyboard.TargetName="arcSegment"

Storyboard.TargetProperty="Size"

RepeatBehavior="Forever"

AutoReverse="True">

<SizeAnimationUsingKeyFrames.KeyFrames>

</SizeAnimationUsingKeyFrames.KeyFrames>

</SizeAnimationUsingKeyFrames>

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Path.Triggers>

</Path>

</Window>

TestProject.zip

[C#/WPF] ColorAnimationUsingKeyFrames 엘리먼트 : 키 프레임을 사용해 색상 값에 애니메이션 효과 주기

■ ColorAnimationUsingKeyFrames 엘리먼트에서 키 프레임을 사용해 색상 값에 애니메이션 효과를 주는 방법을 보여준다. ▶ 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">
    <StackPanel
        HorizontalAlignment="Center"
        VerticalAlignment="Center"
        Orientation="Vertical">
        <Border
            BorderThickness="28"
            Background="#99ffffff"
            Padding="20">
            <Border.BorderBrush>
                <SolidColorBrush x:Name="solidColorBrush"
                    Color="Green" />
            </Border.BorderBrush>
            <Border.Triggers>
                <EventTrigger RoutedEvent="Border.Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                            <ColorAnimationUsingKeyFrames
                                Storyboard.TargetName="solidColorBrush"
                                Storyboard.TargetProperty="Color"
                                Duration="00:00:06"
                                FillBehavior="HoldEnd"
                                RepeatBehavior="Forever">
                                <ColorAnimationUsingKeyFrames.KeyFrames>
                                    <LinearColorKeyFrame   KeyTime="00:00:02"   Value="Red"    />
                                    <DiscreteColorKeyFrame KeyTime="00:00:02.5" Value="Yellow" />
                                    <SplineColorKeyFrame   KeyTime="00:00:04.5" Value="Green"  KeySpline="0.6 0.0 0.9 0.00" />
                                </ColorAnimationUsingKeyFrames.KeyFrames>
                            </ColorAnimationUsingKeyFrames>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Border.Triggers>
            <TextBlock>ColorAnimationUsingKeyFrames를 사용해 색상 애니메이션 효과주기</TextBlock>
        </Border>
    </StackPanel>
</Window>

<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">

<StackPanel

HorizontalAlignment="Center"

VerticalAlignment="Center"

Orientation="Vertical">

<Border

BorderThickness="28"

Background="#99ffffff"

Padding="20">

<Border.BorderBrush>

<SolidColorBrush x:Name="solidColorBrush"

Color="Green" />

</Border.BorderBrush>

<Border.Triggers>

<ColorAnimationUsingKeyFrames

Storyboard.TargetName="solidColorBrush"

Storyboard.TargetProperty="Color"

Duration="00:00:06"

FillBehavior="HoldEnd"

RepeatBehavior="Forever">

<ColorAnimationUsingKeyFrames.KeyFrames>

</ColorAnimationUsingKeyFrames.KeyFrames>

</ColorAnimationUsingKeyFrames>

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Border.Triggers>

<TextBlock>ColorAnimationUsingKeyFrames를 사용해 색상 애니메이션 효과주기</TextBlock>

</Border>

</StackPanel>

</Window>

TestProject.zip

[C#/WPF] ColorAnimationUsingKeyFrames 클래스 : 키 프레임을 사용해 색상 값에 애니메이션 효과 주기

■ ColorAnimationUsingKeyFrames 클래스에서 키 프레임을 사용해 색상 값에 애니메이션 효과를 주는 방법을 보여준다. ▶ 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>

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

▶ MainWindow.xaml.cs


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

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

        #region 생성자 - MainWindow()

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

            NameScope.SetNameScope(this, new NameScope());

            #region 솔리드 색상 브러시를 생성한다.

            SolidColorBrush solidColorBrush = new SolidColorBrush();

            solidColorBrush.Color = Color.FromArgb(255, 0, 255, 0);

            RegisterName("solidColorBrush", solidColorBrush);

            #endregion
            #region 텍스트 블럭을 생성한다.

            TextBlock textBlock = new TextBlock();

            textBlock.Text = "ColorAnimationUsingKeyFrames를 사용해 색상 애니메이션 효과주기";

            #endregion
            #region 테두리를 생성한다.

            Border border = new Border();

            border.BorderThickness = new Thickness(28);
            border.BorderBrush     = solidColorBrush;
            border.Padding         = new Thickness(20);
            border.Child           = textBlock;

            #endregion
            #region 스택 패널을 생성한다.

            StackPanel stackPanel = new StackPanel();

            stackPanel.HorizontalAlignment = HorizontalAlignment.Center;
            stackPanel.VerticalAlignment   = VerticalAlignment.Center;
            stackPanel.Margin              = new Thickness(10);
            stackPanel.Orientation         = Orientation.Vertical;

            stackPanel.Children.Add(border);

            #endregion

            #region 빨간색을 생성한다.

            Color redColor = new Color();

            redColor = Color.FromArgb(255, 255, 0, 0);

            #endregion
            #region 노란색을 생성한다.

            Color yellowColor = new Color();

            yellowColor = Color.FromArgb(255, 255, 255, 0);

            #endregion
            #region 녹색을 생성한다.

            Color greenColor = new Color();

            greenColor = Color.FromArgb(255, 0, 255, 0);

            #endregion

            #region 색상 애니메이션을 생성한다.

            ColorAnimationUsingKeyFrames colorAnimation = new ColorAnimationUsingKeyFrames();

            colorAnimation.Duration       = TimeSpan.FromSeconds(6);
            colorAnimation.RepeatBehavior = RepeatBehavior.Forever;

            colorAnimation.KeyFrames.Add
            (
                new LinearColorKeyFrame
                (
                    redColor,
                    KeyTime.FromTimeSpan(TimeSpan.FromSeconds(2.0))
                )
            );

            colorAnimation.KeyFrames.Add
            (
                new DiscreteColorKeyFrame
                (
                    yellowColor,
                    KeyTime.FromTimeSpan(TimeSpan.FromSeconds(2.5))
                )
            );

            colorAnimation.KeyFrames.Add
            (
                new SplineColorKeyFrame
                (
                    greenColor,
                    KeyTime.FromTimeSpan(TimeSpan.FromSeconds(4.5)),
                    new KeySpline(0.6, 0.0, 0.9, 0.0)
                )
            );

            Storyboard.SetTargetName(colorAnimation, "solidColorBrush");
            Storyboard.SetTargetProperty(colorAnimation, new PropertyPath(SolidColorBrush.ColorProperty));

            #endregion
            #region 스토리보드를 생성한다.

            Storyboard storyboard = new Storyboard();

            storyboard.Children.Add(colorAnimation);

            #endregion

            Content = stackPanel;

            border.Loaded += delegate(object sender, RoutedEventArgs e)
            {
                storyboard.Begin(this);
            };
        }

        #endregion
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

using System;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Media;

using System.Windows.Media.Animation;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public partial class MainWindow : Window

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

NameScope.SetNameScope(this, new NameScope());

#region 솔리드 색상 브러시를 생성한다.

SolidColorBrush solidColorBrush = new SolidColorBrush();

solidColorBrush.Color = Color.FromArgb(255, 0, 255, 0);

RegisterName("solidColorBrush", solidColorBrush);

#endregion

#region 텍스트 블럭을 생성한다.

TextBlock textBlock = new TextBlock();

textBlock.Text = "ColorAnimationUsingKeyFrames를 사용해 색상 애니메이션 효과주기";

#endregion

#region 테두리를 생성한다.

Border border = new Border();

border.BorderThickness = new Thickness(28);

border.BorderBrush = solidColorBrush;

border.Padding = new Thickness(20);

border.Child = textBlock;

#endregion

#region 스택 패널을 생성한다.

StackPanel stackPanel = new StackPanel();

stackPanel.HorizontalAlignment = HorizontalAlignment.Center;

stackPanel.VerticalAlignment = VerticalAlignment.Center;

stackPanel.Margin = new Thickness(10);

stackPanel.Orientation = Orientation.Vertical;

stackPanel.Children.Add(border);

#endregion

#region 빨간색을 생성한다.

Color redColor = new Color();

redColor = Color.FromArgb(255, 255, 0, 0);

#endregion

#region 노란색을 생성한다.

Color yellowColor = new Color();

yellowColor = Color.FromArgb(255, 255, 255, 0);

#endregion

#region 녹색을 생성한다.

Color greenColor = new Color();

greenColor = Color.FromArgb(255, 0, 255, 0);

#endregion

#region 색상 애니메이션을 생성한다.

ColorAnimationUsingKeyFrames colorAnimation = new ColorAnimationUsingKeyFrames();

colorAnimation.Duration = TimeSpan.FromSeconds(6);

colorAnimation.RepeatBehavior = RepeatBehavior.Forever;

colorAnimation.KeyFrames.Add

(

new LinearColorKeyFrame

(

redColor,

KeyTime.FromTimeSpan(TimeSpan.FromSeconds(2.0))

)

);

colorAnimation.KeyFrames.Add

(

new DiscreteColorKeyFrame

(

yellowColor,

KeyTime.FromTimeSpan(TimeSpan.FromSeconds(2.5))

)

);

colorAnimation.KeyFrames.Add

(

new SplineColorKeyFrame

(

greenColor,

KeyTime.FromTimeSpan(TimeSpan.FromSeconds(4.5)),

new KeySpline(0.6, 0.0, 0.9, 0.0)

)

);

Storyboard.SetTargetName(colorAnimation, "solidColorBrush");

Storyboard.SetTargetProperty(colorAnimation, new PropertyPath(SolidColorBrush.ColorProperty));

#endregion

#region 스토리보드를 생성한다.

Storyboard storyboard = new Storyboard();

storyboard.Children.Add(colorAnimation);

#endregion

Content = stackPanel;

border.Loaded += delegate(object sender, RoutedEventArgs e)

{

storyboard.Begin(this);

};

}

#endregion

}

TestProject.zip

[C#/WPF] StringAnimationUsingKeyFrames 엘리먼트 : 키 프레임을 사용해 문자열 값에 애니메이션 효과 주기

■ StringAnimationUsingKeyFrames 엘리먼트에서 키 프레임을 사용해 문자열 값에 애니메이션 효과를 주는 방법을 보여준다. ▶ 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">
    <Button Name="button"
        HorizontalAlignment="Center"
        VerticalAlignment="Center"
        FontFamily="Verdana"
        FontSize="32pt"
        Content="Some Text">
        <Button.Triggers>
            <EventTrigger RoutedEvent="Button.Click">
                <BeginStoryboard>
                    <Storyboard>
                        <StringAnimationUsingKeyFrames
                            Storyboard.TargetName="button"
                            Storyboard.TargetProperty="(Button.Content)"
                            Duration="00:00:08"
                            FillBehavior="HoldEnd">
                            <DiscreteStringKeyFrame KeyTime="00:00:00"   Value=""              />
                            <DiscreteStringKeyFrame KeyTime="00:00:01"   Value="A"             />
                            <DiscreteStringKeyFrame KeyTime="00:00:01.5" Value="An"            />
                            <DiscreteStringKeyFrame KeyTime="00:00:02"   Value="Ani"           />
                            <DiscreteStringKeyFrame KeyTime="00:00:02.5" Value="Anim"          />
                            <DiscreteStringKeyFrame KeyTime="00:00:03"   Value="Anima"         />
                            <DiscreteStringKeyFrame KeyTime="00:00:03.5" Value="Animat"        />
                            <DiscreteStringKeyFrame KeyTime="00:00:04"   Value="Animate"       />
                            <DiscreteStringKeyFrame KeyTime="00:00:04.5" Value="Animated"      />
                            <DiscreteStringKeyFrame KeyTime="00:00:05"   Value="Animated "     />
                            <DiscreteStringKeyFrame KeyTime="00:00:05.5" Value="Animated T"    />
                            <DiscreteStringKeyFrame KeyTime="00:00:06"   Value="Animated Te"   />
                            <DiscreteStringKeyFrame KeyTime="00:00:06.5" Value="Animated Tex"  />
                            <DiscreteStringKeyFrame KeyTime="00:00:07"   Value="Animated Text" />
                        </StringAnimationUsingKeyFrames>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Button.Triggers>
    </Button>
</Window>

<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">

<Button Name="button"

HorizontalAlignment="Center"

VerticalAlignment="Center"

FontFamily="Verdana"

FontSize="32pt"

Content="Some Text">

<Button.Triggers>

<StringAnimationUsingKeyFrames

Storyboard.TargetName="button"

Storyboard.TargetProperty="(Button.Content)"

Duration="00:00:08"

FillBehavior="HoldEnd">

</StringAnimationUsingKeyFrames>

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Button.Triggers>

</Button>

</Window>

TestProject.zip

[C#/WPF] RectAnimationUsingKeyFrames 엘리먼트 : 키 프레임을 사용해 사각형 값에 애니메이션 효과 주기

■ RectAnimationUsingKeyFrames 엘리먼트에서 키 프레임을 사용해 사각형 값에 애니메이션 효과를 주는 방법을 보여준다. ▶ 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">
    <StackPanel
        HorizontalAlignment="Center"
        Orientation="Vertical"
        Background="LightGray">
        <Path
            StrokeThickness="1"
            Stroke="Black"
            Fill="LemonChiffon">
            <Path.Data>
                <RectangleGeometry x:Name="rectangleGeometry"
                    Rect="0 200 100 100" />
            </Path.Data>
            <Path.Triggers>
                <EventTrigger RoutedEvent="Path.Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                            <RectAnimationUsingKeyFrames
                                Storyboard.TargetName="rectangleGeometry"
                                Storyboard.TargetProperty ="Rect"
                                Duration="00:00:06"
                                RepeatBehavior="Forever"
                                FillBehavior="HoldEnd">
                                <LinearRectKeyFrame   KeyTime="00:00:02"   Value="600 50 200 50" />
                                <DiscreteRectKeyFrame KeyTime="00:00:02.5" Value="600 50 200 10" />
                                <SplineRectKeyFrame   KeyTime="00:00:04.5" Value="0 200 100 100" KeySpline="0.6,0.0 0.9,0.00" />
                            </RectAnimationUsingKeyFrames>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Path.Triggers>
        </Path>
    </StackPanel>
</Window>

<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">

<StackPanel

HorizontalAlignment="Center"

Orientation="Vertical"

Background="LightGray">

<Path

StrokeThickness="1"

Stroke="Black"

Fill="LemonChiffon">

<Path.Data>

<RectangleGeometry x:Name="rectangleGeometry"

Rect="0 200 100 100" />

</Path.Data>

<Path.Triggers>

<RectAnimationUsingKeyFrames

Storyboard.TargetName="rectangleGeometry"

Storyboard.TargetProperty ="Rect"

Duration="00:00:06"

RepeatBehavior="Forever"

FillBehavior="HoldEnd">

</RectAnimationUsingKeyFrames>

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Path.Triggers>

</Path>

</StackPanel>

</Window>

TestProject.zip

[C#/WPF] RectAnimationUsingKeyFrames 클래스 : 키 프레임을 사용해 사각형 값에 애니메이션 효과 주기

■ RectAnimationUsingKeyFrames 클래스에서 키 프레임을 사용해 사각형 값에 애니메이션 효과를 주는 방법을 보여준다. ▶ 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>

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

▶ MainWindow.xaml.cs


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

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

        #region 생성자 - MainWindow()

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

            NameScope.SetNameScope(this, new NameScope());

            #region 사각형 지오메트리를 생성한다.

            RectangleGeometry rectangleGeometry = new RectangleGeometry();

            rectangleGeometry.Rect = new Rect(0, 200, 100, 100);

            RegisterName("rectangleGeometry", rectangleGeometry);

            #endregion
            #region 패스를 생성한다.

            Path path = new Path();

            path.StrokeThickness = 1;
            path.Stroke          = Brushes.Black;
            path.Fill            = Brushes.LemonChiffon;
            path.Data            = rectangleGeometry;

            #endregion
            #region 스택 패널을 생성한다.

            StackPanel stackPanel = new StackPanel();

            stackPanel.HorizontalAlignment = HorizontalAlignment.Center;
            stackPanel.Background          = Brushes.LightGray;
            stackPanel.Orientation         = Orientation.Vertical;

            stackPanel.Children.Add(path);

            #endregion
            #region 사각형 애니메이션을 생성한다.

            RectAnimationUsingKeyFrames rectangleAnimation = new RectAnimationUsingKeyFrames();

            rectangleAnimation.Duration       = TimeSpan.FromSeconds(6);
            rectangleAnimation.RepeatBehavior = RepeatBehavior.Forever;

            rectangleAnimation.KeyFrames.Add
            (
                new LinearRectKeyFrame
                (
                    new Rect(600, 50, 200, 50),
                    KeyTime.FromTimeSpan(TimeSpan.FromSeconds(2))
                )
            );

            rectangleAnimation.KeyFrames.Add
            (
                new DiscreteRectKeyFrame
                (
                    new Rect(600, 50, 200, 10),
                    KeyTime.FromTimeSpan(TimeSpan.FromSeconds(2.5))
                )
            );

            rectangleAnimation.KeyFrames.Add
            (
                new SplineRectKeyFrame
                (
                    new Rect(0, 200, 100, 100),
                    KeyTime.FromTimeSpan(TimeSpan.FromSeconds(4.5)),
                    new KeySpline(0.6, 0.0, 0.9, 0.0)
                )
            );

            Storyboard.SetTargetName(rectangleAnimation, "rectangleGeometry");
            Storyboard.SetTargetProperty(rectangleAnimation, new PropertyPath(RectangleGeometry.RectProperty));

            #endregion
            #region 스토리보드를 생성한다.

            Storyboard storyboard = new Storyboard();

            storyboard.Children.Add(rectangleAnimation);

            #endregion

            path.Loaded += delegate(object sender, RoutedEventArgs e)
            {
                storyboard.Begin(this);
            };

            Content = stackPanel;
        }

        #endregion
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

using System;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public partial class MainWindow : Window

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

NameScope.SetNameScope(this, new NameScope());

#region 사각형 지오메트리를 생성한다.

RectangleGeometry rectangleGeometry = new RectangleGeometry();

rectangleGeometry.Rect = new Rect(0, 200, 100, 100);

RegisterName("rectangleGeometry", rectangleGeometry);

#endregion

#region 패스를 생성한다.

Path path = new Path();

path.StrokeThickness = 1;

path.Stroke = Brushes.Black;

path.Fill = Brushes.LemonChiffon;

path.Data = rectangleGeometry;

#endregion

#region 스택 패널을 생성한다.

StackPanel stackPanel = new StackPanel();

stackPanel.HorizontalAlignment = HorizontalAlignment.Center;

stackPanel.Background = Brushes.LightGray;

stackPanel.Orientation = Orientation.Vertical;

stackPanel.Children.Add(path);

#endregion

#region 사각형 애니메이션을 생성한다.

RectAnimationUsingKeyFrames rectangleAnimation = new RectAnimationUsingKeyFrames();

rectangleAnimation.Duration = TimeSpan.FromSeconds(6);

rectangleAnimation.RepeatBehavior = RepeatBehavior.Forever;

rectangleAnimation.KeyFrames.Add

(

new LinearRectKeyFrame

(

new Rect(600, 50, 200, 50),

KeyTime.FromTimeSpan(TimeSpan.FromSeconds(2))

)

);

rectangleAnimation.KeyFrames.Add

(

new DiscreteRectKeyFrame

(

new Rect(600, 50, 200, 10),

KeyTime.FromTimeSpan(TimeSpan.FromSeconds(2.5))

)

);

rectangleAnimation.KeyFrames.Add

(

new SplineRectKeyFrame

(

new Rect(0, 200, 100, 100),

KeyTime.FromTimeSpan(TimeSpan.FromSeconds(4.5)),

new KeySpline(0.6, 0.0, 0.9, 0.0)

)

);

Storyboard.SetTargetName(rectangleAnimation, "rectangleGeometry");

Storyboard.SetTargetProperty(rectangleAnimation, new PropertyPath(RectangleGeometry.RectProperty));

#endregion

#region 스토리보드를 생성한다.

Storyboard storyboard = new Storyboard();

storyboard.Children.Add(rectangleAnimation);

#endregion

path.Loaded += delegate(object sender, RoutedEventArgs e)

{

storyboard.Begin(this);

};

Content = stackPanel;

}

#endregion

}

TestProject.zip

[C#/WPF] PointAnimationUsingKeyFrames 엘리먼트 : 키 프레임을 사용해 포인트 값에 애니메이션 효과 주기

■ PointAnimationUsingKeyFrames 엘리먼트에서 키 프레임을 사용해 포인트 값에 애니메이션 효과를 주는 방법을 보여준다. ▶ 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">
    <Canvas
        Width="500"
        Height="500"
        Background="LightGray">
        <Path Fill="Blue">
            <Path.Data>
                <EllipseGeometry x:Name="ellipseGeometry"
                    Center="250 150"
                    RadiusX="20"
                    RadiusY="20" />
            </Path.Data>
            <Path.Triggers>
                <EventTrigger RoutedEvent="Path.Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                            <PointAnimationUsingKeyFrames
                                Storyboard.TargetName="ellipseGeometry"
                                Storyboard.TargetProperty="Center"
                                Duration="00:00:05"
                                RepeatBehavior="Forever">
                                <LinearPointKeyFrame   KeyTime="00:00:00.5" Value="100 300" />
                                <DiscretePointKeyFrame KeyTime="00:00:01"   Value="400,300" />
                                <SplinePointKeyFrame   KeyTime="00:00:03"   Value="250,150" KeySpline="0.6 0.0 0.9 0.00" />
                            </PointAnimationUsingKeyFrames>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Path.Triggers>
        </Path>
    </Canvas>
</Window>

<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">

<Canvas

Width="500"

Height="500"

Background="LightGray">

<Path.Data>

<EllipseGeometry x:Name="ellipseGeometry"

Center="250 150"

RadiusX="20"

RadiusY="20" />

</Path.Data>

<Path.Triggers>

<PointAnimationUsingKeyFrames

Storyboard.TargetName="ellipseGeometry"

Storyboard.TargetProperty="Center"

Duration="00:00:05"

RepeatBehavior="Forever">

</PointAnimationUsingKeyFrames>

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Path.Triggers>

</Path>

</Canvas>

</Window>

TestProject.zip

[C#/WPF] PointAnimationUsingKeyFrames 클래스 : 키 프레임을 사용해 포인트 값에 애니메이션 효과 주기

■ PointAnimationUsingKeyFrames 클래스에서 키 프레임을 사용해 포인트 값에 애니메이션 효과를 주는 방법을 보여준다. ▶ 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>

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

▶ MainWindow.xaml.cs


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

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

        #region 생성자 - MainWindow()

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

            NameScope.SetNameScope(this, new NameScope());

            #region 타원 지오메트리를 생성한다.

            EllipseGeometry ellipseGeometry = new EllipseGeometry(new Point(250, 150), 20, 20);

            RegisterName("ellipseGeometry", ellipseGeometry);

            #endregion
            #region 패스를 생성한다.

            Path path = new Path();

            path.Fill = Brushes.Blue;
            path.Data = ellipseGeometry;

            #endregion
            #region 캔버스를 생성한다.

            Canvas canvas = new Canvas();

            canvas.HorizontalAlignment = HorizontalAlignment.Center;
            canvas.VerticalAlignment   = VerticalAlignment.Center;
            canvas.Width               = 500;
            canvas.Height              = 500;
            canvas.Background          = Brushes.LightGray;

            canvas.Children.Add(path);

            #endregion

            #region 포인트 애니메이션을 생성한다.

            PointAnimationUsingKeyFrames pointAnimation = new PointAnimationUsingKeyFrames();

            pointAnimation.Duration       = TimeSpan.FromSeconds(5);
            pointAnimation.RepeatBehavior = RepeatBehavior.Forever;

            pointAnimation.KeyFrames.Add
            (
                new LinearPointKeyFrame
                (
                    new Point(100, 300),
                    KeyTime.FromTimeSpan(TimeSpan.FromSeconds(0.5))
                )
            );

            pointAnimation.KeyFrames.Add
            (
                new DiscretePointKeyFrame
                (
                    new Point(400, 300),
                    KeyTime.FromTimeSpan(TimeSpan.FromSeconds(1))
                )
            );

            pointAnimation.KeyFrames.Add
            (
                new SplinePointKeyFrame
                (
                    new Point(250, 150),
                    KeyTime.FromTimeSpan(TimeSpan.FromSeconds(3)),
                    new KeySpline(0.6, 0.0, 0.9, 0.0)
                )
            );

            Storyboard.SetTargetName(pointAnimation, "ellipseGeometry");
            Storyboard.SetTargetProperty(pointAnimation, new PropertyPath(EllipseGeometry.CenterProperty));

            #endregion
            #region 스토리보드를 생성한다.

            Storyboard storyboard = new Storyboard();

            storyboard.Children.Add(pointAnimation);

            #endregion

            path.Loaded += delegate(object sender, RoutedEventArgs e)
            {
                storyboard.Begin(this);
            };

            Content = canvas;
        }

        #endregion
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

using System;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Shapes;

using System.Windows.Media.Animation;

using System.Windows.Media;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public partial class MainWindow : Window

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

NameScope.SetNameScope(this, new NameScope());

#region 타원 지오메트리를 생성한다.

EllipseGeometry ellipseGeometry = new EllipseGeometry(new Point(250, 150), 20, 20);

RegisterName("ellipseGeometry", ellipseGeometry);

#endregion

#region 패스를 생성한다.

Path path = new Path();

path.Fill = Brushes.Blue;

path.Data = ellipseGeometry;

#endregion

#region 캔버스를 생성한다.

Canvas canvas = new Canvas();

canvas.HorizontalAlignment = HorizontalAlignment.Center;

canvas.VerticalAlignment = VerticalAlignment.Center;

canvas.Width = 500;

canvas.Height = 500;

canvas.Background = Brushes.LightGray;

canvas.Children.Add(path);

#endregion

#region 포인트 애니메이션을 생성한다.

PointAnimationUsingKeyFrames pointAnimation = new PointAnimationUsingKeyFrames();

pointAnimation.Duration = TimeSpan.FromSeconds(5);

pointAnimation.RepeatBehavior = RepeatBehavior.Forever;

pointAnimation.KeyFrames.Add

(

new LinearPointKeyFrame

(

new Point(100, 300),

KeyTime.FromTimeSpan(TimeSpan.FromSeconds(0.5))

)

);

pointAnimation.KeyFrames.Add

(

new DiscretePointKeyFrame

(

new Point(400, 300),

KeyTime.FromTimeSpan(TimeSpan.FromSeconds(1))

)

);

pointAnimation.KeyFrames.Add

(

new SplinePointKeyFrame

(

new Point(250, 150),

KeyTime.FromTimeSpan(TimeSpan.FromSeconds(3)),

new KeySpline(0.6, 0.0, 0.9, 0.0)

)

);

Storyboard.SetTargetName(pointAnimation, "ellipseGeometry");

Storyboard.SetTargetProperty(pointAnimation, new PropertyPath(EllipseGeometry.CenterProperty));

#endregion

#region 스토리보드를 생성한다.

Storyboard storyboard = new Storyboard();

storyboard.Children.Add(pointAnimation);

#endregion

path.Loaded += delegate(object sender, RoutedEventArgs e)

{

storyboard.Begin(this);

};

Content = canvas;

}

#endregion

}

TestProject.zip

[C#/WPF] MatrixAnimationUsingKeyFrames 엘리먼트 : 키 프레임을 사용해 매트릭스에 애니메이션 효과 주기

■ MatrixAnimationUsingKeyFrames 엘리먼트에서 키 프레임을 사용해 매트릭스에 애니메이션 효과를 주는 방법을 보여준다. ▶ 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">
    <Canvas>
        <Button
            Margin="10,0,0,0"
            Width="100"
            Height="30"
            Content="테스트">
            <Button.RenderTransform>
                <MatrixTransform x:Name="matrixTransform">
                    <MatrixTransform.Matrix >
                        <Matrix
                            OffsetX="10"
                            OffsetY="100" />
                    </MatrixTransform.Matrix>
                </MatrixTransform>
            </Button.RenderTransform>
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                            <MatrixAnimationUsingKeyFrames
                                Storyboard.TargetName="matrixTransform"
                                Storyboard.TargetProperty="Matrix"
                                Duration="00:00:03"
                                RepeatBehavior="Forever">
                                <DiscreteMatrixKeyFrame KeyTime="00:00:00.2">
                                    <DiscreteMatrixKeyFrame.Value>
                                        <Matrix
                                            OffsetX="100"
                                            OffsetY="200"
                                            M11="3"
                                            M12="1" />
                                    </DiscreteMatrixKeyFrame.Value>
                                </DiscreteMatrixKeyFrame>
                                <DiscreteMatrixKeyFrame KeyTime="00:00:01">
                                    <DiscreteMatrixKeyFrame.Value>
                                        <Matrix
                                            OffsetX="300"
                                            OffsetY="100"
                                            M11="1"
                                            M12="0" />
                                    </DiscreteMatrixKeyFrame.Value>
                                </DiscreteMatrixKeyFrame>
                            </MatrixAnimationUsingKeyFrames>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Button.Triggers>
        </Button>
    </Canvas>
</Window>

<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">

<Button

Margin="10,0,0,0"

Width="100"

Height="30"

Content="테스트">

<Button.RenderTransform>

<MatrixTransform.Matrix >

<Matrix

OffsetX="10"

OffsetY="100" />

</MatrixTransform.Matrix>

</MatrixTransform>

</Button.RenderTransform>

<Button.Triggers>

<MatrixAnimationUsingKeyFrames

Storyboard.TargetName="matrixTransform"

Storyboard.TargetProperty="Matrix"

Duration="00:00:03"

RepeatBehavior="Forever">

<DiscreteMatrixKeyFrame.Value>

<Matrix

OffsetX="100"

OffsetY="200"

M11="3"

M12="1" />

</DiscreteMatrixKeyFrame.Value>

</DiscreteMatrixKeyFrame>

<DiscreteMatrixKeyFrame.Value>

<Matrix

OffsetX="300"

OffsetY="100"

M11="1"

M12="0" />

</DiscreteMatrixKeyFrame.Value>

</DiscreteMatrixKeyFrame>

</MatrixAnimationUsingKeyFrames>

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Button.Triggers>

</Button>

</Canvas>

</Window>

TestProject.zip

[C#/WPF] DoubleAnimationUsingKeyFrames 엘리먼트 : 키 프레임을 사용해 실수 값에 애니메이션 효과 주기

■ DoubleAnimationUsingKeyFrames 엘리먼트에서 키 프레임을 사용해 실수 값에 애니메이션 효과를 주는 방법을 보여준다. ▶ 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">
    <Canvas
        Margin="10"
        Background="LightGray">
        <Rectangle Canvas.Left="10" Canvas.Top="100"
            Height="100"
            Width="100"
            StrokeThickness="5"
            Stroke="Black">
            <Rectangle.RenderTransform>
                <TranslateTransform x:Name="translateTransform" />
            </Rectangle.RenderTransform>
            <Rectangle.Triggers>
                <EventTrigger RoutedEvent="Rectangle.Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimationUsingKeyFrames
                                Storyboard.TargetName="translateTransform"
                                Storyboard.TargetProperty="X"
                                Duration="00:00:06"
                                RepeatBehavior="Forever">
                                <LinearDoubleKeyFrame   KeyTime="00:00:03" Value="500" />
                                <DiscreteDoubleKeyFrame KeyTime="00:00:04" Value="400" />
                                <SplineDoubleKeyFrame   KeyTime="00:00:06" Value="0" KeySpline="0.6 0.0 0.9 0.00" />
                            </DoubleAnimationUsingKeyFrames>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Rectangle.Triggers>
        </Rectangle>
    </Canvas>
</Window>

<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">

<Canvas

Margin="10"

Background="LightGray">

<Rectangle Canvas.Left="10" Canvas.Top="100"

Height="100"

Width="100"

StrokeThickness="5"

Stroke="Black">

<Rectangle.RenderTransform>

</Rectangle.RenderTransform>

<Rectangle.Triggers>

<DoubleAnimationUsingKeyFrames

Storyboard.TargetName="translateTransform"

Storyboard.TargetProperty="X"

Duration="00:00:06"

RepeatBehavior="Forever">

</DoubleAnimationUsingKeyFrames>

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Rectangle.Triggers>

</Rectangle>

</Canvas>

</Window>

TestProject.zip

[C#/WPF] DoubleAnimationUsingKeyFrames 클래스 : 키 프레임을 사용해 실수 값에 애니메이션 효과 주기

■ DoubleAnimationUsingKeyFrames 클래스에서 키 프레임을 사용해 실수 값에 애니메이션 효과를 주는 방법을 보여준다. ▶ 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>

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

▶ MainWindow.xaml.cs


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

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

        #region 생성자 - MainWindow()

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

            NameScope.SetNameScope(this, new NameScope());

            #region 이동 변환을 생성한다.

            TranslateTransform translateTransform = new TranslateTransform();

            RegisterName("translateTransform", translateTransform);

            #endregion
            #region 사각형을 생성한다.

            Rectangle rectangle = new Rectangle();

            rectangle.Width           = 100;
            rectangle.Height          = 100;
            rectangle.StrokeThickness = 5;
            rectangle.Stroke          = Brushes.Black;
            rectangle.RenderTransform = translateTransform;

            Canvas.SetTop (rectangle, 100);
            Canvas.SetLeft(rectangle, 10 );

            #endregion
            #region 캔버스를 생성한다.

            Canvas canvas = new Canvas();

            canvas.Margin     = new Thickness(10);
            canvas.Background = Brushes.LightGray;

            canvas.Children.Add(rectangle);

            #endregion
            #region 이동 애니메이션을 생성한다.

            DoubleAnimationUsingKeyFrames translationAnimation = new DoubleAnimationUsingKeyFrames();

            translationAnimation.Duration       = TimeSpan.FromSeconds(6);
            translationAnimation.RepeatBehavior = RepeatBehavior.Forever;

            translationAnimation.KeyFrames.Add
            (
                new LinearDoubleKeyFrame
                (
                    500,
                    KeyTime.FromTimeSpan(TimeSpan.FromSeconds(3))
                )
            );

            translationAnimation.KeyFrames.Add
            (
                new DiscreteDoubleKeyFrame
                (
                    400,
                    KeyTime.FromTimeSpan(TimeSpan.FromSeconds(4))
                )
            );

            translationAnimation.KeyFrames.Add
            (
                new SplineDoubleKeyFrame
                (
                    0,
                    KeyTime.FromTimeSpan(TimeSpan.FromSeconds(6)),
                    new KeySpline(0.6, 0.0, 0.9, 0.0)
                )
            );

            #endregion
            #region 스토리보드를 생성한다.

            Storyboard storyboard = new Storyboard();

            Storyboard.SetTargetName(translationAnimation, "translateTransform");
            Storyboard.SetTargetProperty(translationAnimation, new PropertyPath(TranslateTransform.XProperty));

            storyboard.Children.Add(translationAnimation);

            #endregion

            rectangle.Loaded += delegate(object sender, RoutedEventArgs e)
            {
                storyboard.Begin(this);
            };

            Content = canvas;
        }

        #endregion
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

using System;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public partial class MainWindow : Window

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

NameScope.SetNameScope(this, new NameScope());

#region 이동 변환을 생성한다.

TranslateTransform translateTransform = new TranslateTransform();

RegisterName("translateTransform", translateTransform);

#endregion

#region 사각형을 생성한다.

Rectangle rectangle = new Rectangle();

rectangle.Width = 100;

rectangle.Height = 100;

rectangle.StrokeThickness = 5;

rectangle.Stroke = Brushes.Black;

rectangle.RenderTransform = translateTransform;

Canvas.SetTop (rectangle, 100);

Canvas.SetLeft(rectangle, 10 );

#endregion

#region 캔버스를 생성한다.

Canvas canvas = new Canvas();

canvas.Margin = new Thickness(10);

canvas.Background = Brushes.LightGray;

canvas.Children.Add(rectangle);

#endregion

#region 이동 애니메이션을 생성한다.

DoubleAnimationUsingKeyFrames translationAnimation = new DoubleAnimationUsingKeyFrames();

translationAnimation.Duration = TimeSpan.FromSeconds(6);

translationAnimation.RepeatBehavior = RepeatBehavior.Forever;

translationAnimation.KeyFrames.Add

(

new LinearDoubleKeyFrame

(

500,

KeyTime.FromTimeSpan(TimeSpan.FromSeconds(3))

)

);

translationAnimation.KeyFrames.Add

(

new DiscreteDoubleKeyFrame

(

400,

KeyTime.FromTimeSpan(TimeSpan.FromSeconds(4))

)

);

translationAnimation.KeyFrames.Add

(

new SplineDoubleKeyFrame

(

KeyTime.FromTimeSpan(TimeSpan.FromSeconds(6)),

new KeySpline(0.6, 0.0, 0.9, 0.0)

)

);

#endregion

#region 스토리보드를 생성한다.

Storyboard storyboard = new Storyboard();

Storyboard.SetTargetName(translationAnimation, "translateTransform");

Storyboard.SetTargetProperty(translationAnimation, new PropertyPath(TranslateTransform.XProperty));

storyboard.Children.Add(translationAnimation);

#endregion

rectangle.Loaded += delegate(object sender, RoutedEventArgs e)

{

storyboard.Begin(this);

};

Content = canvas;

}

#endregion

}

TestProject.zip

[C#/WPF] BooleanAnimationUsingKeyFrames 엘리먼트 : 키 프레임을 사용해 불린 값에 애니메이션 효과 주기

■ BooleanAnimationUsingKeyFrames 엘리먼트에서 키 프레임을 사용해 불린 값에 애니메이션 효과를 주는 방법을 보여준다. ▶ 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">
    <Button Name="testButton"
        Width="300"
        Height="100"
        FontSize="24"
        Content="TEST">
        <Button.Triggers>
            <EventTrigger RoutedEvent="Button.Click">
                <BeginStoryboard>
                    <Storyboard>
                        <BooleanAnimationUsingKeyFrames
                            Storyboard.TargetName="testButton"
                            Storyboard.TargetProperty="IsEnabled"
                            Duration="00:00:04"
                            FillBehavior="HoldEnd">
                            <DiscreteBooleanKeyFrame Value="False" KeyTime="00:00:00"   />
                            <DiscreteBooleanKeyFrame Value="True"  KeyTime="00:00:01"   />
                            <DiscreteBooleanKeyFrame Value="False" KeyTime="00:00:02"   />
                            <DiscreteBooleanKeyFrame Value="True"  KeyTime="00:00:03"   />
                            <DiscreteBooleanKeyFrame Value="False" KeyTime="00:00:03.5" />
                            <DiscreteBooleanKeyFrame Value="True"  KeyTime="00:00:04"   />
                        </BooleanAnimationUsingKeyFrames>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Button.Triggers>
    </Button>
</Window>

<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">

<Button Name="testButton"

Width="300"

Height="100"

FontSize="24"

Content="TEST">

<Button.Triggers>

<BooleanAnimationUsingKeyFrames

Storyboard.TargetName="testButton"

Storyboard.TargetProperty="IsEnabled"

Duration="00:00:04"

FillBehavior="HoldEnd">

</BooleanAnimationUsingKeyFrames>

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Button.Triggers>

</Button>

</Window>

TestProject.zip

[C#/WPF] BooleanAnimationUsingKeyFrames 클래스 : 키 프레임을 사용해 불린 값에 애니메이션 효과 주기

■ BooleanAnimationUsingKeyFrames 클래스에서 키 프레임을 사용해 불린 값에 애니메이션 효과를 주는 방법을 보여준다. ▶ 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>

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

▶ MainWindow.xaml.cs


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

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

        #region 생성자 - MainWindow()

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

            NameScope.SetNameScope(this, new NameScope());

            Button testButton = new Button();

            testButton.Width    = 300;
            testButton.Height   = 100;
            testButton.FontSize = 24;
            testButton.Content  = "TEST";

            RegisterName("testButton", testButton);

            BooleanAnimationUsingKeyFrames booleanAnimation = new BooleanAnimationUsingKeyFrames();

            booleanAnimation.Duration = TimeSpan.FromSeconds(4);

            booleanAnimation.KeyFrames.Add(new DiscreteBooleanKeyFrame(false, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(0.0))));
            booleanAnimation.KeyFrames.Add(new DiscreteBooleanKeyFrame(true , KeyTime.FromTimeSpan(TimeSpan.FromSeconds(1.0))));
            booleanAnimation.KeyFrames.Add(new DiscreteBooleanKeyFrame(false, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(2.0))));
            booleanAnimation.KeyFrames.Add(new DiscreteBooleanKeyFrame(true , KeyTime.FromTimeSpan(TimeSpan.FromSeconds(3.0))));
            booleanAnimation.KeyFrames.Add(new DiscreteBooleanKeyFrame(false, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(3.5))));
            booleanAnimation.KeyFrames.Add(new DiscreteBooleanKeyFrame(true , KeyTime.FromTimeSpan(TimeSpan.FromSeconds(4.0))));

            Storyboard.SetTargetName(booleanAnimation, "testButton");
            Storyboard.SetTargetProperty(booleanAnimation, new PropertyPath(Button.IsEnabledProperty));

            Storyboard storyboard = new Storyboard();

            storyboard.Children.Add(booleanAnimation);

            testButton.Click += delegate(object sender, RoutedEventArgs e)
            {
                storyboard.Begin(this);
            };

            Content = testButton;
        }

        #endregion
    }
}

using System;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Media.Animation;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public partial class MainWindow : Window

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

NameScope.SetNameScope(this, new NameScope());

Button testButton = new Button();

testButton.Width = 300;

testButton.Height = 100;

testButton.FontSize = 24;

testButton.Content = "TEST";

RegisterName("testButton", testButton);

BooleanAnimationUsingKeyFrames booleanAnimation = new BooleanAnimationUsingKeyFrames();

booleanAnimation.Duration = TimeSpan.FromSeconds(4);

booleanAnimation.KeyFrames.Add(new DiscreteBooleanKeyFrame(false, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(0.0))));

booleanAnimation.KeyFrames.Add(new DiscreteBooleanKeyFrame(true , KeyTime.FromTimeSpan(TimeSpan.FromSeconds(1.0))));

booleanAnimation.KeyFrames.Add(new DiscreteBooleanKeyFrame(false, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(2.0))));

booleanAnimation.KeyFrames.Add(new DiscreteBooleanKeyFrame(true , KeyTime.FromTimeSpan(TimeSpan.FromSeconds(3.0))));

booleanAnimation.KeyFrames.Add(new DiscreteBooleanKeyFrame(false, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(3.5))));

booleanAnimation.KeyFrames.Add(new DiscreteBooleanKeyFrame(true , KeyTime.FromTimeSpan(TimeSpan.FromSeconds(4.0))));

Storyboard.SetTargetName(booleanAnimation, "testButton");

Storyboard.SetTargetProperty(booleanAnimation, new PropertyPath(Button.IsEnabledProperty));

Storyboard storyboard = new Storyboard();

storyboard.Children.Add(booleanAnimation);

testButton.Click += delegate(object sender, RoutedEventArgs e)

{

storyboard.Begin(this);

};

Content = testButton;

}

#endregion

}

TestProject.zip

[C#/WPF] ObjectAnimationUsingKeyFrames 엘리먼트 : 키 프레임을 사용해 객체에 애니메이션 효과 주기

■ ObjectAnimationUsingKeyFrames 엘리먼트에서 키 프레임을 사용해 객체에 애니메이션 효과를 주는 방법을 보여준다. ▶ 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.Triggers>
        <EventTrigger RoutedEvent="Page.Loaded">
            <BeginStoryboard>
                <Storyboard>
                    <ObjectAnimationUsingKeyFrames
                        Storyboard.TargetProperty="Background"
                        Duration="00:00:04"
                        RepeatBehavior="Forever">
                        <ObjectAnimationUsingKeyFrames.KeyFrames>
                            <DiscreteObjectKeyFrame KeyTime="00:00:01">
                                <DiscreteObjectKeyFrame.Value>
                                    <LinearGradientBrush>
                                        <LinearGradientBrush.GradientStops>
                                            <GradientStop Offset="0.0" Color="Yellow" />
                                            <GradientStop Offset="0.5" Color="Orange" />
                                            <GradientStop Offset="1.0" Color="Red"    />
                                        </LinearGradientBrush.GradientStops>
                                    </LinearGradientBrush>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                            <DiscreteObjectKeyFrame KeyTime="00:00:02">
                                <DiscreteObjectKeyFrame.Value>
                                    <RadialGradientBrush GradientOrigin="0.75 0.25">
                                        <RadialGradientBrush.GradientStops>
                                            <GradientStop Offset="0.0" Color="White"      />
                                            <GradientStop Offset="0.5" Color="MediumBlue" />
                                            <GradientStop Offset="1.0" Color="Black"      />
                                        </RadialGradientBrush.GradientStops>
                                    </RadialGradientBrush>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                            <DiscreteObjectKeyFrame KeyTime="00:00:03">
                                <DiscreteObjectKeyFrame.Value>
                                    <DrawingBrush
                                        Viewport="0 0 0.25 0.25"
                                        TileMode="Tile">
                                        <DrawingBrush.Drawing>
                                            <DrawingGroup>
                                                <DrawingGroup.Children>
                                                    <GeometryDrawing Brush="White">
                                                        <GeometryDrawing.Geometry>
                                                            <RectangleGeometry Rect="0 0 1 1" />
                                                        </GeometryDrawing.Geometry>
                                                    </GeometryDrawing>
                                                    <GeometryDrawing
                                                        Brush="Black"
                                                        Geometry="M 0 0 L 0 0.5 0.5 0.5 0.5 1 1 1 1 0.5 0.5 0.5 0.5 0" />
                                                </DrawingGroup.Children>
                                            </DrawingGroup>
                                        </DrawingBrush.Drawing>
                                    </DrawingBrush>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames.KeyFrames>
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Window.Triggers>
</Window>

<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.Triggers>

<ObjectAnimationUsingKeyFrames

Storyboard.TargetProperty="Background"

Duration="00:00:04"

RepeatBehavior="Forever">

<ObjectAnimationUsingKeyFrames.KeyFrames>

<DiscreteObjectKeyFrame.Value>

<LinearGradientBrush.GradientStops>

</LinearGradientBrush.GradientStops>

</LinearGradientBrush>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

<DiscreteObjectKeyFrame.Value>

<RadialGradientBrush.GradientStops>

</RadialGradientBrush.GradientStops>

</RadialGradientBrush>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

<DiscreteObjectKeyFrame.Value>

<DrawingBrush

Viewport="0 0 0.25 0.25"

TileMode="Tile">

<DrawingBrush.Drawing>

<DrawingGroup.Children>

<GeometryDrawing.Geometry>

</GeometryDrawing.Geometry>

</GeometryDrawing>

<GeometryDrawing

Brush="Black"

Geometry="M 0 0 L 0 0.5 0.5 0.5 0.5 1 1 1 1 0.5 0.5 0.5 0.5 0" />

</DrawingGroup.Children>

</DrawingGroup>

</DrawingBrush.Drawing>

</DrawingBrush>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames.KeyFrames>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Window.Triggers>

</Window>

TestProject.zip

[C#/WPF] ClockController 클래스 : Begin/Pause/Resume/SkipToFill/Stop/Seek 메소드를 사용해 애니메이션 클럭을 대화식으로 제어하기

■ ClockController 클래스의 Begin/Pause/Resume/SkipToFill/Stop/Seek 메소드를 사용해 애니메이션 클럭을 대화식으로 제어하는 방법을 보여준다. ▶ 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>

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

▶ MainWindow.xaml.cs


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

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

        #region Field

        /// <summary>
        /// 탐색 시간 텍스트 박스
        /// </summary>
        private TextBox seekAmountTextBox;

        /// <summary>
        /// 탐색 위치 리스트 박스
        /// </summary>
        private ListBox seekOriginListBox;

        /// <summary>
        /// 탐색 버튼
        /// </summary>
        private Button seekButton;

        /// <summary>
        /// 애니메이션 클럭
        /// </summary>
        private AnimationClock animationClock;

        #endregion

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

        #region 생성자 - MainWindow()

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

            #region 타겟 사각형을 생성한다.

            Rectangle targetRectangle = new Rectangle();

            targetRectangle.Width  = 100;
            targetRectangle.Height = 100;
            targetRectangle.Fill   = Brushes.Orange;

            #endregion

            #region 시작 버튼을 생성한다.

            Button beginButton = new Button();

            beginButton.Width   = 100;
            beginButton.Height  = 30;
            beginButton.Content = "시작";

            #endregion
            #region 중지 버튼을 생성한다.

            Button pauseButton = new Button();

            pauseButton.Margin  = new Thickness(10, 0, 0, 0);
            pauseButton.Width   = 100;
            pauseButton.Height  = 30;
            pauseButton.Content = "중지";

            #endregion
            #region 재개 버튼을 생성한다.

            Button resumeButton = new Button();

            resumeButton.Margin  = new Thickness(10, 0, 0, 0);
            resumeButton.Width   = 100;
            resumeButton.Height  = 30;
            resumeButton.Content = "재개";

            #endregion
            #region 건너뛰기 버튼을 생성한다.

            Button skipToFillButton = new Button();

            skipToFillButton.Margin  = new Thickness(10, 0, 0, 0);
            skipToFillButton.Width   = 100;
            skipToFillButton.Height  = 30;
            skipToFillButton.Content = "건너뛰기";

            #endregion
            #region 중단 버튼을 생성한다.

            Button stopButton = new Button();

            stopButton.Margin  = new Thickness(10, 0, 0, 0);
            stopButton.Width   = 100;
            stopButton.Height  = 30;
            stopButton.Content = "중단";

            #endregion
            #region 버튼 스택 패널을 생성한다.

            StackPanel buttonStackPanel = new StackPanel();

            buttonStackPanel.HorizontalAlignment = HorizontalAlignment.Center;
            buttonStackPanel.Margin              = new Thickness(0, 10 , 0, 0);
            buttonStackPanel.Orientation         = Orientation.Horizontal;

            buttonStackPanel.Children.Add(beginButton);
            buttonStackPanel.Children.Add(pauseButton);
            buttonStackPanel.Children.Add(resumeButton);
            buttonStackPanel.Children.Add(skipToFillButton);
            buttonStackPanel.Children.Add(stopButton);

            #endregion

            #region 탐색 시간 레이블을 생성한다.


            Label seekAmountLabel = new Label();

            seekAmountLabel.VerticalAlignment = VerticalAlignment.Center;
            seekAmountLabel.Content           = "탐색 시간";

            #endregion
            #region 탐색 시간 텍스트 박스를 생성한다.

            this.seekAmountTextBox = new TextBox();

            this.seekAmountTextBox.VerticalAlignment          = VerticalAlignment.Center;
            this.seekAmountTextBox.Width                      = 80;
            this.seekAmountTextBox.Height                     = 25;
            this.seekAmountTextBox.HorizontalContentAlignment = HorizontalAlignment.Center;
            this.seekAmountTextBox.VerticalContentAlignment   = VerticalAlignment.Center;
            this.seekAmountTextBox.Text                       = "00:00:01";

            #endregion
            #region 탐색 위치 레이블을 생성한다.

            Label seekOriginLabel = new Label();

            seekOriginLabel.Margin            = new Thickness(10, 0, 0, 0);
            seekOriginLabel.VerticalAlignment = VerticalAlignment.Center;
            seekOriginLabel.Content           = "탐색 위치";

            #endregion
            #region 탐색 위치 리스트 박스를 생성한다.

            this.seekOriginListBox = new ListBox();

            this.seekOriginListBox.Padding = new Thickness(5);

            this.seekOriginListBox.Items.Add("BeginTime");
            this.seekOriginListBox.Items.Add("Duration");

            this.seekOriginListBox.SelectedIndex = 0;

            #endregion
            #region 탐색 버튼을 생성한다.

            this.seekButton = new Button();

            this.seekButton.VerticalAlignment = VerticalAlignment.Center;
            this.seekButton.Margin            = new Thickness(20, 0, 0, 0);
            this.seekButton.Width             = 100;
            this.seekButton.Height            = 30;
            this.seekButton.Content           = "탐색";

            #endregion
            #region 탐색 스택 패널을 생성한다.

            StackPanel seekStackPanel = new StackPanel();

            seekStackPanel.Margin      = new Thickness(0, 20, 0, 0);
            seekStackPanel.Orientation = Orientation.Horizontal;

            seekStackPanel.Children.Add(seekAmountLabel);
            seekStackPanel.Children.Add(this.seekAmountTextBox);
            seekStackPanel.Children.Add(seekOriginLabel);
            seekStackPanel.Children.Add(this.seekOriginListBox);
            seekStackPanel.Children.Add(this.seekButton);

            #endregion

            #region 메인 스택 패널을 생성한다.

            StackPanel mainStackPanel = new StackPanel();

            mainStackPanel.HorizontalAlignment = HorizontalAlignment.Center;
            mainStackPanel.VerticalAlignment   = VerticalAlignment.Center;

            mainStackPanel.Children.Add(targetRectangle);
            mainStackPanel.Children.Add(buttonStackPanel);
            mainStackPanel.Children.Add(seekStackPanel);

            #endregion

            Content = mainStackPanel;

            #region 이벤트를 추가한다.

            beginButton.Click                  += beginButton_Click;
            pauseButton.Click                  += pauseButton_Click;
            resumeButton.Click                 += resumeButton_Click;
            skipToFillButton.Click             += skipToFillButton_Click;
            stopButton.Click                   += stopButton_Click;
            this.seekAmountTextBox.TextChanged += seekAmountTextBox_TextChanged;
            this.seekButton.Click              += seekButton_Click;

            #endregion

            #region 너비 애니메이션을 생성한다.

            DoubleAnimation widthAnimation = new DoubleAnimation
            (
                100,
                500,
                new Duration(TimeSpan.FromSeconds(5))
            );

            #endregion

            this.animationClock = widthAnimation.CreateClock();

            targetRectangle.ApplyAnimationClock(Rectangle.WidthProperty, this.animationClock);

            this.animationClock.Controller.Stop();
        }

        #endregion

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

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

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

        #endregion
        #region 중지 버튼 클릭시 처리하기 - pauseButton_Click(sender, e)

        /// <summary>
        /// 중지 버튼 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void pauseButton_Click(object sender, RoutedEventArgs e)
        {
            this.animationClock.Controller.Pause();
        }

        #endregion
        #region 재개 버튼 클릭시 처리하기 - resumeButton_Click(sender, e)

        /// <summary>
        /// 재개 버튼 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void resumeButton_Click(object sender, RoutedEventArgs e)
        {
            this.animationClock.Controller.Resume();
        }

        #endregion
        #region 건너뛰기 버튼 클릭시 처리하기 - skipToFillButton_Click(sender, e)

        /// <summary>
        /// 건너뛰기 버튼 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void skipToFillButton_Click(object sender, RoutedEventArgs e)
        {
            this.animationClock.Controller.SkipToFill();
        }

        #endregion
        #region 중단 버튼 클릭시 처리하기 - stopButton_Click(sender, e)

        /// <summary>
        /// 중단 버튼 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void stopButton_Click(object sender, RoutedEventArgs e)
        {
            this.animationClock.Controller.Stop();
        }

        #endregion
        #region 탐색 시간 텍스트 박스 텍스트 변경시 처리하기 - seekAmountTextBox_TextChanged(sender, e)

        /// <summary>
        /// 탐색 시간 텍스트 박스 텍스트 변경시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void seekAmountTextBox_TextChanged(object sender, TextChangedEventArgs e)
        {
            TextBox textBox = e.Source as TextBox;

            if(textBox.Text == null || textBox.Text.Length < 1)
            {
                this.seekButton.IsEnabled = false;
            }
            else
            {
                this.seekButton.IsEnabled = true;
            }
        }

        #endregion
        #region 탐색 버튼 클릭시 처리하기 - seekButton_Click(sender, e)

        /// <summary>
        /// 탐색 버튼 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void seekButton_Click(object sender, RoutedEventArgs e)
        {
            try
            {
                TimeSpan seekAmount = TimeSpan.Parse(this.seekAmountTextBox.Text);

                TimeSeekOrigin selectedOrigin = (TimeSeekOrigin)Enum.Parse(typeof(TimeSeekOrigin), (string)this.seekOriginListBox.SelectedItem);

                this.animationClock.Controller.Seek(seekAmount, selectedOrigin);
            }
            catch(FormatException)
            {
                MessageBox.Show($"{this.seekAmountTextBox.Text} 항목 값이 유효한 시간 범위가 아닙니다.");

                this.seekButton.IsEnabled = false;
            }
        }

        #endregion
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

using System;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public partial class MainWindow : Window

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Field

////////////////////////////////////////////////////////////////////////////////////////// Private

#region Field

/// <summary>

/// 탐색 시간 텍스트 박스

/// </summary>

private TextBox seekAmountTextBox;

/// <summary>

/// 탐색 위치 리스트 박스

/// </summary>

private ListBox seekOriginListBox;

/// <summary>

/// 탐색 버튼

/// </summary>

private Button seekButton;

/// <summary>

/// 애니메이션 클럭

/// </summary>

private AnimationClock animationClock;

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

#region 타겟 사각형을 생성한다.

Rectangle targetRectangle = new Rectangle();

targetRectangle.Width = 100;

targetRectangle.Height = 100;

targetRectangle.Fill = Brushes.Orange;

#endregion

#region 시작 버튼을 생성한다.

Button beginButton = new Button();

beginButton.Width = 100;

beginButton.Height = 30;

beginButton.Content = "시작";

#endregion

#region 중지 버튼을 생성한다.

Button pauseButton = new Button();

pauseButton.Margin = new Thickness(10, 0, 0, 0);

pauseButton.Width = 100;

pauseButton.Height = 30;

pauseButton.Content = "중지";

#endregion

#region 재개 버튼을 생성한다.

Button resumeButton = new Button();

resumeButton.Margin = new Thickness(10, 0, 0, 0);

resumeButton.Width = 100;

resumeButton.Height = 30;

resumeButton.Content = "재개";

#endregion

#region 건너뛰기 버튼을 생성한다.

Button skipToFillButton = new Button();

skipToFillButton.Margin = new Thickness(10, 0, 0, 0);

skipToFillButton.Width = 100;

skipToFillButton.Height = 30;

skipToFillButton.Content = "건너뛰기";

#endregion

#region 중단 버튼을 생성한다.

Button stopButton = new Button();

stopButton.Margin = new Thickness(10, 0, 0, 0);

stopButton.Width = 100;

stopButton.Height = 30;

stopButton.Content = "중단";

#endregion

#region 버튼 스택 패널을 생성한다.

StackPanel buttonStackPanel = new StackPanel();

buttonStackPanel.HorizontalAlignment = HorizontalAlignment.Center;

buttonStackPanel.Margin = new Thickness(0, 10 , 0, 0);

buttonStackPanel.Orientation = Orientation.Horizontal;

buttonStackPanel.Children.Add(beginButton);

buttonStackPanel.Children.Add(pauseButton);

buttonStackPanel.Children.Add(resumeButton);

buttonStackPanel.Children.Add(skipToFillButton);

buttonStackPanel.Children.Add(stopButton);

#endregion

#region 탐색 시간 레이블을 생성한다.

Label seekAmountLabel = new Label();

seekAmountLabel.VerticalAlignment = VerticalAlignment.Center;

seekAmountLabel.Content = "탐색 시간";

#endregion

#region 탐색 시간 텍스트 박스를 생성한다.

this.seekAmountTextBox = new TextBox();

this.seekAmountTextBox.VerticalAlignment = VerticalAlignment.Center;

this.seekAmountTextBox.Width = 80;

this.seekAmountTextBox.Height = 25;

this.seekAmountTextBox.HorizontalContentAlignment = HorizontalAlignment.Center;

this.seekAmountTextBox.VerticalContentAlignment = VerticalAlignment.Center;

this.seekAmountTextBox.Text = "00:00:01";

#endregion

#region 탐색 위치 레이블을 생성한다.

Label seekOriginLabel = new Label();

seekOriginLabel.Margin = new Thickness(10, 0, 0, 0);

seekOriginLabel.VerticalAlignment = VerticalAlignment.Center;

seekOriginLabel.Content = "탐색 위치";

#endregion

#region 탐색 위치 리스트 박스를 생성한다.

this.seekOriginListBox = new ListBox();

this.seekOriginListBox.Padding = new Thickness(5);

this.seekOriginListBox.Items.Add("BeginTime");

this.seekOriginListBox.Items.Add("Duration");

this.seekOriginListBox.SelectedIndex = 0;

#endregion

#region 탐색 버튼을 생성한다.

this.seekButton = new Button();

this.seekButton.VerticalAlignment = VerticalAlignment.Center;

this.seekButton.Margin = new Thickness(20, 0, 0, 0);

this.seekButton.Width = 100;

this.seekButton.Height = 30;

this.seekButton.Content = "탐색";

#endregion

#region 탐색 스택 패널을 생성한다.

StackPanel seekStackPanel = new StackPanel();

seekStackPanel.Margin = new Thickness(0, 20, 0, 0);

seekStackPanel.Orientation = Orientation.Horizontal;

seekStackPanel.Children.Add(seekAmountLabel);

seekStackPanel.Children.Add(this.seekAmountTextBox);

seekStackPanel.Children.Add(seekOriginLabel);

seekStackPanel.Children.Add(this.seekOriginListBox);

seekStackPanel.Children.Add(this.seekButton);

#endregion

#region 메인 스택 패널을 생성한다.

StackPanel mainStackPanel = new StackPanel();

mainStackPanel.HorizontalAlignment = HorizontalAlignment.Center;

mainStackPanel.VerticalAlignment = VerticalAlignment.Center;

mainStackPanel.Children.Add(targetRectangle);

mainStackPanel.Children.Add(buttonStackPanel);

mainStackPanel.Children.Add(seekStackPanel);

#endregion

Content = mainStackPanel;

#region 이벤트를 추가한다.

beginButton.Click += beginButton_Click;

pauseButton.Click += pauseButton_Click;

resumeButton.Click += resumeButton_Click;

skipToFillButton.Click += skipToFillButton_Click;

stopButton.Click += stopButton_Click;

this.seekAmountTextBox.TextChanged += seekAmountTextBox_TextChanged;

this.seekButton.Click += seekButton_Click;

#endregion

#region 너비 애니메이션을 생성한다.

DoubleAnimation widthAnimation = new DoubleAnimation

(

100,

500,

new Duration(TimeSpan.FromSeconds(5))

);

#endregion

this.animationClock = widthAnimation.CreateClock();

targetRectangle.ApplyAnimationClock(Rectangle.WidthProperty, this.animationClock);

this.animationClock.Controller.Stop();

}

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

////////////////////////////////////////////////////////////////////////////////////////// Private

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

/// <summary>

/// 시작 버튼 클릭시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void beginButton_Click(object sender, RoutedEventArgs e)

{

this.animationClock.Controller.Begin();

}

#endregion

#region 중지 버튼 클릭시 처리하기 - pauseButton_Click(sender, e)

/// <summary>

/// 중지 버튼 클릭시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void pauseButton_Click(object sender, RoutedEventArgs e)

{

this.animationClock.Controller.Pause();

}

#endregion

#region 재개 버튼 클릭시 처리하기 - resumeButton_Click(sender, e)

/// <summary>

/// 재개 버튼 클릭시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void resumeButton_Click(object sender, RoutedEventArgs e)

{

this.animationClock.Controller.Resume();

}

#endregion

#region 건너뛰기 버튼 클릭시 처리하기 - skipToFillButton_Click(sender, e)

/// <summary>

/// 건너뛰기 버튼 클릭시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void skipToFillButton_Click(object sender, RoutedEventArgs e)

{

this.animationClock.Controller.SkipToFill();

}

#endregion

#region 중단 버튼 클릭시 처리하기 - stopButton_Click(sender, e)

/// <summary>

/// 중단 버튼 클릭시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void stopButton_Click(object sender, RoutedEventArgs e)

{

this.animationClock.Controller.Stop();

}

#endregion

#region 탐색 시간 텍스트 박스 텍스트 변경시 처리하기 - seekAmountTextBox_TextChanged(sender, e)

/// <summary>

/// 탐색 시간 텍스트 박스 텍스트 변경시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void seekAmountTextBox_TextChanged(object sender, TextChangedEventArgs e)

{

TextBox textBox = e.Source as TextBox;

if(textBox.Text == null || textBox.Text.Length < 1)

{

this.seekButton.IsEnabled = false;

}

else

{

this.seekButton.IsEnabled = true;

}

#endregion

#region 탐색 버튼 클릭시 처리하기 - seekButton_Click(sender, e)

/// <summary>

/// 탐색 버튼 클릭시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void seekButton_Click(object sender, RoutedEventArgs e)

{

try

{

TimeSpan seekAmount = TimeSpan.Parse(this.seekAmountTextBox.Text);

TimeSeekOrigin selectedOrigin = (TimeSeekOrigin)Enum.Parse(typeof(TimeSeekOrigin), (string)this.seekOriginListBox.SelectedItem);

this.animationClock.Controller.Seek(seekAmount, selectedOrigin);

}

catch(FormatException)

{

MessageBox.Show($"{this.seekAmountTextBox.Text} 항목 값이 유효한 시간 범위가 아닙니다.");

this.seekButton.IsEnabled = false;

}

#endregion

}

TestProject.zip

[C#/WPF] Trigger 엘리먼트 : 속성 값 변경시 애니메이션 트리거하기

■ Trigger 엘리먼트를 사용해 속성 값 변경시 애니메이션을 트리거하는 방법을 보여준다. ▶ 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>
        <Style x:Key="EllipseStyleKey" TargetType="{x:Type Ellipse}">
            <Setter Property="Opacity" Value="0.25" />
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Trigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation
                                    Storyboard.TargetProperty="Opacity"
                                    Duration="00:00:01"
                                    To="1" />
                            </Storyboard>
                        </BeginStoryboard>
                    </Trigger.EnterActions>
                    <Trigger.ExitActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation
                                    Storyboard.TargetProperty="Opacity"
                                    Duration="00:00:01"
                                    To="0.25" />
                            </Storyboard>
                        </BeginStoryboard>
                    </Trigger.ExitActions>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <StackPanel
        HorizontalAlignment="Center"
        VerticalAlignment="Center">
        <Ellipse
            Style="{StaticResource EllipseStyleKey}"
            Width="250"
            Height="250"
            Fill="Gold" />
        <TextBlock
            HorizontalAlignment="Center"
            Margin="0 30 0 0"
            Text="마우스를 원 위로 이동시켜 주시기 바랍니다." />
    </StackPanel>
</Window>

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

<Style.Triggers>

<Trigger.EnterActions>

<DoubleAnimation

Storyboard.TargetProperty="Opacity"

Duration="00:00:01"

To="1" />

</Storyboard>

</BeginStoryboard>

</Trigger.EnterActions>

<Trigger.ExitActions>

<DoubleAnimation

Storyboard.TargetProperty="Opacity"

Duration="00:00:01"

To="0.25" />

</Storyboard>

</BeginStoryboard>

</Trigger.ExitActions>

</Trigger>

</Style.Triggers>

</Style>

</Window.Resources>

<StackPanel

HorizontalAlignment="Center"

VerticalAlignment="Center">

<Ellipse

Style="{StaticResource EllipseStyleKey}"

Width="250"

Height="250"

Fill="Gold" />

<TextBlock

HorizontalAlignment="Center"

Margin="0 30 0 0"

Text="마우스를 원 위로 이동시켜 주시기 바랍니다." />

</StackPanel>

</Window>

TestProject.zip

[C#/WPF] BeginStoryboard 엘리먼트 : HandoffBehavior 속성을 사용해 핸드오프 동작 설정하기

■ BeginStoryboard 엘리먼트 : HandoffBehavior 속성을 사용해 핸드오프 동작을 설정하는 방법을 보여준다. ▶ 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>
        <Style x:Key="SnapShotAndReplaceButtonStyleKey" TargetType="{x:Type Button}">
            <Setter Property="Button.RenderTransform">
                <Setter.Value>
                    <ScaleTransform
                        CenterX="50"
                        CenterY="50"
                        ScaleX="1"
                        ScaleY="1" />
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <EventTrigger RoutedEvent="Mouse.MouseEnter">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation
                                    Storyboard.TargetProperty="RenderTransform.ScaleX"
                                    Duration="00:00:02"
                                    To="3" />
                                <DoubleAnimation
                                    Storyboard.TargetProperty="RenderTransform.ScaleY"
                                    Duration="00:00:02"
                                    To="3" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
                <EventTrigger RoutedEvent="Mouse.MouseLeave">
                    <EventTrigger.Actions>
                        <BeginStoryboard HandoffBehavior="SnapshotAndReplace">
                            <Storyboard>
                                <DoubleAnimation
                                    Storyboard.TargetProperty="RenderTransform.ScaleX"
                                    Duration="00:00:02" />
                                <DoubleAnimation
                                    Storyboard.TargetProperty="RenderTransform.ScaleY"
                                    Duration="00:00:02" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
            </Style.Triggers>
        </Style>
        <Style x:Key="ComposeButtonStyleKey" TargetType="{x:Type Button}">
            <Setter Property="Button.RenderTransform">
                <Setter.Value>
                    <ScaleTransform
                        CenterX="50"
                        CenterY="50"
                        ScaleX="1"
                        ScaleY="1" />
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <EventTrigger RoutedEvent="Mouse.MouseEnter">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation
                                    Storyboard.TargetProperty="RenderTransform.ScaleX"
                                    Duration="00:00:02"
                                    To="3" />
                                <DoubleAnimation
                                    Storyboard.TargetProperty="RenderTransform.ScaleY"
                                    Duration="00:00:02"
                                    To="3" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
                <EventTrigger RoutedEvent="Mouse.MouseLeave">
                    <EventTrigger.Actions>
                        <BeginStoryboard HandoffBehavior="Compose">
                            <Storyboard>
                                <DoubleAnimation
                                    Storyboard.TargetProperty="RenderTransform.ScaleX"
                                    Duration="00:00:02" />
                                <DoubleAnimation
                                    Storyboard.TargetProperty="RenderTransform.ScaleY"
                                    Duration="00:00:02" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <StackPanel
        HorizontalAlignment="Center"
        VerticalAlignment="Center"
        Orientation="Horizontal">
        <Button
            Style="{StaticResource SnapShotAndReplaceButtonStyleKey}"
            Width="150"
            Height="150">
            SnapShotAndReplace
        </Button>
        <Button
            Style="{StaticResource ComposeButtonStyleKey}"
            Margin="150 0 0 0"
            Width="150"
            Height="150">
            Compose
        </Button>
    </StackPanel>
</Window>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

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

<Setter.Value>

<ScaleTransform

CenterX="50"

CenterY="50"

ScaleX="1"

ScaleY="1" />

</Setter.Value>

</Setter>

<Style.Triggers>

<EventTrigger.Actions>

<DoubleAnimation

Storyboard.TargetProperty="RenderTransform.ScaleX"

Duration="00:00:02"

To="3" />

<DoubleAnimation

Storyboard.TargetProperty="RenderTransform.ScaleY"

Duration="00:00:02"

To="3" />

</Storyboard>

</BeginStoryboard>

</EventTrigger.Actions>

</EventTrigger>

<EventTrigger.Actions>

<DoubleAnimation

Storyboard.TargetProperty="RenderTransform.ScaleX"

Duration="00:00:02" />

<DoubleAnimation

Storyboard.TargetProperty="RenderTransform.ScaleY"

Duration="00:00:02" />

</Storyboard>

</BeginStoryboard>

</EventTrigger.Actions>

</EventTrigger>

</Style.Triggers>

</Style>

<Setter.Value>

<ScaleTransform

CenterX="50"

CenterY="50"

ScaleX="1"

ScaleY="1" />

</Setter.Value>

</Setter>

<Style.Triggers>

<EventTrigger.Actions>

<DoubleAnimation

Storyboard.TargetProperty="RenderTransform.ScaleX"

Duration="00:00:02"

To="3" />

<DoubleAnimation

Storyboard.TargetProperty="RenderTransform.ScaleY"

Duration="00:00:02"

To="3" />

</Storyboard>

</BeginStoryboard>

</EventTrigger.Actions>

</EventTrigger>

<EventTrigger.Actions>

<DoubleAnimation

Storyboard.TargetProperty="RenderTransform.ScaleX"

Duration="00:00:02" />

<DoubleAnimation

Storyboard.TargetProperty="RenderTransform.ScaleY"

Duration="00:00:02" />

</Storyboard>

</BeginStoryboard>

</EventTrigger.Actions>

</EventTrigger>

</Style.Triggers>

</Style>

</Window.Resources>

<StackPanel

HorizontalAlignment="Center"

VerticalAlignment="Center"

Orientation="Horizontal">

<Button

Style="{StaticResource SnapShotAndReplaceButtonStyleKey}"

Width="150"

Height="150">

SnapShotAndReplace

</Button>

<Button

Style="{StaticResource ComposeButtonStyleKey}"

Margin="150 0 0 0"

Width="150"

Height="150">

Compose

</Button>

</StackPanel>

</Window>

TestProject.zip