Create WPF Gradient Editor

Introduction

이번시간에는 WPF에서 사용할 수 있는 Gradient Editor를 구현하는 방법에 대해 소개합니다. 아래 동영상은 이번시간에 구현하게 될 GradientEditor의 데모 동영상으로 Expression Blend와 유사한 형식으로 Gradient를 편집할 수 있습니다. 

Create Gradient Editor Control

먼저 Linear Gradient를 표현하기 위해서 아래와 같이 기본적인 속성들을 선언합니다. 각요소를 표현하기 위해 DrawingVisual을 이용 할 예정이기 때문에 FrameworkElement를 상속받아 VisualCollection를 선언한 뒤 VisualChildrenCount와 GetVisualChild를 재정의 합니다.

public class GradientDirectionControl : FrameworkElement { public Point StartPoint { get; set; } // Dependency Property public Point EndPoint { get; set; } // Dependency Property public GradientStopCollection GradientStops { get; set; } // Dependency Property public GradientStop SelectedGradientStop { get; set; } // Dependency Property protected DrawingVisual HeaderVisual { get; set; } protected DrawingVisual BodyVisual { get; set; } protected DrawingVisual TailVisual { get; set; } private VisualCollection Children { get; set; } private Dictionary<GradientStop, DrawingVisual> GradientStopVisuals { get; set; } protected override int VisualChildrenCount { get { return Children.Count; } } protected override Visual GetVisualChild(int index) { return Children[index]; } }
그리고 DrawingVisual을 이용해 Linear Gradient의 방향성을 표현하기 위한 Header, Tail의 Visual을 구현하고 VisualCollection에 등록합니다. GradientStopVisuals는 GradientStop과 Visual객체를 매핑 하기 위한 도구로 GradientStop이 추가되거나 삭제 또는 상태가 변경되었을때 GradientStop을 이용해 대상 Visual객체에 접근할 수 있도록 Dictionary형태로 관리합니다.

protected void InitializeVisuals() { GradientStopVisuals = new Dictionary<GradientStop, DrawingVisual>(); BodyVisual = new DrawingVisual(); HeaderVisual = new DrawingVisual(); DrawingContext DC = HeaderVisual.RenderOpen(); DC.DrawGeometry(Brushes.Black, null, Geometry.Parse("M0,5 10,0 10,10z")); DC.Close(); TailVisual = new DrawingVisual(); DC = TailVisual.RenderOpen(); DC.DrawGeometry(Brushes.Black, null, Geometry.Parse("M0,5 5,0 15,0 10,5 15,10 5,10z")); DC.Close(); Children = new VisualCollection(this); Children.Add(BodyVisual); Children.Add(HeaderVisual); Children.Add(TailVisual); }
위에서 생성한 Visual객체들은 모양과 크기 정도만 정의가 되어 있는 상태이기 때문에 데이터가 들어 왔을때 정확한 위치에 출력 되진 않습니다. 따라서 정확한 위치에 출력 될 수 있도록 ArrangeOverride메서드를 재정의 하여 각 요소의 위치를 바로잡는 과정을 수행합니다.

이외에 몇가지 추가기능(마우스 제어 등)을 구현이 필요하지만 포스팅에 올리기에는 많은양의 소스코드라 나머지 부분에 대해서는 첨부파일을 확인 해주시기 바랍니다. 아래는 이번시간에 사용된 전체 소스코드 입니다. 기타 궁금하신점이나 문의사항은 이메일이나 댓글로 올려주시면 답변드리도록 하겠습니다.

WIT.WPF.Samples.GradientEditorSample.zip