'Gradient'에 해당되는 글 2건

  1. 2010.11.18 Create WPF Gradient Editor
  2. 2010.08.09 MidPoint GradientStop For WPF

Introduction

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

Create Gradient Editor Control

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


그리고 DrawingVisual을 이용해 Linear Gradient의 방향성을 표현하기 위한 Header, Tail의 Visual을 구현하고 VisualCollection에 등록합니다. GradientStopVisuals는 GradientStop과 Visual객체를 매핑 하기 위한 도구로 GradientStop이 추가되거나 삭제 또는 상태가 변경되었을때 GradientStop을 이용해 대상 Visual객체에 접근할 수 있도록 Dictionary형태로 관리합니다.


위에서 생성한 Visual객체들은 모양과 크기 정도만 정의가 되어 있는 상태이기 때문에 데이터가 들어 왔을때 정확한 위치에 출력 되진 않습니다. 따라서 정확한 위치에 출력 될 수 있도록 ArrangeOverride메서드를 재정의 하여 각 요소의 위치를 바로잡는 과정을 수행합니다.

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


신고

Introduction

포토샵을 사용하는 디자이너와 협업하여 WPF프로젝트를 진행하다보면, 디자이너가 작업한 결과물들을 사용가능한 형태(XAML)로 변환하는 과정이 필요한데, 전문 디자인 툴인 포토샵의 기능들을 기본적으로 제공되는 WPF의 기능만으로 표현해 내는것은 한계가 따릅니다. 대표적인 예로 GradientBrush, Effect, Blend Mode등이 대표적인 예입니다. 이번시간에는 포토샵에서 Gradient를 편집할때 사용 할 수 있는 MidPoint GradientStop을 WPF에서 적용 할 수 있는 방법에 대해 생각해보고 구현하는 방법에 대해 소개합니다.

What is the MidPoint GradientStop?

MidPoint Gradient란, 시작 GradientStop에서 종료 GradientStop까지 색이 변화 하는 과정에서 두 색이 절반씩 섞여 중간색으로 변환되는 시점을 말합니다. 실제 포토샵에서는 예를 이용해 조금더 설명을 하자면, 아래 그림의 경우 빨간색을 시작으로 파란색으로 끝나는 Gradation에서 MidPoint가 0.5 즉, 빨간색과 파란색의 중간색인 보라색이 0.5지점에 위치하는걸 확인 할 수 있습니다.


마찬가지로 MidPoint가 0.9에 위치하게 되면, 아래 그림과 같이 중간색인 보라색이 0.9지점에 위치하게 됩니다.


간단한 논리로 생각을 해보면, 두개의 GradientStop을 지정했지만, 실제로는 MidPoint가 변경되거나, Start 혹은 End의 색이 변경될때 중간 값을 띄는 GradientStop이 하나 더존재 한다고 생각할 수 있겠습니다.

Create MidPoint Attached Property

WPF에서는 기본적으로 위에서 설명한 MidPoint를 지원하지 않기 때문에 MidPoint를 지원하도록 하기 위해 가장먼저 GradientStop에 MidPoint를 지정 할 수 있도록 아래와 같이 Attached DependencyProperty를 정의합니다. GradientStop에만 사용되기 때문에 대상 타입을 Gradient Stop으로 지정했습니다.

이제 MidPoint Attached Property가 정의되었으면, 위에서 이야기 한바와 같이 MidPoint와 관련된 일을 수행하는 GradientStop을 생성해야 합니다. 그리고 기준 GradientStop과 이전 GradientStop의 색에 따라 중간 색이 변경될 수 있도록 Binding을 하고, Converter를 이용해 중간색을 계산합니다.

Calculate Mid Point Color & Offset



위 코드는 두 GradientStop의 Offset을 입력받아 상대 값으로 입력된 MidPoint를 절대값 Offset으로 변환 하는 부분과 두 색을 입력받아 중간 색을 계산하는 코드입니다. 그리고 다음과 같이 XAML 에서 MidPoint를 적용하실 수 있습니다.



이번시간에 사용된 소스코드는 아래에서 다운로드 받으실수 있으며, 기타 궁금하신 점이나 문의 사항은 댓글달아주시면 답변 드리도록 하겠습니다. 감사합니다.

 
신고