MICROSOFT Archives - 90 중 3 번째 페이지

[C#/WPF] CompositionTarget 클래스 : Rendering 정적 이벤트를 사용해 프레임당 간격으로 렌더링하기

■ CompositionTarget 클래스의 Rendering 정적 이벤트를 사용해 프레임당 간격으로 렌더링하는 방법을 보여준다. ▶ 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"
    Background="FloralWhite"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Window.Resources>
        <Style TargetType="{x:Type Label}">
            <Setter Property="HorizontalAlignment" Value="Right"  />
            <Setter Property="Foreground"          Value="Maroon" />
        </Style>
    </Window.Resources>
    <Grid Margin="10">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*"    />
        </Grid.RowDefinitions>
        <TextBlock Grid.Row="0"
            TextWrapping="Wrap">
아래 캔버스 객체 위로 마우스를 이동해 주시기 바랍니다.<LineBreak />
MouseMoveEvent 핸들러는 CompositionTarget.Rendering 핸들러에서 사용되는 좌표 값을 업데이트합니다.
캔버스의 배경색을 결정합니다. 아래 숫자는 경과 시간(초), 렌더링된 프레임 수 및 평균 프레임 속도를 보여줍니다.
        </TextBlock>
        <Grid Grid.Row="1"
            Margin="10">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Label Grid.Row="0" Grid.Column="0"
                Content="경과 시간 (HH:mm:ss) :" />
            <Label Grid.Row="1" Grid.Column="0"
                Content="프레임 수 :" />
            <Label Grid.Row="2" Grid.Column="0"
                Content="평균 FPS :" />
            <Label Name="stopwatchLabel" Grid.Row="0" Grid.Column="1" />
            <Label Name="frameCounterLabel" Grid.Row="1" Grid.Column="1" />
            <Label Name="frameRateLabel" Grid.Row="2" Grid.Column="1" />
        </Grid>
        <Canvas Name="canvas" Grid.Row="2"
            Margin="0 10 0 0"/>
    </Grid>
</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"

Background="FloralWhite"

FontFamily="나눔고딕코딩"

FontSize="16">

<Window.Resources>

</Style>

</Window.Resources>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<TextBlock Grid.Row="0"

TextWrapping="Wrap">

아래 캔버스 객체 위로 마우스를 이동해 주시기 바랍니다.<LineBreak />

MouseMoveEvent 핸들러는 CompositionTarget.Rendering 핸들러에서 사용되는 좌표 값을 업데이트합니다.

캔버스의 배경색을 결정합니다. 아래 숫자는 경과 시간(초), 렌더링된 프레임 수 및 평균 프레임 속도를 보여줍니다.

</TextBlock>

<Grid Grid.Row="1"

Margin="10">

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Label Grid.Row="0" Grid.Column="0"

Content="경과 시간 (HH:mm:ss) :" />

<Label Grid.Row="1" Grid.Column="0"

Content="프레임 수 :" />

<Label Grid.Row="2" Grid.Column="0"

Content="평균 FPS :" />

</Grid>

<Canvas Name="canvas" Grid.Row="2"

Margin="0 10 0 0"/>

</Grid>

</Window>

▶ MainWindow.xaml.cs


using System;
using System.Diagnostics;
using System.Globalization;
using System.Windows;
using System.Windows.Input;
using System.Windows.Media;

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

        #region Field

        /// <summary>
        /// 스톱워치
        /// </summary>
        private readonly Stopwatch stopwatch = new Stopwatch();

        /// <summary>
        /// 프레임 카운터
        /// </summary>
        private double frameCounter;

        /// <summary>
        /// 마우스 포인트
        /// </summary>
        private Point mousePoint;

        #endregion

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

        #region 생성자 - MainWindow()

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

            CompositionTarget.Rendering += CompositionTarget_Rendering;
            canvas.MouseMove            += canvas_MouseMove;
        }

        #endregion

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

        #region 컴포지션 타켓 렌더링시 처리하기 - CompositionTarget_Rendering(sender, e)

        /// <summary>
        /// 컴포지션 타켓 렌더링시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void CompositionTarget_Rendering(object sender, EventArgs e)
        {
            if(this.frameCounter++ == 0)
            {
                this.stopwatch.Start();
            }

            long frameRate = (long)(this.frameCounter / this.stopwatch.Elapsed.TotalSeconds);

            if(frameRate > 0)
            {
                this.stopwatchLabel.Content = this.stopwatch.Elapsed.ToString();

                this.frameCounterLabel.Content = this.frameCounter.ToString(CultureInfo.InvariantCulture);

                this.frameRateLabel.Content = frameRate.ToString();
            }

            byte red  = (byte)(this.mousePoint.X / 3.0);
            byte blue = (byte)(this.mousePoint.Y / 2.0);

            this.canvas.Background = new SolidColorBrush(Color.FromRgb(red, 0, blue));
        }

        #endregion
        #region 캔버스 마우스 이동시 처리하기 - canvas_MouseMove(sender, e)

        /// <summary>
        /// 캔버스 마우스 이동시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void canvas_MouseMove(object sender, MouseEventArgs e)
        {
            this.mousePoint = e.GetPosition(sender as UIElement);
        }

        #endregion
    }
}

100

101

102

103

104

105

106

using System;

using System.Diagnostics;

using System.Globalization;

using System.Windows;

using System.Windows.Input;

using System.Windows.Media;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public partial class MainWindow : Window

{

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

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

#region Field

/// <summary>

/// 스톱워치

/// </summary>

private readonly Stopwatch stopwatch = new Stopwatch();

/// <summary>

/// 프레임 카운터

/// </summary>

private double frameCounter;

/// <summary>

/// 마우스 포인트

/// </summary>

private Point mousePoint;

#endregion

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

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

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

CompositionTarget.Rendering += CompositionTarget_Rendering;

canvas.MouseMove += canvas_MouseMove;

}

#endregion

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

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

#region 컴포지션 타켓 렌더링시 처리하기 - CompositionTarget_Rendering(sender, e)

/// <summary>

/// 컴포지션 타켓 렌더링시 처리하기

/// </summary>

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

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

private void CompositionTarget_Rendering(object sender, EventArgs e)

{

if(this.frameCounter++ == 0)

{

this.stopwatch.Start();

}

long frameRate = (long)(this.frameCounter / this.stopwatch.Elapsed.TotalSeconds);

if(frameRate > 0)

{

this.stopwatchLabel.Content = this.stopwatch.Elapsed.ToString();

this.frameCounterLabel.Content = this.frameCounter.ToString(CultureInfo.InvariantCulture);

this.frameRateLabel.Content = frameRate.ToString();

}

byte red = (byte)(this.mousePoint.X / 3.0);

byte blue = (byte)(this.mousePoint.Y / 2.0);

this.canvas.Background = new SolidColorBrush(Color.FromRgb(red, 0, blue));

}

#endregion

#region 캔버스 마우스 이동시 처리하기 - canvas_MouseMove(sender, e)

/// <summary>

/// 캔버스 마우스 이동시 처리하기

/// </summary>

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

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

private void canvas_MouseMove(object sender, MouseEventArgs e)

{

this.mousePoint = e.GetPosition(sender as UIElement);

}

#endregion

}

TestProject.zip

[C#/WPF] VisualTreeHelper 클래스 : GetDrawing 정적 메소드를 사용해 비주얼 객체에서 드로잉 그룹 구하기

■ VisualTreeHelper 클래스의 GetDrawing 정적 메소드를 사용해 비주얼 객체에서 드로잉 그룹을 구하는 방법을 보여준다. ▶ 예제 코드 (C#)


using System.Windows.Media;

Visual sourceVisual;

...

DrawingGroup drawingGroup = VisualTreeHelper.GetDrawing(sourceVisual);

using System.Windows.Media;

Visual sourceVisual;

...

DrawingGroup drawingGroup = VisualTreeHelper.GetDrawing(sourceVisual);

[C#/WPF] VisualTreeHelper 클래스 : GetOffset 정적 메소드를 사용해 비주얼 객체의 오프셋 구하기

■ VisualTreeHelper 클래스의 GetOffset 정적 메소드를 사용해 비주얼 객체의 오프셋을 구하는 방법을 보여준다. 오프셋은 마진 값을 고려하며 비주얼 객체의 부모를 기준으로 한다.

[C#/WPF] VisualTreeHelper 클래스 : HitTest 정적 메소드에서 히트 테스트 필터 콜백 처리하기

■ VisualTreeHelper 클래스의 HitTest 정적 메소드에서 히트 테스트 필터 콜백을 처리하는 방법을 보여준다. ▶ 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">
        <Border
            BorderThickness="1"
            BorderBrush="Black">
            <Canvas Name="canvas"
                Width="400"
                Height="300">
                <Rectangle Canvas.Left="50" Canvas.Top="50"
                    Width="100"
                    Height="100"
                    Fill="Red" />
                <Rectangle Canvas.Left="75" Canvas.Top="75"
                    Width="100"
                    Height="100"
                    Fill="Green" />
                <Rectangle Canvas.Left="100" Canvas.Top="100"
                    Width="100"
                    Height="100"
                    Fill="Blue" />
            </Canvas>
        </Border>
        <TextBlock Name="textBlock"
            HorizontalAlignment="Center"
            Margin="0 10 0 0"
            Foreground="Blue" />
    </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">

<Border

BorderThickness="1"

BorderBrush="Black">

<Canvas Name="canvas"

Width="400"

Height="300">

<Rectangle Canvas.Left="50" Canvas.Top="50"

Width="100"

Height="100"

Fill="Red" />

<Rectangle Canvas.Left="75" Canvas.Top="75"

Width="100"

Height="100"

Fill="Green" />

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

Width="100"

Height="100"

Fill="Blue" />

</Canvas>

</Border>

<TextBlock Name="textBlock"

HorizontalAlignment="Center"

Margin="0 10 0 0"

Foreground="Blue" />

</StackPanel>

</Window>

▶ MainWindow.xaml.cs


using System.Collections.Generic;
using System.Windows;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Shapes;

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

        #region Field

        /// <summary>
        /// 히트 테스트 결과 리스트
        /// </summary>
        private List<DependencyObject> histTestResultList = new List<DependencyObject>();

        #endregion

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

        #region 생성자 - MainWindow()

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

            MouseDown += Window_MouseDown;
        }

        #endregion

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

        #region 윈도우 마우스 이동시 처리하기 - Window_MouseDown(sender, e)

        /// <summary>
        /// 윈도우 마우스 이동시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void Window_MouseDown(object sender, MouseButtonEventArgs e)
        {
            Point mousePoint = e.GetPosition(this.canvas);

            HitTestResult result = VisualTreeHelper.HitTest(this.canvas, mousePoint);

            this.histTestResultList.Clear();

            VisualTreeHelper.HitTest
            (
                this.canvas,
                new HitTestFilterCallback(ProcessHitTestFilterCallback),
                new HitTestResultCallback(ProcessHitTestResultCallback),
                new PointHitTestParameters(mousePoint)
            );

            this.textBlock.Text = $"비주얼 히트 수 : {this.histTestResultList.Count}";
        }

        #endregion

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

        #region 히트 테스트 필터 콜백 처리하기 - ProcessHitTestFilterCallback(d)

        /// <summary>
        /// 히트 테스트 필터 콜백 처리하기
        /// </summary>
        /// <param name="d">의존 객체</param>
        /// <returns>히트 테스트 필터 동작</returns>
        public HitTestFilterBehavior ProcessHitTestFilterCallback(DependencyObject d)
        {
            if(d is Rectangle rectangle)
            {
                if(rectangle.Fill == Brushes.Green)
                {
                    return HitTestFilterBehavior.ContinueSkipSelfAndChildren;
                }
                else
                {
                    return HitTestFilterBehavior.Continue;
                }
            }
            else
            {
                return HitTestFilterBehavior.Continue;
            }
        }

        #endregion
        #region 히트 테스트 결과 콜백 처리하기 - ProcessHitTestResultCallback(result)

        /// <summary>
        /// 히트 테스트 결과 콜백 처리하기
        /// </summary>
        /// <param name="result">히트 테스트 결과</param>
        /// <returns>히트 테스트 결과 동작</returns>
        public HitTestResultBehavior ProcessHitTestResultCallback(HitTestResult result)
        {
            this.histTestResultList.Add(result.VisualHit);

            return HitTestResultBehavior.Continue;
        }

        #endregion
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

using System.Collections.Generic;

using System.Windows;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Shapes;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public partial class MainWindow : Window

{

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

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

#region Field

/// <summary>

/// 히트 테스트 결과 리스트

/// </summary>

private List<DependencyObject> histTestResultList = new List<DependencyObject>();

#endregion

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

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

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

MouseDown += Window_MouseDown;

}

#endregion

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

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

//////////////////////////////////////////////////////////////////////////////// Event

#region 윈도우 마우스 이동시 처리하기 - Window_MouseDown(sender, e)

/// <summary>

/// 윈도우 마우스 이동시 처리하기

/// </summary>

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

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

private void Window_MouseDown(object sender, MouseButtonEventArgs e)

{

Point mousePoint = e.GetPosition(this.canvas);

HitTestResult result = VisualTreeHelper.HitTest(this.canvas, mousePoint);

this.histTestResultList.Clear();

VisualTreeHelper.HitTest

(

this.canvas,

new HitTestFilterCallback(ProcessHitTestFilterCallback),

new HitTestResultCallback(ProcessHitTestResultCallback),

new PointHitTestParameters(mousePoint)

);

this.textBlock.Text = $"비주얼 히트 수 : {this.histTestResultList.Count}";

}

#endregion

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

#region 히트 테스트 필터 콜백 처리하기 - ProcessHitTestFilterCallback(d)

/// <summary>

/// 히트 테스트 필터 콜백 처리하기

/// </summary>

/// <param name="d">의존 객체</param>

/// <returns>히트 테스트 필터 동작</returns>

public HitTestFilterBehavior ProcessHitTestFilterCallback(DependencyObject d)

{

if(d is Rectangle rectangle)

{

if(rectangle.Fill == Brushes.Green)

{

return HitTestFilterBehavior.ContinueSkipSelfAndChildren;

}

else

{

return HitTestFilterBehavior.Continue;

}

else

{

return HitTestFilterBehavior.Continue;

}

#endregion

#region 히트 테스트 결과 콜백 처리하기 - ProcessHitTestResultCallback(result)

/// <summary>

/// 히트 테스트 결과 콜백 처리하기

/// </summary>

/// <param name="result">히트 테스트 결과</param>

/// <returns>히트 테스트 결과 동작</returns>

public HitTestResultBehavior ProcessHitTestResultCallback(HitTestResult result)

{

this.histTestResultList.Add(result.VisualHit);

return HitTestResultBehavior.Continue;

}

#endregion

}

TestProject.zip

[C#/WPF] VisualTreeHelper 클래스 : HitTest 정적 메소드에서 히트 테스트 결과 콜백 처리하기

■ VisualTreeHelper 클래스의 HitTest 정적 메소드에서 히트 테스트 결과 콜백을 처리하는 방법을 보여준다. ▶ 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">
        <Border
            BorderThickness="1"
            BorderBrush="Black">
            <Canvas Name="canvas"
                Width="400"
                Height="300">
                <Rectangle Canvas.Left="50" Canvas.Top="50"
                    Width="100"
                    Height="100"
                    Fill="Red" />
                <Rectangle Canvas.Left="75" Canvas.Top="75"
                    Width="100"
                    Height="100"
                    Fill="Green" />
                <Rectangle Canvas.Left="100" Canvas.Top="100"
                    Width="100"
                    Height="100"
                    Fill="Blue" />
            </Canvas>
        </Border>
        <TextBlock Name="textBlock"
            HorizontalAlignment="Center"
            Margin="0 10 0 0"
            Foreground="Blue" />
    </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">

<Border

BorderThickness="1"

BorderBrush="Black">

<Canvas Name="canvas"

Width="400"

Height="300">

<Rectangle Canvas.Left="50" Canvas.Top="50"

Width="100"

Height="100"

Fill="Red" />

<Rectangle Canvas.Left="75" Canvas.Top="75"

Width="100"

Height="100"

Fill="Green" />

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

Width="100"

Height="100"

Fill="Blue" />

</Canvas>

</Border>

<TextBlock Name="textBlock"

HorizontalAlignment="Center"

Margin="0 10 0 0"

Foreground="Blue" />

</StackPanel>

</Window>

▶ MainWindow.xaml.cs


using System.Collections.Generic;
using System.Windows;
using System.Windows.Input;
using System.Windows.Media;

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

        #region Field

        /// <summary>
        /// 히트 테스트 결과 리스트
        /// </summary>
        private List<DependencyObject> histTestResultList = new List<DependencyObject>();

        #endregion

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

        #region 생성자 - MainWindow()

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

            MouseDown += Window_MouseDown;
        }

        #endregion

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

        #region 윈도우 마우스 이동시 처리하기 - Window_MouseDown(sender, e)

        /// <summary>
        /// 윈도우 마우스 이동시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void Window_MouseDown(object sender, MouseButtonEventArgs e)
        {
            Point mousePoint = e.GetPosition(this.canvas);

            HitTestResult result = VisualTreeHelper.HitTest(this.canvas, mousePoint);

            this.histTestResultList.Clear();

            VisualTreeHelper.HitTest(this.canvas, null, new HitTestResultCallback(ProcessHitTestResultCallback), new PointHitTestParameters(mousePoint));

            this.textBlock.Text = $"비주얼 히트 수 : {this.histTestResultList.Count}";
        }

        #endregion

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

        #region 히트 테스트 결과 콜백 처리하기 - ProcessHitTestResultCallback(result)

        /// <summary>
        /// 히트 테스트 결과 콜백 처리하기
        /// </summary>
        /// <param name="result">히트 테스트 결과</param>
        /// <returns>히트 테스트 결과 동작</returns>
        public HitTestResultBehavior ProcessHitTestResultCallback(HitTestResult result)
        {
            this.histTestResultList.Add(result.VisualHit);

            return HitTestResultBehavior.Continue;
        }

        #endregion
    }
}

using System.Collections.Generic;

using System.Windows;

using System.Windows.Input;

using System.Windows.Media;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public partial class MainWindow : Window

{

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

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

#region Field

/// <summary>

/// 히트 테스트 결과 리스트

/// </summary>

private List<DependencyObject> histTestResultList = new List<DependencyObject>();

#endregion

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

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

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

MouseDown += Window_MouseDown;

}

#endregion

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

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

//////////////////////////////////////////////////////////////////////////////// Event

#region 윈도우 마우스 이동시 처리하기 - Window_MouseDown(sender, e)

/// <summary>

/// 윈도우 마우스 이동시 처리하기

/// </summary>

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

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

private void Window_MouseDown(object sender, MouseButtonEventArgs e)

{

Point mousePoint = e.GetPosition(this.canvas);

HitTestResult result = VisualTreeHelper.HitTest(this.canvas, mousePoint);

this.histTestResultList.Clear();

VisualTreeHelper.HitTest(this.canvas, null, new HitTestResultCallback(ProcessHitTestResultCallback), new PointHitTestParameters(mousePoint));

this.textBlock.Text = $"비주얼 히트 수 : {this.histTestResultList.Count}";

}

#endregion

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

#region 히트 테스트 결과 콜백 처리하기 - ProcessHitTestResultCallback(result)

/// <summary>

/// 히트 테스트 결과 콜백 처리하기

/// </summary>

/// <param name="result">히트 테스트 결과</param>

/// <returns>히트 테스트 결과 동작</returns>

public HitTestResultBehavior ProcessHitTestResultCallback(HitTestResult result)

{

this.histTestResultList.Add(result.VisualHit);

return HitTestResultBehavior.Continue;

}

#endregion

}

TestProject.zip

[C#/WPF] VisualTreeHelper 클래스 : HitTest 정적 메소드를 사용해 디폴트 히트 테스트하기

■ VisualTreeHelper 클래스의 HitTest 정적 메소드를 사용해 디폴트 히트 테스트를 하는 방법을 보여준다. ▶ 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">
        <Canvas Name="canvas"
            Width="400"
            Height="300"
            Background="LightGray" />
        <TextBlock Name="textBlock"
            HorizontalAlignment="Center"
            Margin="0 10 0 0"
            Foreground="Blue" />
    </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">

<Canvas Name="canvas"

Width="400"

Height="300"

Background="LightGray" />

<TextBlock Name="textBlock"

HorizontalAlignment="Center"

Margin="0 10 0 0"

Foreground="Blue" />

</StackPanel>

</Window>

▶ MainWindow.xaml.cs


using System.Windows;
using System.Windows.Input;
using System.Windows.Media;

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

        #region 생성자 - MainWindow()

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

            MouseMove += Window_MouseMove;
        }

        #endregion

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

        #region 윈도우 마우스 이동시 처리하기 - Window_MouseMove(sender, e)

        /// <summary>
        /// 윈도우 마우스 이동시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void Window_MouseMove(object sender, MouseEventArgs e)
        {
            Point mousePoint = e.GetPosition(this.canvas);

            HitTestResult result = VisualTreeHelper.HitTest(this.canvas, mousePoint);

            if(result != null)
            {
                this.textBlock.Text = "mouse over canvas";
            }
            else
            {
                this.textBlock.Text = string.Empty;
            }
        }

        #endregion
    }
}

using System.Windows;

using System.Windows.Input;

using System.Windows.Media;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public partial class MainWindow : Window

{

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

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

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

MouseMove += Window_MouseMove;

}

#endregion

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

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

#region 윈도우 마우스 이동시 처리하기 - Window_MouseMove(sender, e)

/// <summary>

/// 윈도우 마우스 이동시 처리하기

/// </summary>

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

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

private void Window_MouseMove(object sender, MouseEventArgs e)

{

Point mousePoint = e.GetPosition(this.canvas);

HitTestResult result = VisualTreeHelper.HitTest(this.canvas, mousePoint);

if(result != null)

{

this.textBlock.Text = "mouse over canvas";

}

else

{

this.textBlock.Text = string.Empty;

}

#endregion

}

TestProject.zip

[C#/WPF] MediaElement 엘리먼트 : 변환 사용하기

■ MediaElement 엘리먼트에서 변환을 사용하는 방법을 보여준다. ▶ 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"
    Background="Black"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <MediaElement Source="MEDIA/sample.avi">
        <MediaElement.LayoutTransform>
            <RotateTransform Angle="45" />
        </MediaElement.LayoutTransform>
    </MediaElement>
</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"

Background="Black"

FontFamily="나눔고딕코딩"

FontSize="16">

<MediaElement.LayoutTransform>

</MediaElement.LayoutTransform>

</MediaElement>

</Window>

TestProject.zip

[C#/WPF] MediaElement 엘리먼트 : 애니메이션과 함께 미디어 재생하기

■ MediaElement 엘리먼트에서 애니메이션과 함께 미디어를 재생하는 방법을 보여준다. ▶ 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"
    Background="Black"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <StackPanel
        HorizontalAlignment="Center"
        VerticalAlignment="Center"
        Orientation="Horizontal">
        <MediaElement Name="mediaElement"
            Width="250"
            Height="250">
            <MediaElement.Triggers>
                <EventTrigger RoutedEvent="MediaElement.Loaded">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard SlipBehavior="Slip">
                                <MediaTimeline
                                    Source="MEDIA\sample.avi"
                                    BeginTime="00:00:00"
                                    Duration="00:00:30" />
                                <DoubleAnimationUsingKeyFrames
                                    Storyboard.TargetName="ellipseGeometry1"
                                    Storyboard.TargetProperty="RadiusY"
                                    RepeatBehavior="10x">
                                    <DoubleAnimationUsingKeyFrames.KeyFrames>
                                        <LinearDoubleKeyFrame KeyTime="00:00:00.4" Value="80" />
                                        <SplineDoubleKeyFrame KeyTime="00:00:01"   Value="0"  KeySpline="0.6 0.0 0.9 0.0" />
                                    </DoubleAnimationUsingKeyFrames.KeyFrames>
                                </DoubleAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames
                                    Storyboard.TargetName="ellipseGeometry2"
                                    Storyboard.TargetProperty="RadiusX"
                                    RepeatBehavior="10x">
                                    <DoubleAnimationUsingKeyFrames.KeyFrames>
                                        <LinearDoubleKeyFrame KeyTime="00:00:00.4" Value="80" />
                                        <SplineDoubleKeyFrame KeyTime="00:00:01"   Value="0" KeySpline="0.6 0.0 0.9 0.0" />
                                    </DoubleAnimationUsingKeyFrames.KeyFrames>
                                </DoubleAnimationUsingKeyFrames>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
            </MediaElement.Triggers>
        </MediaElement>
        <Border
            Margin="10 0 0 0"
            BorderThickness="1"
            BorderBrush="Black">
            <Canvas
                Width="250"
                Height="250"
                Background="White">
                <Path
                    StrokeThickness="5"
                    Stroke="Purple">
                    <Path.Data>
                        <EllipseGeometry x:Name="ellipseGeometry1"
                            Center="125 125"
                            RadiusX="15"
                            RadiusY="10" />
                    </Path.Data>
                </Path>
                <Path
                    StrokeThickness="5"
                    Stroke="Gold">
                    <Path.Data>
                        <EllipseGeometry x:Name="ellipseGeometry2"
                            Center="125 125"
                            RadiusX="10"
                            RadiusY="15" />
                    </Path.Data>
                </Path>
            </Canvas>
        </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"

Background="Black"

FontFamily="나눔고딕코딩"

FontSize="16">

<StackPanel

HorizontalAlignment="Center"

VerticalAlignment="Center"

Orientation="Horizontal">

<MediaElement Name="mediaElement"

Width="250"

Height="250">

<MediaElement.Triggers>

<EventTrigger.Actions>

<MediaTimeline

Source="MEDIA\sample.avi"

BeginTime="00:00:00"

Duration="00:00:30" />

<DoubleAnimationUsingKeyFrames

Storyboard.TargetName="ellipseGeometry1"

Storyboard.TargetProperty="RadiusY"

RepeatBehavior="10x">

<DoubleAnimationUsingKeyFrames.KeyFrames>

</DoubleAnimationUsingKeyFrames.KeyFrames>

</DoubleAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFrames

Storyboard.TargetName="ellipseGeometry2"

Storyboard.TargetProperty="RadiusX"

RepeatBehavior="10x">

<DoubleAnimationUsingKeyFrames.KeyFrames>

</DoubleAnimationUsingKeyFrames.KeyFrames>

</DoubleAnimationUsingKeyFrames>

</Storyboard>

</BeginStoryboard>

</EventTrigger.Actions>

</EventTrigger>

</MediaElement.Triggers>

</MediaElement>

<Border

Margin="10 0 0 0"

BorderThickness="1"

BorderBrush="Black">

<Canvas

Width="250"

Height="250"

Background="White">

<Path

StrokeThickness="5"

Stroke="Purple">

<Path.Data>

<EllipseGeometry x:Name="ellipseGeometry1"

Center="125 125"

RadiusX="15"

RadiusY="10" />

</Path.Data>

</Path>

<Path

StrokeThickness="5"

Stroke="Gold">

<Path.Data>

<EllipseGeometry x:Name="ellipseGeometry2"

Center="125 125"

RadiusX="10"

RadiusY="15" />

</Path.Data>

</Path>

</Canvas>

</Border>

</StackPanel>

</Window>

TestProject.zip

[C#/WPF] MediaElement 엘리먼트 : 미디어 재생 반복하기

■ MediaElement 엘리먼트에서 미디어 재생을 반복하는 방법을 보여준다. ▶ 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"
    Background="Black"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <MediaElement Name="mediaElement">
        <MediaElement.Triggers>
            <EventTrigger RoutedEvent="MediaElement.Loaded">
                <EventTrigger.Actions>
                    <BeginStoryboard>
                        <Storyboard>
                            <MediaTimeline
                                Storyboard.TargetName="mediaElement"
                                Source="MEDIA\sample.avi"
                                RepeatBehavior="Forever" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger.Actions>
            </EventTrigger>
        </MediaElement.Triggers>
    </MediaElement>
</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"

Background="Black"

FontFamily="나눔고딕코딩"

FontSize="16">

<MediaElement.Triggers>

<EventTrigger.Actions>

<MediaTimeline

Storyboard.TargetName="mediaElement"

Source="MEDIA\sample.avi"

RepeatBehavior="Forever" />

</Storyboard>

</BeginStoryboard>

</EventTrigger.Actions>

</EventTrigger>

</MediaElement.Triggers>

</MediaElement>

</Window>

TestProject.zip

[C#/WPF] MediaElement 엘리먼트 : 사용자 이벤트시 미디어 재생 트리거하기

■ MediaElement 엘리먼트에서 사용자 이벤트시 미디어 재생을 트리거하는 방법을 보여준다. ▶ 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"
    Background="Black"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <StackPanel
        HorizontalAlignment="Center"
        VerticalAlignment="Center">
        <MediaElement Name="mediaElement" />
        <Button
            HorizontalAlignment="Center"
            Padding="5"
            Content="소리를 내기 위해 클릭해 주시기 바랍니다.">
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Click">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <MediaTimeline
                                    Storyboard.TargetName="mediaElement"
                                    Source="C:\WINDOWS\Media\Ring01.wav" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
            </Button.Triggers>
        </Button>
    </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"

Background="Black"

FontFamily="나눔고딕코딩"

FontSize="16">

<StackPanel

HorizontalAlignment="Center"

VerticalAlignment="Center">

<Button

HorizontalAlignment="Center"

Padding="5"

Content="소리를 내기 위해 클릭해 주시기 바랍니다.">

<Button.Triggers>

<EventTrigger.Actions>

<MediaTimeline

Storyboard.TargetName="mediaElement"

Source="C:\WINDOWS\Media\Ring01.wav" />

</Storyboard>

</BeginStoryboard>

</EventTrigger.Actions>

</EventTrigger>

</Button.Triggers>

</Button>

</StackPanel>

</Window>

TestProject.zip

[C#/WPF] MediaElement 엘리먼트 : 스토리보드를 사용해 제어하기

■ MediaElement 엘리먼트에서 스토리보드를 사용해 제어하는 방법을 보여준다. ▶ 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"
    Background="Black"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <StackPanel
        HorizontalAlignment="Center"
        VerticalAlignment="Center">
        <MediaElement Name="mediaElement"
            Width="600"
            Height="400"
            Stretch="Fill" />
        <StackPanel
            HorizontalAlignment="Center"
            Margin="0 10 0 0"
            Orientation="Horizontal">
            <Image Name="playImage"
                Source="IMAGE\play.png" />
            <Image Name="pauseImage"
                Margin="10 0 0 0"
                Source="IMAGE\pause.png" />
            <Image Name="resumeImage"
                Margin="10 0 0 0"
                Source="IMAGE\resume.png" />
            <Image Name="stopImage"
                Margin="10 0 0 0"
                Source="IMAGE\stop.png" />
        </StackPanel>
        <Slider Name="timelineSlider"
            HorizontalAlignment="Center"
            Margin="0 10 0 0"
            Width="250" />
        <StackPanel.Triggers>
            <EventTrigger
                SourceName="playImage"
                RoutedEvent="Image.MouseDown">
                <EventTrigger.Actions>
                    <BeginStoryboard Name= "beginStoryboard">
                        <Storyboard SlipBehavior="Slip">
                            <MediaTimeline x:Name="mediaTimeline"
                                Source="MEDIA\sample.avi"
                                Storyboard.TargetName="mediaElement"
                                BeginTime="00:00:00"
                                Duration="00:00:30" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger.Actions>
            </EventTrigger>
            <EventTrigger
                SourceName="pauseImage"
                RoutedEvent="Image.MouseDown">
                <EventTrigger.Actions>
                    <PauseStoryboard BeginStoryboardName="beginStoryboard" />
                </EventTrigger.Actions>
            </EventTrigger>
            <EventTrigger
                SourceName="resumeImage"
                RoutedEvent="Image.MouseDown">
                <EventTrigger.Actions>
                    <ResumeStoryboard BeginStoryboardName="beginStoryboard" />
                </EventTrigger.Actions>
            </EventTrigger>
            <EventTrigger
                SourceName="stopImage"
                RoutedEvent="Image.MouseDown">
                <EventTrigger.Actions>
                    <StopStoryboard BeginStoryboardName="beginStoryboard" />
                </EventTrigger.Actions>
            </EventTrigger>
        </StackPanel.Triggers>
    </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"

Background="Black"

FontFamily="나눔고딕코딩"

FontSize="16">

<StackPanel

HorizontalAlignment="Center"

VerticalAlignment="Center">

<MediaElement Name="mediaElement"

Width="600"

Height="400"

Stretch="Fill" />

<StackPanel

HorizontalAlignment="Center"

Margin="0 10 0 0"

Orientation="Horizontal">

<Image Name="playImage"

Source="IMAGE\play.png" />

<Image Name="pauseImage"

Margin="10 0 0 0"

Source="IMAGE\pause.png" />

<Image Name="resumeImage"

Margin="10 0 0 0"

Source="IMAGE\resume.png" />

<Image Name="stopImage"

Margin="10 0 0 0"

Source="IMAGE\stop.png" />

</StackPanel>

<Slider Name="timelineSlider"

HorizontalAlignment="Center"

Margin="0 10 0 0"

Width="250" />

<StackPanel.Triggers>

<EventTrigger

SourceName="playImage"

RoutedEvent="Image.MouseDown">

<EventTrigger.Actions>

<MediaTimeline x:Name="mediaTimeline"

Source="MEDIA\sample.avi"

Storyboard.TargetName="mediaElement"

BeginTime="00:00:00"

Duration="00:00:30" />

</Storyboard>

</BeginStoryboard>

</EventTrigger.Actions>

</EventTrigger>

<EventTrigger

SourceName="pauseImage"

RoutedEvent="Image.MouseDown">

<EventTrigger.Actions>

</EventTrigger.Actions>

</EventTrigger>

<EventTrigger

SourceName="resumeImage"

RoutedEvent="Image.MouseDown">

<EventTrigger.Actions>

</EventTrigger.Actions>

</EventTrigger>

<EventTrigger

SourceName="stopImage"

RoutedEvent="Image.MouseDown">

<EventTrigger.Actions>

</EventTrigger.Actions>

</EventTrigger>

</StackPanel.Triggers>

</StackPanel>

</Window>

▶ MainWindow.xaml.cs


using System;
using System.Windows;

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

        #region 생성자 - MainWindow()

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

            this.mediaElement.MediaOpened             += mediaElement_MediaOpened;
            this.mediaTimeline.CurrentTimeInvalidated += mediaTimeline_CurrentTimeInvalidated;
        }

        #endregion

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

        #region 미디어 엘리먼트 미디어 오픈시 처리하기 - mediaElement_MediaOpened(sender, e)

        /// <summary>
        /// 미디어 엘리먼트 미디어 오픈시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void mediaElement_MediaOpened(object sender, EventArgs e)
        {
            this.timelineSlider.Maximum = this.mediaElement.NaturalDuration.TimeSpan.TotalMilliseconds;
        }

        #endregion
        #region 미디어 타임라인 현재 시간 무효화시 처리하기 - mediaTimeline_CurrentTimeInvalidated(sender, e)

        /// <summary>
        /// 미디어 타임라인 현재 시간 무효화시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void mediaTimeline_CurrentTimeInvalidated(object sender, EventArgs e)
        {
            this.timelineSlider.Value = this.mediaElement.Position.TotalMilliseconds;
        }

        #endregion
    }
}

using System;

using System.Windows;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public partial class MainWindow : Window

{

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

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

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

this.mediaElement.MediaOpened += mediaElement_MediaOpened;

this.mediaTimeline.CurrentTimeInvalidated += mediaTimeline_CurrentTimeInvalidated;

}

#endregion

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

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

#region 미디어 엘리먼트 미디어 오픈시 처리하기 - mediaElement_MediaOpened(sender, e)

/// <summary>

/// 미디어 엘리먼트 미디어 오픈시 처리하기

/// </summary>

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

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

private void mediaElement_MediaOpened(object sender, EventArgs e)

{

this.timelineSlider.Maximum = this.mediaElement.NaturalDuration.TimeSpan.TotalMilliseconds;

}

#endregion

#region 미디어 타임라인 현재 시간 무효화시 처리하기 - mediaTimeline_CurrentTimeInvalidated(sender, e)

/// <summary>

/// 미디어 타임라인 현재 시간 무효화시 처리하기

/// </summary>

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

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

private void mediaTimeline_CurrentTimeInvalidated(object sender, EventArgs e)

{

this.timelineSlider.Value = this.mediaElement.Position.TotalMilliseconds;

}

#endregion

}

TestProject.zip

[C#/WPF] MediaElement 엘리먼트 : 재생/중지/중단/볼륨/속도 제어하기

■ MediaElement 엘리먼트를 사용해 미디어의 재생/중지/중단/볼륨/속도를 제어하는 방법을 보여준다. ▶ 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"
    Background="Black"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <StackPanel
        HorizontalAlignment="Center"
        VerticalAlignment="Center">
        <MediaElement Name="mediaElement"
            Source="MEDIA\sample.avi"
            Width="600"
            Height="400"
            LoadedBehavior="Manual"
            UnloadedBehavior="Stop" />
        <StackPanel
            HorizontalAlignment="Center"
            Margin="0 10 0 0"
            Orientation="Horizontal">
            <Image Name="playImage"
                Source="IMAGE\play.png" />
            <Image Name="pauseImage"
                Margin="10 0 0 0"
                Source="IMAGE\pause.png" />
            <Image Name="stopImage"
                Margin="10 0 0 0"
                Source="IMAGE\stop.png" />
            <TextBlock
                VerticalAlignment="Center"
                Margin="10 0 0 0"
                Foreground="White">
                Volume
            </TextBlock>
            <Slider Name="volumeSlider"
                VerticalAlignment="Center"
                Margin="10 5 0 0"
                Width="70"
                Minimum="0"
                Maximum="1"
                Value="0.5" />
            <TextBlock
                VerticalAlignment="Center"
                Margin="10 0 0 0"
                Foreground="White">
                Speed
            </TextBlock>
            <Slider Name="speedRatioSlider"
                VerticalAlignment="Center"
                Margin="10 5 0 0"
                Width="70"
                Value="1" />
            <TextBlock
                VerticalAlignment="Center"
                Margin="10 0 0 0"
                Foreground="White">
                Seek To
            </TextBlock>
            <Slider Name="seekToSlider"
                VerticalAlignment="Center"
                Margin="10 5 0 0"
                Width="70" />
        </StackPanel>
    </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"

Background="Black"

FontFamily="나눔고딕코딩"

FontSize="16">

<StackPanel

HorizontalAlignment="Center"

VerticalAlignment="Center">

<MediaElement Name="mediaElement"

Source="MEDIA\sample.avi"

Width="600"

Height="400"

LoadedBehavior="Manual"

UnloadedBehavior="Stop" />

<StackPanel

HorizontalAlignment="Center"

Margin="0 10 0 0"

Orientation="Horizontal">

<Image Name="playImage"

Source="IMAGE\play.png" />

<Image Name="pauseImage"

Margin="10 0 0 0"

Source="IMAGE\pause.png" />

<Image Name="stopImage"

Margin="10 0 0 0"

Source="IMAGE\stop.png" />

<TextBlock

VerticalAlignment="Center"

Margin="10 0 0 0"

Foreground="White">

Volume

</TextBlock>

<Slider Name="volumeSlider"

VerticalAlignment="Center"

Margin="10 5 0 0"

Width="70"

Minimum="0"

Maximum="1"

Value="0.5" />

<TextBlock

VerticalAlignment="Center"

Margin="10 0 0 0"

Foreground="White">

Speed

</TextBlock>

<Slider Name="speedRatioSlider"

VerticalAlignment="Center"

Margin="10 5 0 0"

Width="70"

Value="1" />

<TextBlock

VerticalAlignment="Center"

Margin="10 0 0 0"

Foreground="White">

Seek To

</TextBlock>

<Slider Name="seekToSlider"

VerticalAlignment="Center"

Margin="10 5 0 0"

Width="70" />

</StackPanel>

</Window>

▶ MainWindow.xaml.cs


using System;
using System.Windows;
using System.Windows.Input;

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

        #region 생성자 - MainWindow()

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

            this.mediaElement.MediaOpened      += mediaElement_MediaOpened;
            this.mediaElement.MediaEnded       += mediaElement_MediaEnded;
            this.playImage.MouseDown           += playImage_MouseDown;
            this.pauseImage.MouseDown          += pauseImage_MouseDown;
            this.stopImage.MouseDown           += stopImage_MouseDown;
            this.volumeSlider.ValueChanged     += volumeSlider_ValueChanged;
            this.speedRatioSlider.ValueChanged += speedRatioSlider_ValueChanged;
            this.seekToSlider.ValueChanged     += seekToSlider_ValueChanged;
        }

        #endregion

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

        #region 미디어 엘리먼트 미디어 오픈시 처리하기 - mediaElement_MediaOpened(sender, e)

        /// <summary>
        /// 미디어 엘리먼트 미디어 오픈시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void mediaElement_MediaOpened(object sender, EventArgs e)
        {
            this.seekToSlider.Maximum = this.mediaElement.NaturalDuration.TimeSpan.TotalMilliseconds;
        }

        #endregion
        #region 미디어 엘리먼트 미디어 종료시 처리하기 - mediaElement_MediaEnded(sender, e)

        /// <summary>
        /// 미디어 엘리먼트 미디어 종료시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void mediaElement_MediaEnded(object sender, EventArgs e)
        {
            this.mediaElement.Stop();
        }

        #endregion
        #region 재생 이미지 마우스 DOWN 처리하기 - playImage_MouseDown(sender, e)

        /// <summary>
        /// 재생 이미지 마우스 DOWN 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void playImage_MouseDown(object sender, MouseButtonEventArgs e)
        {
            this.mediaElement.Play();

            SetMediaElementData();
        }

        #endregion
        #region 중지 이미지 마우스 DOWN 처리하기 - pauseImage_MouseDown(sender, e)

        /// <summary>
        /// 중지 이미지 마우스 DOWN 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void pauseImage_MouseDown(object sender, MouseButtonEventArgs e)
        {
            this.mediaElement.Pause();
        }

        #endregion
        #region 중단 이미지 마우스 DOWN 처리하기 - stopImage_MouseDown(sender, e)

        /// <summary>
        /// 중단 이미지 마우스 DOWN 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void stopImage_MouseDown(object sender, MouseButtonEventArgs e)
        {
            this.mediaElement.Stop();
        }

        #endregion
        #region 볼륨 슬라이더 값 변경시 처리하기 - volumeSlider_ValueChanged(sender, e)

        /// <summary>
        /// 볼륨 슬라이더 값 변경시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void volumeSlider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
        {
            this.mediaElement.Volume = (double)this.volumeSlider.Value;
        }

        #endregion
        #region 속도 비율 슬라이더 값 변경시 처리하기 - speedRatioSlider_ValueChanged(sender, e)

        /// <summary>
        /// 속도 비율 슬라이더 값 변경시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void speedRatioSlider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
        {
            this.mediaElement.SpeedRatio = (double)this.speedRatioSlider.Value;
        }

        #endregion
        #region 탐색 슬라이더 값 변경시 처리하기 - seekToSlider_ValueChanged(sender, e)

        /// <summary>
        /// 탐색 슬라이더 값 변경시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void seekToSlider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
        {
            TimeSpan timeSpan = new TimeSpan(0, 0, 0, 0, (int)this.seekToSlider.Value);

            this.mediaElement.Position = timeSpan;
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////// Event

        #region 미디어 엘리먼트 데이터 설정하기 - SetMediaElementData()

        /// <summary>
        /// 미디어 엘리먼트 데이터 설정하기
        /// </summary>
        private void SetMediaElementData()
        {
            this.mediaElement.Volume     = (double)this.volumeSlider.Value;
            this.mediaElement.SpeedRatio = (double)this.speedRatioSlider.Value;
        }

        #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

using System;

using System.Windows;

using System.Windows.Input;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public partial class MainWindow : Window

{

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

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

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

this.mediaElement.MediaOpened += mediaElement_MediaOpened;

this.mediaElement.MediaEnded += mediaElement_MediaEnded;

this.playImage.MouseDown += playImage_MouseDown;

this.pauseImage.MouseDown += pauseImage_MouseDown;

this.stopImage.MouseDown += stopImage_MouseDown;

this.volumeSlider.ValueChanged += volumeSlider_ValueChanged;

this.speedRatioSlider.ValueChanged += speedRatioSlider_ValueChanged;

this.seekToSlider.ValueChanged += seekToSlider_ValueChanged;

}

#endregion

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

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

//////////////////////////////////////////////////////////////////////////////// Event

#region 미디어 엘리먼트 미디어 오픈시 처리하기 - mediaElement_MediaOpened(sender, e)

/// <summary>

/// 미디어 엘리먼트 미디어 오픈시 처리하기

/// </summary>

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

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

private void mediaElement_MediaOpened(object sender, EventArgs e)

{

this.seekToSlider.Maximum = this.mediaElement.NaturalDuration.TimeSpan.TotalMilliseconds;

}

#endregion

#region 미디어 엘리먼트 미디어 종료시 처리하기 - mediaElement_MediaEnded(sender, e)

/// <summary>

/// 미디어 엘리먼트 미디어 종료시 처리하기

/// </summary>

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

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

private void mediaElement_MediaEnded(object sender, EventArgs e)

{

this.mediaElement.Stop();

}

#endregion

#region 재생 이미지 마우스 DOWN 처리하기 - playImage_MouseDown(sender, e)

/// <summary>

/// 재생 이미지 마우스 DOWN 처리하기

/// </summary>

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

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

private void playImage_MouseDown(object sender, MouseButtonEventArgs e)

{

this.mediaElement.Play();

SetMediaElementData();

}

#endregion

#region 중지 이미지 마우스 DOWN 처리하기 - pauseImage_MouseDown(sender, e)

/// <summary>

/// 중지 이미지 마우스 DOWN 처리하기

/// </summary>

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

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

private void pauseImage_MouseDown(object sender, MouseButtonEventArgs e)

{

this.mediaElement.Pause();

}

#endregion

#region 중단 이미지 마우스 DOWN 처리하기 - stopImage_MouseDown(sender, e)

/// <summary>

/// 중단 이미지 마우스 DOWN 처리하기

/// </summary>

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

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

private void stopImage_MouseDown(object sender, MouseButtonEventArgs e)

{

this.mediaElement.Stop();

}

#endregion

#region 볼륨 슬라이더 값 변경시 처리하기 - volumeSlider_ValueChanged(sender, e)

/// <summary>

/// 볼륨 슬라이더 값 변경시 처리하기

/// </summary>

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

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

private void volumeSlider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)

{

this.mediaElement.Volume = (double)this.volumeSlider.Value;

}

#endregion

#region 속도 비율 슬라이더 값 변경시 처리하기 - speedRatioSlider_ValueChanged(sender, e)

/// <summary>

/// 속도 비율 슬라이더 값 변경시 처리하기

/// </summary>

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

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

private void speedRatioSlider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)

{

this.mediaElement.SpeedRatio = (double)this.speedRatioSlider.Value;

}

#endregion

#region 탐색 슬라이더 값 변경시 처리하기 - seekToSlider_ValueChanged(sender, e)

/// <summary>

/// 탐색 슬라이더 값 변경시 처리하기

/// </summary>

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

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

private void seekToSlider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)

{

TimeSpan timeSpan = new TimeSpan(0, 0, 0, 0, (int)this.seekToSlider.Value);

this.mediaElement.Position = timeSpan;

}

#endregion

//////////////////////////////////////////////////////////////////////////////// Event

#region 미디어 엘리먼트 데이터 설정하기 - SetMediaElementData()

/// <summary>

/// 미디어 엘리먼트 데이터 설정하기

/// </summary>

private void SetMediaElementData()

{

this.mediaElement.Volume = (double)this.volumeSlider.Value;

this.mediaElement.SpeedRatio = (double)this.speedRatioSlider.Value;

}

#endregion

}

TestProject.zip

[C#/WPF] DoubleAnimationUsingPath 클래스 : PathGeometry/Source 속성을 사용해 경로를 따라 객체에 애니메이션 효과 주기

■ DoubleAnimationUsingPath 클래스의 PathGeometry/Source 속성을 사용해 경로를 따라 객체에 애니메이션 효과를 주는 방법을 보여준다. ▶ 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 회전 변환을 생성한다.

            RotateTransform rotateTransform = new RotateTransform();

            RegisterName("rotateTransform", rotateTransform);

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

            TranslateTransform translateTransform = new TranslateTransform();

            RegisterName("translateTransform", translateTransform);

            #endregion
            #region 변환 그룹을 생성한다.

            TransformGroup transformGroup = new TransformGroup();

            transformGroup.Children.Add(rotateTransform);
            transformGroup.Children.Add(translateTransform);

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

            Rectangle rectangle = new Rectangle();

            rectangle.Width           = 30;
            rectangle.Height          = 30;
            rectangle.Fill            = Brushes.Blue;
            rectangle.RenderTransform = transformGroup;

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

            Canvas canvas = new Canvas();

            canvas.Width      = 400;
            canvas.Height     = 400;
            canvas.Background = Brushes.LightGray;

            canvas.Children.Add(rectangle);

            #endregion

            #region 폴리 베지어 세그먼트를 생성한다.

            PolyBezierSegment polyBezierSegment = new PolyBezierSegment();

            polyBezierSegment.Points.Add(new Point(35 , 0  ));
            polyBezierSegment.Points.Add(new Point(135, 0  ));
            polyBezierSegment.Points.Add(new Point(160, 100));
            polyBezierSegment.Points.Add(new Point(180, 190));
            polyBezierSegment.Points.Add(new Point(285, 200));
            polyBezierSegment.Points.Add(new Point(310, 100));

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

            PathFigure pathFigure = new PathFigure();

            pathFigure.StartPoint = new Point(10, 100);

            pathFigure.Segments.Add(polyBezierSegment);

            #endregion
            #region 패스 지오메트리를 생성한다.

            PathGeometry pathGeometry = new PathGeometry();

            pathGeometry.Figures.Add(pathFigure);

            pathGeometry.Freeze();

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

            DoubleAnimationUsingPath rotateAnimation = new DoubleAnimationUsingPath();

            rotateAnimation.PathGeometry = pathGeometry;
            rotateAnimation.Source       = PathAnimationSource.Angle;
            rotateAnimation.Duration     = TimeSpan.FromSeconds(5);

            Storyboard.SetTargetName(rotateAnimation, "rotateTransform");
            Storyboard.SetTargetProperty(rotateAnimation, new PropertyPath(RotateTransform.AngleProperty));

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

            DoubleAnimationUsingPath translateXAnimation = new DoubleAnimationUsingPath();

            translateXAnimation.PathGeometry = pathGeometry;
            translateXAnimation.Source       = PathAnimationSource.X;
            translateXAnimation.Duration     = TimeSpan.FromSeconds(5);

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

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

            DoubleAnimationUsingPath translateYAnimation = new DoubleAnimationUsingPath();

            translateYAnimation.PathGeometry = pathGeometry;
            translateYAnimation.Source       = PathAnimationSource.Y;
            translateYAnimation.Duration     = TimeSpan.FromSeconds(5);

            Storyboard.SetTargetName(translateYAnimation, "translateTransform");
            Storyboard.SetTargetProperty(translateYAnimation, new PropertyPath(TranslateTransform.YProperty));

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

            Storyboard storyboard = new Storyboard();

            storyboard.RepeatBehavior = RepeatBehavior.Forever;
            storyboard.AutoReverse    = true;

            storyboard.Children.Add(rotateAnimation);
            storyboard.Children.Add(translateXAnimation);
            storyboard.Children.Add(translateYAnimation);

            #endregion

            Content = canvas;

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

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

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 회전 변환을 생성한다.

RotateTransform rotateTransform = new RotateTransform();

RegisterName("rotateTransform", rotateTransform);

#endregion

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

TranslateTransform translateTransform = new TranslateTransform();

RegisterName("translateTransform", translateTransform);

#endregion

#region 변환 그룹을 생성한다.

TransformGroup transformGroup = new TransformGroup();

transformGroup.Children.Add(rotateTransform);

transformGroup.Children.Add(translateTransform);

#endregion

#region 사각형을 생성한다.

Rectangle rectangle = new Rectangle();

rectangle.Width = 30;

rectangle.Height = 30;

rectangle.Fill = Brushes.Blue;

rectangle.RenderTransform = transformGroup;

#endregion

#region 캔버스를 생성한다.

Canvas canvas = new Canvas();

canvas.Width = 400;

canvas.Height = 400;

canvas.Background = Brushes.LightGray;

canvas.Children.Add(rectangle);

#endregion

#region 폴리 베지어 세그먼트를 생성한다.

PolyBezierSegment polyBezierSegment = new PolyBezierSegment();

polyBezierSegment.Points.Add(new Point(35 , 0 ));

polyBezierSegment.Points.Add(new Point(135, 0 ));

polyBezierSegment.Points.Add(new Point(160, 100));

polyBezierSegment.Points.Add(new Point(180, 190));

polyBezierSegment.Points.Add(new Point(285, 200));

polyBezierSegment.Points.Add(new Point(310, 100));

#endregion

#region 패스 피겨를 생성한다.

PathFigure pathFigure = new PathFigure();

pathFigure.StartPoint = new Point(10, 100);

pathFigure.Segments.Add(polyBezierSegment);

#endregion

#region 패스 지오메트리를 생성한다.

PathGeometry pathGeometry = new PathGeometry();

pathGeometry.Figures.Add(pathFigure);

pathGeometry.Freeze();

#endregion

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

DoubleAnimationUsingPath rotateAnimation = new DoubleAnimationUsingPath();

rotateAnimation.PathGeometry = pathGeometry;

rotateAnimation.Source = PathAnimationSource.Angle;

rotateAnimation.Duration = TimeSpan.FromSeconds(5);

Storyboard.SetTargetName(rotateAnimation, "rotateTransform");

Storyboard.SetTargetProperty(rotateAnimation, new PropertyPath(RotateTransform.AngleProperty));

#endregion

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

DoubleAnimationUsingPath translateXAnimation = new DoubleAnimationUsingPath();

translateXAnimation.PathGeometry = pathGeometry;

translateXAnimation.Source = PathAnimationSource.X;

translateXAnimation.Duration = TimeSpan.FromSeconds(5);

Storyboard.SetTargetName(translateXAnimation, "translateTransform");

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

#endregion

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

DoubleAnimationUsingPath translateYAnimation = new DoubleAnimationUsingPath();

translateYAnimation.PathGeometry = pathGeometry;

translateYAnimation.Source = PathAnimationSource.Y;

translateYAnimation.Duration = TimeSpan.FromSeconds(5);

Storyboard.SetTargetName(translateYAnimation, "translateTransform");

Storyboard.SetTargetProperty(translateYAnimation, new PropertyPath(TranslateTransform.YProperty));

#endregion

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

Storyboard storyboard = new Storyboard();

storyboard.RepeatBehavior = RepeatBehavior.Forever;

storyboard.AutoReverse = true;

storyboard.Children.Add(rotateAnimation);

storyboard.Children.Add(translateXAnimation);

storyboard.Children.Add(translateYAnimation);

#endregion

Content = canvas;

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

{

storyboard.Begin(this);

};

}

#endregion

}

TestProject.zip

[C#/WPF] DoubleAnimationUsingPath 엘리먼트 : PathGeometry/Source 속성을 사용해 경로를 따라 객체에 애니메이션 효과 주기

■ DoubleAnimationUsingPath 엘리먼트의 PathGeometry/Source 속성을 사용해 경로를 따라 객체에 애니메이션 효과를 주는 방법을 보여준다. ▶ 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"
    xmlns:options="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options"
    Width="800"
    Height="600"
    Title="TestProject"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Window.Resources>
        <PathGeometry x:Key="PathGeometryKey"
            Figures="M 10 100 C 35 0 135 0 160 100 180 190 285 200 310 100"
            options:Freeze="True" />
    </Window.Resources>
    <Canvas
        Width="400"
        Height="400"
        Background="LightGray">
        <Rectangle
            Width="30"
            Height="30"
            Fill="Blue">
            <Rectangle.RenderTransform>
                <TransformGroup>
                    <RotateTransform x:Name="rotateTransform" />
                    <TranslateTransform x:Name="translateTransform" />
                </TransformGroup>
            </Rectangle.RenderTransform>
            <Rectangle.Triggers>
                <EventTrigger RoutedEvent="Path.Loaded">
                    <BeginStoryboard>
                        <Storyboard
                            RepeatBehavior="Forever"
                            AutoReverse="True">
                            <DoubleAnimationUsingPath
                                Storyboard.TargetName="rotateTransform"
                                Storyboard.TargetProperty="Angle"
                                PathGeometry="{StaticResource PathGeometryKey}"
                                Source="Angle"
                                Duration="00:00:05" />
                            <DoubleAnimationUsingPath
                                Storyboard.TargetName="translateTransform"
                                Storyboard.TargetProperty="X"
                                PathGeometry="{StaticResource PathGeometryKey}"
                                Source="X"
                                Duration="00:00:05" />
                            <DoubleAnimationUsingPath
                                Storyboard.TargetName="translateTransform"
                                Storyboard.TargetProperty="Y"
                                PathGeometry="{StaticResource PathGeometryKey}"
                                Source="Y"
                                Duration="00:00:05" />
                        </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"

xmlns:options="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options"

Width="800"

Height="600"

Title="TestProject"

FontFamily="나눔고딕코딩"

FontSize="16">

<Window.Resources>

<PathGeometry x:Key="PathGeometryKey"

Figures="M 10 100 C 35 0 135 0 160 100 180 190 285 200 310 100"

options:Freeze="True" />

</Window.Resources>

<Canvas

Width="400"

Height="400"

Background="LightGray">

<Rectangle

Width="30"

Height="30"

Fill="Blue">

<Rectangle.RenderTransform>

</TransformGroup>

</Rectangle.RenderTransform>

<Rectangle.Triggers>

<Storyboard

RepeatBehavior="Forever"

AutoReverse="True">

<DoubleAnimationUsingPath

Storyboard.TargetName="rotateTransform"

Storyboard.TargetProperty="Angle"

PathGeometry="{StaticResource PathGeometryKey}"

Source="Angle"

Duration="00:00:05" />

<DoubleAnimationUsingPath

Storyboard.TargetName="translateTransform"

Storyboard.TargetProperty="X"

PathGeometry="{StaticResource PathGeometryKey}"

Source="X"

Duration="00:00:05" />

<DoubleAnimationUsingPath

Storyboard.TargetName="translateTransform"

Storyboard.TargetProperty="Y"

PathGeometry="{StaticResource PathGeometryKey}"

Source="Y"

Duration="00:00:05" />

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Rectangle.Triggers>

</Rectangle>

</Canvas>

</Window>

TestProject.zip

[C#/WPF] MatrixAnimationUsingPath 클래스 : DoesRotateWithTangent 속성을 사용해 경로를 따라 객체에 애니메이션 효과 주기 (객체 회전)

■ MatrixAnimationUsingPath 클래스의 DoesRotateWithTangent 속성을 사용해 경로를 따라 객체에 애니메이션 효과를 주는 방법을 보여준다. (객체 회전) ▶ 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 매트릭스 변환을 생성한다.

            MatrixTransform matrixTransform = new MatrixTransform();

            RegisterName("matrixTransform", matrixTransform);

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

            Button button = new Button();

            button.Width           = 100;
            button.Height          = 30;
            button.RenderTransform = matrixTransform;
            button.Content         = "테스트";

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

            Canvas canvas = new Canvas();

            canvas.Width  = 400;
            canvas.Height = 400;

            canvas.Children.Add(button);

            #endregion

            #region 폴리 베지어 세그먼트를 생성한다.

            PolyBezierSegment polyBezierSegment = new PolyBezierSegment();

            polyBezierSegment.Points.Add(new Point(35 , 0  ));
            polyBezierSegment.Points.Add(new Point(135, 0  ));
            polyBezierSegment.Points.Add(new Point(160, 100));
            polyBezierSegment.Points.Add(new Point(180, 190));
            polyBezierSegment.Points.Add(new Point(285, 200));
            polyBezierSegment.Points.Add(new Point(310, 100));

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

            PathFigure pathFigure = new PathFigure();

            pathFigure.StartPoint = new Point(10, 100);

            pathFigure.Segments.Add(polyBezierSegment);

            #endregion
            #region 패스 지오메트리를 생성한다.

            PathGeometry pathGeometry = new PathGeometry();

            pathGeometry.Figures.Add(pathFigure);

            pathGeometry.Freeze();

            #endregion
            #region 매트릭스 애니메이션을 생성한다.

            MatrixAnimationUsingPath matrixAnimation = new MatrixAnimationUsingPath();

            matrixAnimation.PathGeometry          = pathGeometry;
            matrixAnimation.DoesRotateWithTangent = true;
            matrixAnimation.Duration              = TimeSpan.FromSeconds(5);
            matrixAnimation.RepeatBehavior        = RepeatBehavior.Forever;
            matrixAnimation.AutoReverse           = true;

            Storyboard.SetTargetName(matrixAnimation, "matrixTransform");
            Storyboard.SetTargetProperty(matrixAnimation, new PropertyPath(MatrixTransform.MatrixProperty));

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

            Storyboard storyboard = new Storyboard();

            storyboard.Children.Add(matrixAnimation);

            #endregion

            Content = canvas;

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

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 매트릭스 변환을 생성한다.

MatrixTransform matrixTransform = new MatrixTransform();

RegisterName("matrixTransform", matrixTransform);

#endregion

#region 버튼을 생성한다.

Button button = new Button();

button.Width = 100;

button.Height = 30;

button.RenderTransform = matrixTransform;

button.Content = "테스트";

#endregion

#region 캔버스를 생성한다.

Canvas canvas = new Canvas();

canvas.Width = 400;

canvas.Height = 400;

canvas.Children.Add(button);

#endregion

#region 폴리 베지어 세그먼트를 생성한다.

PolyBezierSegment polyBezierSegment = new PolyBezierSegment();

polyBezierSegment.Points.Add(new Point(35 , 0 ));

polyBezierSegment.Points.Add(new Point(135, 0 ));

polyBezierSegment.Points.Add(new Point(160, 100));

polyBezierSegment.Points.Add(new Point(180, 190));

polyBezierSegment.Points.Add(new Point(285, 200));

polyBezierSegment.Points.Add(new Point(310, 100));

#endregion

#region 패스 피겨를 생성한다.

PathFigure pathFigure = new PathFigure();

pathFigure.StartPoint = new Point(10, 100);

pathFigure.Segments.Add(polyBezierSegment);

#endregion

#region 패스 지오메트리를 생성한다.

PathGeometry pathGeometry = new PathGeometry();

pathGeometry.Figures.Add(pathFigure);

pathGeometry.Freeze();

#endregion

#region 매트릭스 애니메이션을 생성한다.

MatrixAnimationUsingPath matrixAnimation = new MatrixAnimationUsingPath();

matrixAnimation.PathGeometry = pathGeometry;

matrixAnimation.DoesRotateWithTangent = true;

matrixAnimation.Duration = TimeSpan.FromSeconds(5);

matrixAnimation.RepeatBehavior = RepeatBehavior.Forever;

matrixAnimation.AutoReverse = true;

Storyboard.SetTargetName(matrixAnimation, "matrixTransform");

Storyboard.SetTargetProperty(matrixAnimation, new PropertyPath(MatrixTransform.MatrixProperty));

#endregion

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

Storyboard storyboard = new Storyboard();

storyboard.Children.Add(matrixAnimation);

#endregion

Content = canvas;

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

{

storyboard.Begin(this);

};

}

#endregion

}

[C#/WPF] MatrixAnimationUsingPath 엘리먼트 : DoesRotateWithTangent 속성을 사용해 경로를 따라 객체에 애니메이션 효과 주기 (객체 회전)

■ MatrixAnimationUsingPath 엘리먼트의 DoesRotateWithTangent 속성을 사용해 경로를 따라 객체에 애니메이션 효과를 주는 방법을 보여준다. (객체 회전) ▶ 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"
    xmlns:options="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options"
    Width="800"
    Height="600"
    Title="TestProject"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Canvas
        Width="400"
        Height="400"
        Background="LightGray">
        <Button
            Width="100"
            Height="30"
            Content="테스트">
            <Button.RenderTransform>
                <MatrixTransform x:Name="matrixTransform">
                    <MatrixTransform.Matrix >
                        <Matrix />
                    </MatrixTransform.Matrix>
                </MatrixTransform>
            </Button.RenderTransform>
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                            <MatrixAnimationUsingPath
                                Storyboard.TargetName="matrixTransform"
                                Storyboard.TargetProperty="Matrix"
                                DoesRotateWithTangent="True"
                                Duration="00:00:05"
                                RepeatBehavior="Forever"
                                AutoReverse="True">
                                <MatrixAnimationUsingPath.PathGeometry>
                                    <PathGeometry
                                        Figures="M 10 100 C 35 0 135 0 160 100 180 190 285 200 310 100"
                                        options:Freeze="True" />
                                </MatrixAnimationUsingPath.PathGeometry>
                            </MatrixAnimationUsingPath>
                        </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"

xmlns:options="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options"

Width="800"

Height="600"

Title="TestProject"

FontFamily="나눔고딕코딩"

FontSize="16">

<Canvas

Width="400"

Height="400"

Background="LightGray">

<Button

Width="100"

Height="30"

Content="테스트">

<Button.RenderTransform>

<MatrixTransform.Matrix >

</MatrixTransform.Matrix>

</MatrixTransform>

</Button.RenderTransform>

<Button.Triggers>

<MatrixAnimationUsingPath

Storyboard.TargetName="matrixTransform"

Storyboard.TargetProperty="Matrix"

DoesRotateWithTangent="True"

Duration="00:00:05"

RepeatBehavior="Forever"

AutoReverse="True">

<MatrixAnimationUsingPath.PathGeometry>

<PathGeometry

Figures="M 10 100 C 35 0 135 0 160 100 180 190 285 200 310 100"

options:Freeze="True" />

</MatrixAnimationUsingPath.PathGeometry>

</MatrixAnimationUsingPath>

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Button.Triggers>

</Button>

</Canvas>

</Window>

TestProject.zip

[C#/WPF] MatrixAnimationUsingPath 클래스 : IsOffsetCumulative 속성을 사용해 경로를 따라 객체에 애니메이션 효과 주기 (오프셋 누적)

■ MatrixAnimationUsingPath 클래스의 IsOffsetCumulative 속성을 사용해 경로를 따라 객체에 애니메이션 효과를 주는 방법을 보여준다. (오프셋 누적) ▶ 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 매트릭스 변환을 생성한다.

            MatrixTransform matrixTransform = new MatrixTransform();

            RegisterName("matrixTransform", matrixTransform);

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

            Button button = new Button();

            button.Width           = 100;
            button.Height          = 30;
            button.RenderTransform = matrixTransform;
            button.Content         = "테스트";

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

            Canvas canvas = new Canvas();

            canvas.Width      = 400;
            canvas.Height     = 400;
            canvas.Background = Brushes.LightGray;

            canvas.Children.Add(button);

            #endregion

            #region 폴리 베지어 세그먼트를 생성한다.

            PolyBezierSegment polyBezierSegment = new PolyBezierSegment();

            polyBezierSegment.Points.Add(new Point(35 , 0  ));
            polyBezierSegment.Points.Add(new Point(135, 0  ));
            polyBezierSegment.Points.Add(new Point(160, 100));
            polyBezierSegment.Points.Add(new Point(180, 190));
            polyBezierSegment.Points.Add(new Point(285, 200));
            polyBezierSegment.Points.Add(new Point(310, 100));

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

            PathFigure pathFigure = new PathFigure();

            pathFigure.StartPoint = new Point(10, 100);

            pathFigure.Segments.Add(polyBezierSegment);

            #endregion
            #region 패스 지오메트리를 생성한다.

            PathGeometry pathGeometry = new PathGeometry();

            pathGeometry.Figures.Add(pathFigure);

            pathGeometry.Freeze();

            #endregion
            #region 매트릭스 애니메이션을 생성한다.

            MatrixAnimationUsingPath matrixAnimation = new MatrixAnimationUsingPath();

            matrixAnimation.PathGeometry       = pathGeometry;
            matrixAnimation.IsOffsetCumulative = true;
            matrixAnimation.Duration           = TimeSpan.FromSeconds(5);
            matrixAnimation.RepeatBehavior     = new RepeatBehavior(2);

            Storyboard.SetTargetName(matrixAnimation, "matrixTransform");
            Storyboard.SetTargetProperty(matrixAnimation, new PropertyPath(MatrixTransform.MatrixProperty));

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

            Storyboard storyboard = new Storyboard();

            storyboard.Children.Add(matrixAnimation);

            #endregion

            Content = canvas;

            button.Click += 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

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 매트릭스 변환을 생성한다.

MatrixTransform matrixTransform = new MatrixTransform();

RegisterName("matrixTransform", matrixTransform);

#endregion

#region 버튼을 생성한다.

Button button = new Button();

button.Width = 100;

button.Height = 30;

button.RenderTransform = matrixTransform;

button.Content = "테스트";

#endregion

#region 캔버스를 생성한다.

Canvas canvas = new Canvas();

canvas.Width = 400;

canvas.Height = 400;

canvas.Background = Brushes.LightGray;

canvas.Children.Add(button);

#endregion

#region 폴리 베지어 세그먼트를 생성한다.

PolyBezierSegment polyBezierSegment = new PolyBezierSegment();

polyBezierSegment.Points.Add(new Point(35 , 0 ));

polyBezierSegment.Points.Add(new Point(135, 0 ));

polyBezierSegment.Points.Add(new Point(160, 100));

polyBezierSegment.Points.Add(new Point(180, 190));

polyBezierSegment.Points.Add(new Point(285, 200));

polyBezierSegment.Points.Add(new Point(310, 100));

#endregion

#region 패스 피겨를 생성한다.

PathFigure pathFigure = new PathFigure();

pathFigure.StartPoint = new Point(10, 100);

pathFigure.Segments.Add(polyBezierSegment);

#endregion

#region 패스 지오메트리를 생성한다.

PathGeometry pathGeometry = new PathGeometry();

pathGeometry.Figures.Add(pathFigure);

pathGeometry.Freeze();

#endregion

#region 매트릭스 애니메이션을 생성한다.

MatrixAnimationUsingPath matrixAnimation = new MatrixAnimationUsingPath();

matrixAnimation.PathGeometry = pathGeometry;

matrixAnimation.IsOffsetCumulative = true;

matrixAnimation.Duration = TimeSpan.FromSeconds(5);

matrixAnimation.RepeatBehavior = new RepeatBehavior(2);

Storyboard.SetTargetName(matrixAnimation, "matrixTransform");

Storyboard.SetTargetProperty(matrixAnimation, new PropertyPath(MatrixTransform.MatrixProperty));

#endregion

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

Storyboard storyboard = new Storyboard();

storyboard.Children.Add(matrixAnimation);

#endregion

Content = canvas;

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

{

storyboard.Begin(this);

};

}

#endregion

}

[C#/WPF] MatrixAnimationUsingPath 엘리먼트 : IsOffsetCumulative 속성을 사용해 경로를 따라 객체에 애니메이션 효과 주기 (오프셋 누적)

■ MatrixAnimationUsingPath 엘리먼트의 IsOffsetCumulative 속성을 사용해 경로를 따라 객체에 애니메이션 효과을 주는 방법을 보여준다. (오프셋 누적) ▶ 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"
    xmlns:options="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options"
    Width="800"
    Height="600"
    Title="TestProject"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Canvas
        Width="400"
        Height="400"
        Background="LightGray">
        <Button
            Width="100"
            Height="30"
            Content="테스트">
            <Button.RenderTransform>
                <MatrixTransform x:Name="matrixTransform">
                    <MatrixTransform.Matrix>
                        <Matrix />
                    </MatrixTransform.Matrix>
                </MatrixTransform>
            </Button.RenderTransform>
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                            <MatrixAnimationUsingPath
                                Storyboard.TargetName="matrixTransform"
                                Storyboard.TargetProperty="Matrix"
                                IsOffsetCumulative="True"
                                Duration="00:00:05"
                                RepeatBehavior="2x">
                                <MatrixAnimationUsingPath.PathGeometry>
                                    <PathGeometry
                                        Figures="M 10 100 C 35 0 135 0 160 100 180 190 285 200 310 100"
                                        options:Freeze="True" />
                                </MatrixAnimationUsingPath.PathGeometry>
                            </MatrixAnimationUsingPath>
                        </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"

xmlns:options="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options"

Width="800"

Height="600"

Title="TestProject"

FontFamily="나눔고딕코딩"

FontSize="16">

<Canvas

Width="400"

Height="400"

Background="LightGray">

<Button

Width="100"

Height="30"

Content="테스트">

<Button.RenderTransform>

<MatrixTransform.Matrix>

</MatrixTransform.Matrix>

</MatrixTransform>

</Button.RenderTransform>

<Button.Triggers>

<MatrixAnimationUsingPath

Storyboard.TargetName="matrixTransform"

Storyboard.TargetProperty="Matrix"

IsOffsetCumulative="True"

Duration="00:00:05"

RepeatBehavior="2x">

<MatrixAnimationUsingPath.PathGeometry>

<PathGeometry

Figures="M 10 100 C 35 0 135 0 160 100 180 190 285 200 310 100"

options:Freeze="True" />

</MatrixAnimationUsingPath.PathGeometry>

</MatrixAnimationUsingPath>

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Button.Triggers>

</Button>

</Canvas>

</Window>

※ IsOffsetCumulative 속성으로

[C#/WPF] MatrixAnimationUsingPath 클래스 : 경로를 따라 객체에 애니메이션 효과 주기

■ MatrixAnimationUsingPath 클래스를 사용해 경로를 따라 객체에 애니메이션 효과를 주는 방법을 보여준다. ▶ 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 매트릭스 변환을 생성한다.

            MatrixTransform matrixTransform = new MatrixTransform();

            RegisterName("matrixTransform", matrixTransform);

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

            Button button = new Button();

            button.Width           = 100;
            button.Height          = 30;
            button.RenderTransform = matrixTransform;
            button.Content         = "테스트";

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

            Canvas canvas = new Canvas();

            canvas.Width      = 400;
            canvas.Height     = 400;
            canvas.Background = Brushes.LightGray;

            canvas.Children.Add(button);

            #endregion

            #region 폴리 베지어 세그먼트를 생성한다.

            PolyBezierSegment polyBezierSegment = new PolyBezierSegment();

            polyBezierSegment.Points.Add(new Point(35 , 0  ));
            polyBezierSegment.Points.Add(new Point(135, 0  ));
            polyBezierSegment.Points.Add(new Point(160, 100));
            polyBezierSegment.Points.Add(new Point(180, 190));
            polyBezierSegment.Points.Add(new Point(285, 200));
            polyBezierSegment.Points.Add(new Point(310, 100));

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

            PathFigure pathFigure = new PathFigure();

            pathFigure.StartPoint = new Point(10, 100);

            pathFigure.Segments.Add(polyBezierSegment);

            #endregion
            #region 패스 지오메트리를 생성한다.

            PathGeometry pathGeometry = new PathGeometry();

            pathGeometry.Figures.Add(pathFigure);

            pathGeometry.Freeze();

            #endregion
            #region 매트릭스 애니메이션을 생성한다.

            MatrixAnimationUsingPath matrixAnimation = new MatrixAnimationUsingPath();

            matrixAnimation.PathGeometry   = pathGeometry;
            matrixAnimation.Duration       = TimeSpan.FromSeconds(5);
            matrixAnimation.RepeatBehavior = RepeatBehavior.Forever;
            matrixAnimation.AutoReverse    = true;

            Storyboard.SetTargetName(matrixAnimation, "matrixTransform");
            Storyboard.SetTargetProperty(matrixAnimation, new PropertyPath(MatrixTransform.MatrixProperty));

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

            Storyboard pathAnimationStoryboard = new Storyboard();

            pathAnimationStoryboard.Children.Add(matrixAnimation);

            #endregion

            Content = canvas;

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

        #endregion
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

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 매트릭스 변환을 생성한다.

MatrixTransform matrixTransform = new MatrixTransform();

RegisterName("matrixTransform", matrixTransform);

#endregion

#region 버튼을 생성한다.

Button button = new Button();

button.Width = 100;

button.Height = 30;

button.RenderTransform = matrixTransform;

button.Content = "테스트";

#endregion

#region 캔버스를 생성한다.

Canvas canvas = new Canvas();

canvas.Width = 400;

canvas.Height = 400;

canvas.Background = Brushes.LightGray;

canvas.Children.Add(button);

#endregion

#region 폴리 베지어 세그먼트를 생성한다.

PolyBezierSegment polyBezierSegment = new PolyBezierSegment();

polyBezierSegment.Points.Add(new Point(35 , 0 ));

polyBezierSegment.Points.Add(new Point(135, 0 ));

polyBezierSegment.Points.Add(new Point(160, 100));

polyBezierSegment.Points.Add(new Point(180, 190));

polyBezierSegment.Points.Add(new Point(285, 200));

polyBezierSegment.Points.Add(new Point(310, 100));

#endregion

#region 패스 피겨를 생성한다.

PathFigure pathFigure = new PathFigure();

pathFigure.StartPoint = new Point(10, 100);

pathFigure.Segments.Add(polyBezierSegment);

#endregion

#region 패스 지오메트리를 생성한다.

PathGeometry pathGeometry = new PathGeometry();

pathGeometry.Figures.Add(pathFigure);

pathGeometry.Freeze();

#endregion

#region 매트릭스 애니메이션을 생성한다.

MatrixAnimationUsingPath matrixAnimation = new MatrixAnimationUsingPath();

matrixAnimation.PathGeometry = pathGeometry;

matrixAnimation.Duration = TimeSpan.FromSeconds(5);

matrixAnimation.RepeatBehavior = RepeatBehavior.Forever;

matrixAnimation.AutoReverse = true;

Storyboard.SetTargetName(matrixAnimation, "matrixTransform");

Storyboard.SetTargetProperty(matrixAnimation, new PropertyPath(MatrixTransform.MatrixProperty));

#endregion

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

Storyboard pathAnimationStoryboard = new Storyboard();

pathAnimationStoryboard.Children.Add(matrixAnimation);

#endregion

Content = canvas;

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

{

pathAnimationStoryboard.Begin(this);

};

}

#endregion

}

TestProject.zip

[C#/WPF] MatrixAnimationUsingPath 엘리먼트 : 경로를 따라 객체에 애니메이션 효과 주기

■ MatrixAnimationUsingPath 엘리먼트를 사용해 경로를 따라 객체에 애니메이션 효과를 주는 방법을 보여준다. ▶ 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"
    xmlns:options="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options"
    Width="800"
    Height="600"
    Title="TestProject"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Canvas
        Width="400"
        Height="400"
        Background="LightGray">
        <Button
            Width="100"
            Height="30"
            Content="테스트">
            <Button.RenderTransform>
                <MatrixTransform x:Name="matrixTransform" />
            </Button.RenderTransform>
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                            <MatrixAnimationUsingPath
                                Storyboard.TargetName="matrixTransform"
                                Storyboard.TargetProperty="Matrix"
                                Duration="00:00:05"
                                RepeatBehavior="Forever"
                                AutoReverse="True">
                                <MatrixAnimationUsingPath.PathGeometry>
                                    <PathGeometry
                                        Figures="M 10 100 C 35 0 135 0 160 100 180 190 285 200 310 100"
                                        options:Freeze="True" />
                                </MatrixAnimationUsingPath.PathGeometry>
                            </MatrixAnimationUsingPath>
                        </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"

xmlns:options="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options"

Width="800"

Height="600"

Title="TestProject"

FontFamily="나눔고딕코딩"

FontSize="16">

<Canvas

Width="400"

Height="400"

Background="LightGray">

<Button

Width="100"

Height="30"

Content="테스트">

<Button.RenderTransform>

</Button.RenderTransform>

<Button.Triggers>

<MatrixAnimationUsingPath

Storyboard.TargetName="matrixTransform"

Storyboard.TargetProperty="Matrix"

Duration="00:00:05"

RepeatBehavior="Forever"

AutoReverse="True">

<MatrixAnimationUsingPath.PathGeometry>

<PathGeometry

Figures="M 10 100 C 35 0 135 0 160 100 180 190 285 200 310 100"

options:Freeze="True" />

</MatrixAnimationUsingPath.PathGeometry>

</MatrixAnimationUsingPath>

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Button.Triggers>

</Button>

</Canvas>

</Window>

TestProject.zip

[C#/WPF] PointAnimationUsingPath 클래스 : 경로를 따라 객체에 애니메이션 효과 주기

■ PointAnimationUsingPath 클래스를 사용해 경로를 따라 객체에 애니메이션 효과을 주는 방법을 보여준다. ▶ 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 타원 지오메트리를 생성한다.

            EllipseGeometry ellipseGeometry = new EllipseGeometry(new Point(10, 100), 15, 15);

            RegisterName("ellipseGeometry", ellipseGeometry);

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

            Path path = new Path();

            path.Margin = new Thickness(15);
            path.Fill   = Brushes.Blue;
            path.Data   = ellipseGeometry;

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

            Canvas canvas = new Canvas();

            canvas.Width      = 400;
            canvas.Height     = 400;
            canvas.Background = Brushes.LightGray;

            canvas.Children.Add(path);

            #endregion

            #region 폴리 베지어 세그먼트를 생성한다.

            PolyBezierSegment polyBezierSegment = new PolyBezierSegment();

            polyBezierSegment.Points.Add(new Point(35 , 0  ));
            polyBezierSegment.Points.Add(new Point(135, 0  ));
            polyBezierSegment.Points.Add(new Point(160, 100));
            polyBezierSegment.Points.Add(new Point(180, 190));
            polyBezierSegment.Points.Add(new Point(285, 200));
            polyBezierSegment.Points.Add(new Point(310, 100));

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

            PathFigure pathFigure = new PathFigure();

            pathFigure.StartPoint = new Point(10, 100);

            pathFigure.Segments.Add(polyBezierSegment);

            #endregion
            #region 패스 지오메트리를 생성한다.

            PathGeometry pathGeometry = new PathGeometry();

            pathGeometry.Figures.Add(pathFigure);

            pathGeometry.Freeze();

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

            PointAnimationUsingPath pointAnimation = new PointAnimationUsingPath();

            pointAnimation.PathGeometry   = pathGeometry;
            pointAnimation.Duration       = TimeSpan.FromSeconds(5);
            pointAnimation.RepeatBehavior = RepeatBehavior.Forever;
            pointAnimation.AutoReverse    = true;

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

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

            Storyboard storyboard = new Storyboard();

            storyboard.Children.Add(pointAnimation);

            #endregion

            Content = canvas;

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

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 타원 지오메트리를 생성한다.

EllipseGeometry ellipseGeometry = new EllipseGeometry(new Point(10, 100), 15, 15);

RegisterName("ellipseGeometry", ellipseGeometry);

#endregion

#region 패스를 생성한다.

Path path = new Path();

path.Margin = new Thickness(15);

path.Fill = Brushes.Blue;

path.Data = ellipseGeometry;

#endregion

#region 캔버스를 생성한다.

Canvas canvas = new Canvas();

canvas.Width = 400;

canvas.Height = 400;

canvas.Background = Brushes.LightGray;

canvas.Children.Add(path);

#endregion

#region 폴리 베지어 세그먼트를 생성한다.

PolyBezierSegment polyBezierSegment = new PolyBezierSegment();

polyBezierSegment.Points.Add(new Point(35 , 0 ));

polyBezierSegment.Points.Add(new Point(135, 0 ));

polyBezierSegment.Points.Add(new Point(160, 100));

polyBezierSegment.Points.Add(new Point(180, 190));

polyBezierSegment.Points.Add(new Point(285, 200));

polyBezierSegment.Points.Add(new Point(310, 100));

#endregion

#region 패스 피겨를 생성한다.

PathFigure pathFigure = new PathFigure();

pathFigure.StartPoint = new Point(10, 100);

pathFigure.Segments.Add(polyBezierSegment);

#endregion

#region 패스 지오메트리를 생성한다.

PathGeometry pathGeometry = new PathGeometry();

pathGeometry.Figures.Add(pathFigure);

pathGeometry.Freeze();

#endregion

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

PointAnimationUsingPath pointAnimation = new PointAnimationUsingPath();

pointAnimation.PathGeometry = pathGeometry;

pointAnimation.Duration = TimeSpan.FromSeconds(5);

pointAnimation.RepeatBehavior = RepeatBehavior.Forever;

pointAnimation.AutoReverse = true;

Storyboard.SetTargetName(pointAnimation, "ellipseGeometry");

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

#endregion

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

Storyboard storyboard = new Storyboard();

storyboard.Children.Add(pointAnimation);

#endregion

Content = canvas;

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

{

storyboard.Begin(this);

};

}

#endregion

}

TestProject.zip

[C#/WPF] PointAnimationUsingPath 엘리먼트 : 경로를 따라 객체에 애니메이션 효과 주기

■ PointAnimationUsingPath 엘리먼트를 사용해 경로를 따라 객체에 애니메이션 효과를 주는 방법을 보여준다. ▶ 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"
    xmlns:options="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options"
    Width="800"
    Height="600"
    Title="TestProject"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Canvas
        Width="400"
        Height="400"
        Background="LightGray">
        <Path
            Margin="15 15 15 15"
            Fill="Blue">
            <Path.Data>
                <EllipseGeometry x:Name="ellipseGeometry"
                    Center="10 100"
                    RadiusX="15"
                    RadiusY="15" />
            </Path.Data>
            <Path.Triggers>
                <EventTrigger RoutedEvent="Path.Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                            <PointAnimationUsingPath
                                Storyboard.TargetName="ellipseGeometry"
                                Storyboard.TargetProperty="Center"
                                Duration="00:00:05"
                                RepeatBehavior="Forever"
                                AutoReverse="True">
                                <PointAnimationUsingPath.PathGeometry>
                                    <PathGeometry
                                        Figures="M 10 100 C 35 0 135 0 160 100 180 190 285 200 310 100"
                                        options:Freeze="True" />
                                </PointAnimationUsingPath.PathGeometry>
                            </PointAnimationUsingPath>
                        </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"

xmlns:options="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options"

Width="800"

Height="600"

Title="TestProject"

FontFamily="나눔고딕코딩"

FontSize="16">

<Canvas

Width="400"

Height="400"

Background="LightGray">

<Path

Margin="15 15 15 15"

Fill="Blue">

<Path.Data>

<EllipseGeometry x:Name="ellipseGeometry"

Center="10 100"

RadiusX="15"

RadiusY="15" />

</Path.Data>

<Path.Triggers>

<PointAnimationUsingPath

Storyboard.TargetName="ellipseGeometry"

Storyboard.TargetProperty="Center"

Duration="00:00:05"

RepeatBehavior="Forever"

AutoReverse="True">

<PointAnimationUsingPath.PathGeometry>

<PathGeometry

Figures="M 10 100 C 35 0 135 0 160 100 180 190 285 200 310 100"

options:Freeze="True" />

</PointAnimationUsingPath.PathGeometry>

</PointAnimationUsingPath>

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Path.Triggers>

</Path>

</Canvas>

</Window>

TestProject.zip

[C#/WPF] DoubleAnimationUsingPath 클래스 : 경로를 따라 객체에 애니메이션 효과 주기

■ DoubleAnimationUsingPath 클래스를 사용해 경로를 따라 객체에 애니메이션 효과을 주는 방법을 보여준다. ▶ 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           = 30;
            rectangle.Height          = 30;
            rectangle.Fill            = Brushes.Blue;
            rectangle.RenderTransform = translateTransform;

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

            Canvas canvas = new Canvas();

            canvas.Width      = 400;
            canvas.Height     = 400;
            canvas.Background = Brushes.LightGray;

            canvas.Children.Add(rectangle);

            #endregion

            #region 폴리 베지어 세그먼트를 생성한다.

            PolyBezierSegment polyBezierSegment = new PolyBezierSegment();

            polyBezierSegment.Points.Add(new Point(35 , 0  ));
            polyBezierSegment.Points.Add(new Point(135, 0  ));
            polyBezierSegment.Points.Add(new Point(160, 100));
            polyBezierSegment.Points.Add(new Point(180, 190));
            polyBezierSegment.Points.Add(new Point(285, 200));
            polyBezierSegment.Points.Add(new Point(310, 100));

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

            PathFigure pathFigure = new PathFigure();

            pathFigure.StartPoint = new Point(10, 100);

            pathFigure.Segments.Add(polyBezierSegment);

            #endregion
            #region 패스 지오메트리를 생성한다.

            PathGeometry pathGeometry = new PathGeometry();

            pathGeometry.Figures.Add(pathFigure);

            pathGeometry.Freeze();

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

            DoubleAnimationUsingPath translateXAnimation = new DoubleAnimationUsingPath();

            translateXAnimation.PathGeometry = pathGeometry;
            translateXAnimation.Duration     = TimeSpan.FromSeconds(5);
            translateXAnimation.Source       = PathAnimationSource.X;

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

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

            DoubleAnimationUsingPath translateYAnimation = new DoubleAnimationUsingPath();

            translateYAnimation.PathGeometry = pathGeometry;
            translateYAnimation.Duration     = TimeSpan.FromSeconds(5);
            translateYAnimation.Source       = PathAnimationSource.Y;

            Storyboard.SetTargetName(translateYAnimation, "translateTransform");
            Storyboard.SetTargetProperty(translateYAnimation, new PropertyPath(TranslateTransform.YProperty));

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

            Storyboard storyboard = new Storyboard();

            storyboard.RepeatBehavior = RepeatBehavior.Forever;
            storyboard.AutoReverse    = true;

            storyboard.Children.Add(translateXAnimation);
            storyboard.Children.Add(translateYAnimation);

            #endregion

            Content = canvas;

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

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 = 30;

rectangle.Height = 30;

rectangle.Fill = Brushes.Blue;

rectangle.RenderTransform = translateTransform;

#endregion

#region 캔버스를 생성한다.

Canvas canvas = new Canvas();

canvas.Width = 400;

canvas.Height = 400;

canvas.Background = Brushes.LightGray;

canvas.Children.Add(rectangle);

#endregion

#region 폴리 베지어 세그먼트를 생성한다.

PolyBezierSegment polyBezierSegment = new PolyBezierSegment();

polyBezierSegment.Points.Add(new Point(35 , 0 ));

polyBezierSegment.Points.Add(new Point(135, 0 ));

polyBezierSegment.Points.Add(new Point(160, 100));

polyBezierSegment.Points.Add(new Point(180, 190));

polyBezierSegment.Points.Add(new Point(285, 200));

polyBezierSegment.Points.Add(new Point(310, 100));

#endregion

#region 패스 피겨를 생성한다.

PathFigure pathFigure = new PathFigure();

pathFigure.StartPoint = new Point(10, 100);

pathFigure.Segments.Add(polyBezierSegment);

#endregion

#region 패스 지오메트리를 생성한다.

PathGeometry pathGeometry = new PathGeometry();

pathGeometry.Figures.Add(pathFigure);

pathGeometry.Freeze();

#endregion

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

DoubleAnimationUsingPath translateXAnimation = new DoubleAnimationUsingPath();

translateXAnimation.PathGeometry = pathGeometry;

translateXAnimation.Duration = TimeSpan.FromSeconds(5);

translateXAnimation.Source = PathAnimationSource.X;

Storyboard.SetTargetName(translateXAnimation, "translateTransform");

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

#endregion

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

DoubleAnimationUsingPath translateYAnimation = new DoubleAnimationUsingPath();

translateYAnimation.PathGeometry = pathGeometry;

translateYAnimation.Duration = TimeSpan.FromSeconds(5);

translateYAnimation.Source = PathAnimationSource.Y;

Storyboard.SetTargetName(translateYAnimation, "translateTransform");

Storyboard.SetTargetProperty(translateYAnimation, new PropertyPath(TranslateTransform.YProperty));

#endregion

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

Storyboard storyboard = new Storyboard();

storyboard.RepeatBehavior = RepeatBehavior.Forever;

storyboard.AutoReverse = true;

storyboard.Children.Add(translateXAnimation);

storyboard.Children.Add(translateYAnimation);

#endregion

Content = canvas;

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

{

storyboard.Begin(this);

};

}

#endregion

}

TestProject.zip

[C#/WPF] DoubleAnimationUsingPath 엘리먼트 : 경로를 따라 객체에 애니메이션 효과 주기

■ DoubleAnimationUsingPath 엘리먼트를 사용해 경로를 따라 객체에 애니메이션 효과를 주는 방법을 보여준다. ▶ 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"
    xmlns:options="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options"
    Width="800"
    Height="600"
    Title="TestProject"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Window.Resources>
        <PathGeometry x:Key="PathGeometryKey"
            Figures="M 10 100 C 35 0 135 0 160 100 180 190 285 200 310 100"
            options:Freeze="True" />
    </Window.Resources>
    <Canvas
        Width="400"
        Height="400"
        Background="LightGray">
        <Rectangle
            Width="30"
            Height="30"
            Fill="Blue">
            <Rectangle.RenderTransform>
                <TranslateTransform x:Name="translateTransform" />
            </Rectangle.RenderTransform>
            <Rectangle.Triggers>
                <EventTrigger RoutedEvent="Path.Loaded">
                    <BeginStoryboard>
                        <Storyboard
                            RepeatBehavior="Forever"
                            AutoReverse="True">
                            <DoubleAnimationUsingPath
                                Storyboard.TargetName="translateTransform"
                                Storyboard.TargetProperty="X"
                                PathGeometry="{StaticResource PathGeometryKey}"
                                Source="X"
                                Duration="00:00:05" />
                            <DoubleAnimationUsingPath
                                Storyboard.TargetName="translateTransform"
                                Storyboard.TargetProperty="Y"
                                PathGeometry="{StaticResource PathGeometryKey}"
                                Source="Y"
                                Duration="00:00:05" />
                        </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"

xmlns:options="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options"

Width="800"

Height="600"

Title="TestProject"

FontFamily="나눔고딕코딩"

FontSize="16">

<Window.Resources>

<PathGeometry x:Key="PathGeometryKey"

Figures="M 10 100 C 35 0 135 0 160 100 180 190 285 200 310 100"

options:Freeze="True" />

</Window.Resources>

<Canvas

Width="400"

Height="400"

Background="LightGray">

<Rectangle

Width="30"

Height="30"

Fill="Blue">

<Rectangle.RenderTransform>

</Rectangle.RenderTransform>

<Rectangle.Triggers>

<Storyboard

RepeatBehavior="Forever"

AutoReverse="True">

<DoubleAnimationUsingPath

Storyboard.TargetName="translateTransform"

Storyboard.TargetProperty="X"

PathGeometry="{StaticResource PathGeometryKey}"

Source="X"

Duration="00:00:05" />

<DoubleAnimationUsingPath

Storyboard.TargetName="translateTransform"

Storyboard.TargetProperty="Y"

PathGeometry="{StaticResource PathGeometryKey}"

Source="Y"

Duration="00:00:05" />

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Rectangle.Triggers>

</Rectangle>

</Canvas>

</Window>

TestProject.zip

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

■ LinearDoubleKeyFrame 엘리먼트의 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">
    <Rectangle
        Width="50"
        Height="50"
        Stroke="Black"
        StrokeThickness="5"
        Fill="Orange">
        <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="Paced" Value="100" />
                            <LinearDoubleKeyFrame KeyTime="Paced" Value="200" />
                            <LinearDoubleKeyFrame KeyTime="Paced" 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="Orange">

<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