Introduction
이번시간에는 WPF를 이용해 색을 선택할 수 있는 간단한 ColorPicker를 제작하는 방법에 대해 소개합니다. ColorPicker는 WPF4.0에서 기본 컨트롤로 추가되었지만, WPF 3.0을 사용하시는 분이나 직접 ColorPicker를 제작해야하는 분들께 도움이 됬으면 하는 바램입니다. 위 동영상은 이번시간에 구현하는 ColorPicker 데모 동영상입니다.
Color Picker Color Model
Color Picker를 개발하기 앞서, ColorPicker의 Color Model에 대해 살펴보겠습니다. 위그림은 Expression Blend에서 제공하는 ColorPicker로 HSB(Hue, Saturation, Brightness) ColorModel을 이용하고 있습니다. 왼쪽 영역에서는 색의 명도와 채도를 선택할 수 있고, 오른쪽에서는 색상을 선택할 수 있는 구조입니다. Blend 뿐만아니라 Photoshop이나 기타 디자인 툴에서도 이와 마찬가지의 구조를 제공하고있는데요, 이유는 색을 기준으로 명도,채도로 구분 되었을때 직관적으로 선택할 있기 때문입니다.
다른 Color Model을 이용하는 경우에도 마찬가지로 색을 선택할 수 있는 ColorPicker를 구현할 수 있지만, 색의 기준이 되어 줄수 있는 색이 없기 때문에 사용자가 특정 색을 선택하고자 할때 많은 어려움을 겪게 됩니다. 위 그림은 Photoshop에서 제공되는 RGB ColorModel을 이용한 Color Picker로 원하는색(예를들어 파랑)을 선택하기 위해 어떻게 조절해야 하는지 한번에 와닿지는 않습니다.
HSB ColorModel의 경우 색을 기준 값으로 제공 할 수 있기 때문에 사용자가 원하는 색을 선택하는데 더 편리합니다. Color Model에 대한 자세한 내용은 http://en.wikipedia.org/wiki/Color_model 를 참고하시기 바랍니다.
Create HSB ColorModel Presenter
위에서 언급했듯이 일반적으로 ColorPicker에 사용되는 HSB ColorModel은 색,명도,채도로 구분됩니다. 그림으로 표현하면 위와 같이 표현할수 있으며 Hue를 빨간색으로 선택했을 때 Brightness는 빨강에서 검정으로, Saturation은 빨강에서 흰색으로 색이 변하는것을 알 수 있습니다. 이를 XAML로 표현하면 아래와 같이 표현할 수 있습니다.
위와 같이 Brightness와 Saturation을 표현했을 때 X축은 Saturation, Y축은 Brightness를 의미하기 때문에 쉽게 HSB Color를 계산할 수 있으며, 계산된 HSB를 다시 RGB로 변경하면 간단한 ColorPicker를 구현 할 수 있습니다.
WIT.Sample.ColorPickerExample.zip