ScrollViewer Zoom And Panning Behavior

Introduction

일반적으로 Image Viewer 등과 같이 화면에 출력해야할 내용이 화면크기보다 클 경우 ScrollViewer를 이용해 내용을 스크롤할 수 있도록 구현을 하는데요, 이번시간에는 화면을 스크롤하기 위해서 스크롤바를 조작하지 않고 간단한 마우스조작으로 컨텐츠를 직접 드래그하는 방식으로 View를 조절하고 확대 축소할 수 있는 기능을 구현해보았습니다. 아래는 이번시간에 구현한 결과물 영상입니다.

Create ZoomAndPanning Behavior

Zoom 또는 Panning의 경우 자주 사용될 수 있는 기능이기 때문에 재사용을 용이하게 하기 위해서 Behavior의 형태로 작성했습니다. ZoomAndPanning Behavior의 기본적인 구성은 와래와 같습니다.

public class ZoomAndPanning : Behavior<ScrollViewer> { static ZoomAndPanning(); public ZoomAndPanning(); protected override void OnAttached(); protected override void OnDetaching(); private void OnContentChanged(); protected override void OnPropertyChanged(DependencyPropertyChangedEventArgs e); private static object CoerceZoomRate(DependencyObject Target, object Value); private double GetCoerceZoomRateValue(double ZoomRate); private Point GetCenterOfViewport(); private Point GetContentMousePosition(); private void OnMouseLeftButtonDown(object sender, MouseButtonEventArgs e); private void OnMouseLeftButtonUp(object sender, MouseButtonEventArgs e); private void OnMouseMove(object sender, MouseEventArgs e); private void OnPreviewMouseWheel(object sender, MouseWheelEventArgs e); private void OnScrollViewerScrollChanged(object sender, ScrollChangedEventArgs e); protected bool CanPadding { get; } protected bool CanZooming { get; } protected FrameworkElement ContentElement { get; } private Point? LastCenterOfViewport { get; set; } private Point? LastContentMousePosition { get; set; } private Point? LastDragPoint { get; set; } public double MaximumZoomRate { get; set; } public double MinimumZoomRate { get; set; } public Cursor PanningCursor { get; set; } public Key PanningKey { get; set; } public Key ZoomingKey { get; set; } public double ZoomRate { get; set; } }

ScrollViewer의 기본적인 마우스 이벤트와 ScrollChanged이벤트를 수신하고 각 이벤트마다 적적할 처리를 진행 해줬습니다. 그리고 추가적으로 최대 확대배율이나 최소 확대배율, Zoom And Panning 단축키등을 통해 다양한 조작환경을 제공 할 수 있도록 구현됬습니다.

소스코드자체가 어려운 내용들은 아니기 때문에 이번시간에는 별도의 코드 설명은 생략하겠습니다. 아래는 이번시간에 사용한 전체소스코드 파일이며 VisualStudio 2010에서 작업되었습니다. 기타 질문이나 문의사항은 이메일이나 댓글남겨주시면 답변드리겠습니다. 감사합니다.

WIT.WPF.Sample.ZoomAndPanningBehaviorExample.zip