728x90
반응형
728x170
▶ 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="UIElement 클래스 : MouseMove 이벤트를 사용해 마우스 이동시 애니메이션 설정하기"
FontFamily="나눔고딕코딩"
FontSize="16">
<Grid>
<Border
HorizontalAlignment="Center"
VerticalAlignment="Center"
BorderThickness="1"
BorderBrush="Black">
<Canvas
Width="400"
Height="400">
<Canvas.Resources>
<Style TargetType="Image">
<Setter Property="Width" Value="400" />
<Setter Property="Height" Value="400" />
<Setter Property="Source" Value="sample.jpg" />
<Setter Property="Stretch" Value="Fill" />
</Style>
</Canvas.Resources>
<Canvas Name="canvas1"
Width="400"
Height="400"
Background="White"
SnapsToDevicePixels="True">
<Canvas.Clip>
<RectangleGeometry Rect="0 0 400 100" />
</Canvas.Clip>
<Image Name="image1" />
</Canvas>
<Canvas Name="canvas2"
Width="400"
Height="400"
Background="White"
SnapsToDevicePixels="True">
<Canvas.Clip>
<RectangleGeometry Rect="0 100 400 100" />
</Canvas.Clip>
<Image Name="image2" />
</Canvas>
<Canvas Name="canvas3"
Width="400"
Height="400"
Background="White"
SnapsToDevicePixels="True">
<Canvas.Clip>
<RectangleGeometry Rect="0 200 400 100" />
</Canvas.Clip>
<Image Name="image3" />
</Canvas>
<Canvas Name="canvas4"
Width="400"
Height="400"
Background="White"
SnapsToDevicePixels="True">
<Canvas.Clip>
<RectangleGeometry Rect="0 300 400 100" />
</Canvas.Clip>
<Image Name="image4" />
</Canvas>
</Canvas>
</Border>
</Grid>
</Window>
728x90
▶ MainWindow.xaml.cs
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media.Animation;
namespace TestProject
{
/// <summary>
/// 메인 윈도우
/// </summary>
public partial class MainWindow : Window
{
//////////////////////////////////////////////////////////////////////////////////////////////////// Field
////////////////////////////////////////////////////////////////////////////////////////// Private
#region Field
/// <summary>
/// 이미지 애니메이션 1
/// </summary>
private DoubleAnimation imageAnimation1 = new DoubleAnimation();
/// <summary>
/// 이미지 애니메이션 2
/// </summary>
private DoubleAnimation imageAnimation2 = new DoubleAnimation();
/// <summary>
/// 이미지 애니메이션 3
/// </summary>
private DoubleAnimation imageAnimation3 = new DoubleAnimation();
/// <summary>
/// 이미지 애니메이션 4
/// </summary>
private DoubleAnimation imageAnimation4 = new DoubleAnimation();
#endregion
//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
////////////////////////////////////////////////////////////////////////////////////////// Public
#region 생성자 - MainWindow()
/// <summary>
/// 생성자
/// </summary>
public MainWindow()
{
InitializeComponent();
this.canvas1.MouseMove += canvas1_MouseMove;
this.canvas2.MouseMove += canvas2_MouseMove;
this.canvas3.MouseMove += canvas3_MouseMove;
this.canvas4.MouseMove += canvas4_MouseMove;
Canvas.SetLeft(image1, 0);
Canvas.SetLeft(image2, 0);
Canvas.SetLeft(image3, 0);
Canvas.SetLeft(image4, 0);
}
#endregion
//////////////////////////////////////////////////////////////////////////////////////////////////// Method
////////////////////////////////////////////////////////////////////////////////////////// Private
//////////////////////////////////////////////////////////////////////////////// Event
#region 캔버스 1 마우스 이동시 처리하기 - canvas1_MouseMove(sender, e)
/// <summary>
/// 캔버스 1 마우스 이동시 처리하기
/// </summary>
/// <param name="sender">이벤트 발생자</param>
/// <param name="e">이벤트 인자</param>
private void canvas1_MouseMove(object sender, MouseEventArgs e)
{
SetAnimationPosition(e.GetPosition(this.canvas1).X);
this.imageAnimation1.SpeedRatio = 4;
this.imageAnimation2.SpeedRatio = 2;
this.imageAnimation3.SpeedRatio = 1;
this.imageAnimation4.SpeedRatio = 0.5;
BeginAnimation();
}
#endregion
#region 캔버스 2 마우스 이동시 처리하기 - canvas2_MouseMove(sender, e)
/// <summary>
/// 캔버스 2 마우스 이동시 처리하기
/// </summary>
/// <param name="sender">이벤트 발생자</param>
/// <param name="e">이벤트 인자</param>
private void canvas2_MouseMove(object sender, MouseEventArgs e)
{
SetAnimationPosition(e.GetPosition(this.canvas2).X);
this.imageAnimation1.SpeedRatio = 2;
this.imageAnimation2.SpeedRatio = 4;
this.imageAnimation3.SpeedRatio = 1;
this.imageAnimation4.SpeedRatio = 0.5;
BeginAnimation();
}
#endregion
#region 캔버스 3 마우스 이동시 처리하기 - canvas3_MouseMove(sender, e)
/// <summary>
/// 캔버스 3 마우스 이동시 처리하기
/// </summary>
/// <param name="sender">이벤트 발생자</param>
/// <param name="e">이벤트 인자</param>
private void canvas3_MouseMove(object sender, MouseEventArgs e)
{
SetAnimationPosition(e.GetPosition(this.canvas3).X);
this.imageAnimation1.SpeedRatio = 0.5;
this.imageAnimation2.SpeedRatio = 2;
this.imageAnimation3.SpeedRatio = 4;
this.imageAnimation4.SpeedRatio = 1;
BeginAnimation();
}
#endregion
#region 캔버스 4 마우스 이동시 처리하기 - canvas4_MouseMove(sender, e)
/// <summary>
/// 캔버스 4 마우스 이동시 처리하기
/// </summary>
/// <param name="sender">이벤트 발생자</param>
/// <param name="e">이벤트 인자</param>
private void canvas4_MouseMove(object sender, MouseEventArgs e)
{
SetAnimationPosition(e.GetPosition(this.canvas4).X);
this.imageAnimation1.SpeedRatio = 0.5;
this.imageAnimation2.SpeedRatio = 1;
this.imageAnimation3.SpeedRatio = 2;
this.imageAnimation4.SpeedRatio = 4;
BeginAnimation();
}
#endregion
//////////////////////////////////////////////////////////////////////////////// Function
#region 애니메이션 위치 설정하기 - SetAnimationPosition(leftPosition)
/// <summary>
/// 애니메이션 위치 설정하기
/// </summary>
/// <param name="leftPosition">왼쪽 위치</param>
private void SetAnimationPosition(double leftPosition)
{
this.imageAnimation1.To = leftPosition;
this.imageAnimation2.To = leftPosition;
this.imageAnimation3.To = leftPosition;
this.imageAnimation4.To = leftPosition;
}
#endregion
#region 애니메이션 시작하기 - BeginAnimation()
/// <summary>
/// 애니메이션 시작하기
/// </summary>
private void BeginAnimation()
{
this.image1.BeginAnimation(Canvas.LeftProperty, this.imageAnimation1, HandoffBehavior.Compose);
this.image2.BeginAnimation(Canvas.LeftProperty, this.imageAnimation2, HandoffBehavior.Compose);
this.image3.BeginAnimation(Canvas.LeftProperty, this.imageAnimation3, HandoffBehavior.Compose);
this.image4.BeginAnimation(Canvas.LeftProperty, this.imageAnimation4, HandoffBehavior.Compose);
}
#endregion
}
}728x90
반응형
그리드형
'C# > WPF' 카테고리의 다른 글
| [C#/WPF] Grid 클래스 : 환형 패널 사용하기 (0) | 2020.12.12 |
|---|---|
| [C#/WPF] ObjectDataProvider 엘리먼트 : Colors 클래스의 색상 정적 속성 구하기 (0) | 2020.12.07 |
| [C#/WPF] 파노라마 뷰 사용하기 (0) | 2020.12.06 |
| [C#/WPF] TabControl 클래스 : FADE IN/OUT 탭 컨트롤 사용하기 (0) | 2020.12.06 |
| [C#/WPF] FrameworkElement 엘리먼트 : FocusVisualStyle 속성을 사용해 포커스 사각형 제거하기 (0) | 2020.12.05 |
| [C#/WPF] UIElement 클래스 : MouseMove 이벤트를 사용해 마우스 이동시 애니메이션 설정하기 (0) | 2020.12.05 |
| [C#/WPF] EventTrigger 엘리먼트 : RoutedEvent 속성을 사용해 복권 긁는 효과 사용하기 (0) | 2020.12.05 |
| [C#/WPF] UIElement 클래스 : 복제하기 (0) | 2020.12.05 |
| [C#/WPF] Viewport2DVisual3D 엘리먼트 : 곡선 형태의 ScrollBar 사용하기 (0) | 2020.12.05 |
| [C#/WPF] Imaging 클래스 : CreateBitmapSourceFromHBitmap 정적 메소드를 사용해 아이콘에서 비트맵 소스 구하기 (0) | 2020.12.05 |
| [C#/WPF] Imaging 클래스 : CreateBitmapSourceFromHBitmap 정적 메소드를 사용해 비트맵에서 비트맵 소스 구하기 (0) | 2020.12.05 |
댓글을 달아 주세요