■ UIElement 클래스 : MouseMove 이벤트를 사용해 마우스 이동시 애니메이션 설정하기
------------------------------------------------------------------------------------------------------------------------
▶ 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>
|
▶ 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 } }
|
------------------------------------------------------------------------------------------------------------------------
'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 |
댓글을 달아 주세요