MidPoint GradientStop For WPF

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으로 지정했습니다.

public static double GetMidPoint(GradientStop obj) { return (double)obj.GetValue(MidPointProperty); } public static void SetMidPoint(GradientStop obj, double value) { obj.SetValue(MidPointProperty, value); } public static readonly DependencyProperty MidPointProperty = DependencyProperty.RegisterAttached("MidPoint", typeof(double), typeof(GradientHelper), new FrameworkPropertyMetadata(0.0, OnMidPointPropertyChanged));

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

Calculate Mid Point Color & Offset

public class GradientStopMidPointConverter : IMultiValueConverter { public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture) { if (parameter.ToString() == "OFFSET") { double Start = (double)values[0]; double End = (double)values[1]; double MidPoint = (double)values[2]; return Start + (End - Start) * MidPoint; } else if (parameter.ToString() == "COLOR") { Color Start = (Color)values[0]; Color End = (Color)values[1]; Color ResultColor = new Color(); ResultColor.A = (Byte)((0.5 * Start.A) + (0.5 * End.A)); ResultColor.R = (Byte)((0.5 * Start.R) + (0.5 * End.R)); ResultColor.G = (Byte)((0.5 * Start.G) + (0.5 * End.G)); ResultColor.B = (Byte)((0.5 * Start.B) + (0.5 * End.B)); return ResultColor; } return null; } public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture) { throw new NotImplementedException(); } }

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

<LinearGradientBrush EndPoint="1,0"> <GradientStop Color="Red" Offset="0" /> <GradientStop Color="Green" Offset="0.5" /> <GradientStop Color="Blue" Offset="1" l:GradientHelper.MidPoint="0.8"/> </LinearGradientBrush>

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

WIT.WPF.Sample.MidPointGradientSample.zip