WPod Touch #1 - WPF로 구현하는 IPod Touch 슬라이딩 윈도우

저녁에 퇴근하고 아이팟 터치를 사용하다가 슬라이딩 윈도우가 참 멋지다라는 생각을 하게 되었습니다. 그래서 요걸 WPF로 간단하게 구현해볼 수 없을까라고 생각하게 되었고, 실제로 구현해보니 (저의 지극히 얕은 WPF 관련 지식만으로도) 몇줄 안되는 코드로 구현할 수 있었습니다. 

다만 조금 난감해 했던 부분이 있는데, DoubleAnimation을 사용해서 Canvas의 위치를 조절하고 난 후 Canvas의 위치를 다시 조절하려고 하면 재조정이 안되는 현상이였습니다. 그 이유는 DoubleAnimation에서 조절한 Canvas의 Left 속성이 DoubleAnimation에 의해서 지속적으로 값이 유지되기 때문이었는데요, 이 문제는 Completed 이벤트를 사용하여 해결하였습니다(참고 자료: Dependency Property Value Precedence).

WPF가 재밌는 이유는 이전에 복잡하게 처리해야 했던 Animation 부분을 간단하게 처리할 수 있게 도와줌으로써 개발자들이 더 많은 사고의 유연성을 갖게 되었다는 점을 꼽을 수 있겠습니다. 하지만 아무리 WPF라고 하더라도 사용자가 보고 '우와~' 할만한 제품을 만들려고 한다면 엄청 고생할 수 밖에요..

소스 코드가 워낙 간단해서 함께 첨부하였습니다.

<Window x:Class="SlidingWindow.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="IPod Touch 2nd - NaggingMachine" Height="520" Width="330" Loaded="Window_Loaded" MouseLeftButtonUp="Window_MouseLeftButtonUp" MouseLeftButtonDown="Window_MouseLeftButtonDown" MouseMove="Window_MouseMove" MouseLeave="Window_MouseLeave" Name="MainWindow"> <Canvas Name="canvasMain" Background="Black"> <Image Canvas.Left="0" Canvas.Top="0" Height="23" Name="imageTop" Width="318" Source="file:///D:/wpf/SlidingWindow/top.png" /> <Canvas Name="canvasBack" Canvas.Left="0" Height="358" Canvas.Top="24" Width="315" Background="Black"> <Image Canvas.Left="0" Canvas.Top="0" Height="358" Name="imageMain" Width="318" Source="file:///D:/wpf/SlidingWindow/main.png" /> </Canvas> <Image Canvas.Left="0" Canvas.Top="382" Height="98" Name="imageBottom" Width="317" Source="file:///D:/wpf/SlidingWindow/bottom.png" /> </Canvas> </Window>

<MainWindow.xaml>

using System; using System.Windows; using System.Windows.Controls; using System.Windows.Input; using System.Windows.Media.Animation; namespace SlidingWindow { /// <summary> /// Interaction logic for Window1.xaml /// </summary> public partial class Window1 : Window { private Point _ptClicked; private bool _isMouseCaptured; private double _currentPos = 0; public Window1() { InitializeComponent(); _isMouseCaptured = false; } private void Window_Loaded(object sender, RoutedEventArgs e) { NameScope.SetNameScope(this, new NameScope()); this.RegisterName(canvasBack.Name, canvasBack); } private void Window_MouseLeftButtonUp(object sender, MouseButtonEventArgs e) { if (_isMouseCaptured) { _isMouseCaptured = false; _SlideWindowAnimation(); } } private void Window_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) { _ptClicked = e.GetPosition(canvasMain); _isMouseCaptured = true; } private void Window_MouseMove(object sender, MouseEventArgs e) { if (_isMouseCaptured) { // 실시간으로 Canvas를 움직인다. Point pt = e.GetPosition(canvasMain); _currentPos = pt.X - _ptClicked.X; Canvas.SetLeft(canvasBack, pt.X - _ptClicked.X); } } private void Window_MouseLeave(object sender, MouseEventArgs e) { if (_isMouseCaptured) { _isMouseCaptured = false; _SlideWindowAnimation(); } } private void _SlideWindowAnimation() { DoubleAnimation slideWindowAnimation = new DoubleAnimation { From = _currentPos, To = 0, Duration = new Duration(TimeSpan.FromMilliseconds(350)), AccelerationRatio = 0.5, FillBehavior = FillBehavior.Stop }; // Animation 작업이 끝나면 강제로 위치를 설정한다. slideWindowAnimation.Completed += ((sender, e) => { Canvas.SetLeft(canvasBack, 0); }); canvasBack.BeginAnimation(Canvas.LeftProperty, slideWindowAnimation); } } }

<MainWindow.xaml.cs>

아래 동영상은 실제 작동하는 모습입니다. (잔상이 남는 이유는 녹화시에 프레임이 낮아서 그렇습니다. 실제 작동할 때는 잔상이 남지 않아요 ^^)

SlidingWindow.zip