Introduction

Control로 만든 내용을 Dialog로 띄우고 싶은 경우가 있습니다. 경우에 따라 이 Control이 화면에 일부분이 될 경우도 있고 Dialog로 떠야할 경우도 있을 때,같은 xaml의 코드를 Window로 구현할 수도 없고, 난감하지요.  또, 이런 경우가 자주 생긴다면 매번 Window를 생성해서 띄우는 것도 번거로운 일입니다. 이럴 때 Control이 그냥 Window처럼 ShowDiaolg하면 팍! 하고 떴음 좋겠죠? 이번 시간에는 Extention Method를 이용한 Control을 Dialog 형태로 출력하는 방법에 대해 소개합니다.

[귀여운 곰돌이 팝업입니다.]

Introduction

ListBox나 Listview와 같이 목록형으로 데이터를 출력하는 컨트롤에서 많은 양의 데이터를 출력할경우, 스크롤 바를 조작할때 스크롤 속도가 매우 느려지는 현상을 발생합니다. 속도가 느려지는 가장큰 원인은 스크롤하는 도중에 매번 화면에 출력될 View가 업데이트되면서 퍼포먼스에 영향을 주게 되는것인데, 이를 해결하기 위한 간단한 방법으로 ScrollViewer의 IsDeferredScrollingEnabled 속성을 이용해 스크롤이 모두 끝났을때 View를 갱신하는 방법이 있습니다.

하지만 IsDeferredScrollingEnabled을 사용 할 경우 스크롤 동작이 완료될때까지 뷰가 갱신되지 않기때문에 디테일한 탐색이 불가능하기 때문에 오히려 더 불편한 상황이 발생 할 수도 있습니다. 이번시간에는 IsDeferredScrollingEnabled를 사용하여 스크롤할 때 View 전체가 갱신되지는 않지만 Thumb가 위치 한 데이터를 미리보기 형태로 제공함으로서 효과적인 탐색이 가능하도록 하는 방법에 대해 소개합니다. 아래는 이번시간에 구현할 결과물 영상입니다.

위 동영상과 같은 내용을 구현하기 위해 가장 먼저 확인 해 봐야 할 것이 DefferedScrolling을 이용했을 때 ScrollBar의 변경상태를 확인하는 방법입니다. ScrollViewer에서 기본적으로 제공되는 ScrollChanged는 DefferedScrolling을 이용할 경우 마지막에만 이벤트가 호출되기 때문에 정확한 위치를 계산할 수 없습니다.

WPF에서는 DefferedScrolling을 제어할 수 있도록 ScrollBar에 DeferScrollToVerticalOffsetCommand를 제공하고 있습니다. 이 Command는 ScrollViewer가 DefferedScrolling를 사용해 스크롤을 조작할 때 호출되는 Command로 CommandParameter를 통해 현재 Thumb의 위치를 가져올 수 있습니다.

private static void UpdatePreviewPopupContent(FrameworkElement Target, object Content, DataTemplate Template) { PreviewContent.Content = Content; PreviewContent.ContentTemplate = Template; PreviewContent.Measure(new Size(double.MaxValue, double.MaxValue)); PreviewPopup.PlacementTarget = Target; PreviewPopup.IsOpen = true; Point ScreenPoint = Target.PointToScreen(new Point()); ScreenPoint.X += -PreviewContent.DesiredSize.Width; ScreenPoint.Y += -(PreviewContent.DesiredSize.Height / 2 - Target.ActualHeight / 2); PreviewPopup.PlacementRectangle = new Rect(ScreenPoint, PreviewContent.DesiredSize); }
아래는 이번시간에 구현한 전체 소스코드이며 궁금하신점이나 문의사항은 이메일이나 댓글로 남겨주시면 답변드리도록 하겠습니다. 아래소스코드는 VisualStudio2010버전에서 제작되었습니다.

WIT.WPF.Sample.DeferScrollingPreviewSample.zip

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

Introduction

ERP 관련 Application을 제작할때 자주 사용되는 컨트롤 중의 하나가 ListView입니다. 많은 양의 데이터를 손쉽게 출력하기에는 용이하지만 컨트롤 자체적으로 데이터의 정렬이나 필터링등의 기능을 제공하고 있지 않기 때문에 이부분을 직접 구현하거나 상용 컴포넌트를 구입해서 사용해야 합니다. 이번시간에는 ListView의 Column을 클릭해 데이터를 정렬하거나 필터링 하는 방법에 대해 소개합니다. 아래는 이번시간에 구현하게 될 내용의 데모 동영상입니다.

이번 예제의 경우 한번의 포스팅에서 다루기 힘든 양의 소스코드이기 때문에 이번시간에는 기본적인 부분만 설명하고 나머지 부분은 추후 다시 포스팅을 하거나 소스코드를 보시고 이해가 안되신다고 하시는 부분을 위주로 먼저 설명 드리겠습니다.

ListView Sorting

ListView의 데이터를 정렬하기 위해서는 CollectionView의 SortDescriptions을 이용합니다. ListBox나 ListView와 같이 ItemsPresenter를 사용하는 컨트롤의 경우 화면에 출력될때 CollectionView를 이용해 출력될 데이터를 구성하는데 이때 SortDescription을 지정해주면 간단하게 데이터를 정렬 할 수 있습니다. 아래는 정렬 기준 속성이름과 정렬방향 그리고 ItemsSource를 통해 화면에 출력될 데이터를 정렬하는 방법입니다.

private static void Sort(string PropertyName, ListSortDirection Direction, object ItemsSource) { // ItemsSource의 Default 뷰 가져오기 ICollectionView CollectionView = CollectionViewSource.GetDefaultView(ItemsSource); // 기존에 등록되어 있던 SortDescriptions제거 CollectionView.SortDescriptions.Clear(); // SortDescription 추가 SortDescription SortDescription = new SortDescription(PropertyName, Direction); CollectionView.SortDescriptions.Add(SortDescription); // 뷰 갱신 CollectionView.Refresh(); }

ListView Filtering

데이터 필터링도 마찬가지로 CollectionView를 이용해 간단히 구현 할 수 있습니다. CollectionView에는 Predicate<object>형식의 대리자를 통해 해당 요소가 화면에 출력될 때 필터링 되야 하는지 여부를 결정하는데 하나의 Predicate<object>에서 여러개의 필터링 규칙을 지정하는 것은 효율적이지 않기 때문에 아래와 같은 PredicateList<T>를 생성해 여러 상황의 Filtering 기준을 지정 할 수 있습니다.

public class PredicateList<T> : List<Predicate<T>> { public bool Predicate(T obj) { foreach (Predicate<T> Predicate in this) { if(Predicate(obj) == false) return false; } return true; } }
아래는 이번시간에 사용된 전체 소스코드입니다.

WIT.WPF.Samples.ListViewSortAndFilterSample.zip

※ 이번 시간 이후로 등록되는 포스팅의 소스코드를 열기 위해서는 VisualStudio2010버전이 필요합니다.