안녕하세요. 이번시간에는 아래 동영상과 같이 마우스를 사용해 스크롤 할 수 있는 Panel을 구현해보았습니다. 마치 IPhone에서 터치로 창을 제어하는 느낌이라 제목을 IPhone Scroll Panel이라고 써봤습니다. 만들고보니 Scroll Panel보단 SlidePanel이 더 어울리는거 같네요 -_- ㅋ
구현에 필요한 코드는 다음과 같습니다.
| [XAML] |
|
<Grid Width="320" Height="480"> |
| [C#] |
|
void Window1_Loaded(object sender, RoutedEventArgs e) ScrollPanel ScrollPanel = new ScrollPanel(Panel); } |
| [C# - ScrollPanel.cs] |
|
public class ScrollPanel private const int MinimunRange = 30; private FrameworkElement Target { get; set; } private Point BeginPoint; public ScrollPanel(FrameworkElement TargetElement) Target = TargetElement; } void Target_MouseDown(object sender, MouseButtonEventArgs e) if (e.LeftButton != MouseButtonState.Pressed) return; // 너무 빨리 움직였을경우 // 마우스가 제자리 일 경우 // 마우스가 너무 적게 움직였을 경우 MoveAnimation.By = MovePosition*1.5; } } |
XAML코드와 Window Loaded Event부분은 UI구성에 필요한 부분이므로 설명은 생략하도록 하겠습니다. ScrollPanel Class를 살펴보겠습니다. ScrollPanel은 생성자로 스크롤이 될 Target Control을 입력받으며 내부적으로 Target과 Target의 부모를 가지고 있습니다. 그리고 MouseEvent 가 발생할 경우 에 따라서 움직이는 Animation을 적용시켰습니다. 코드를 보고 이해가 안되는 부분이나 추가 설명이 필요하신 부분은 리플 달아주세요.
아래는 전체 소스코드 파일입니다.

IPhoneScroll.zip
