'XAML'에 해당되는 글 13건

  1. 2010.04.02 Create Simple WPF ColorPicker (1)
  2. 2010.03.31 WPF UI 테마 샘플 제작 이야기
  3. 2010.03.03 XAML Apple Remote Control
TAG : colorpicker, HSB, RGB, wpf, XAML

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를 구현 할 수 있습니다.
신고


안녕하세요. 디자이너 채은석입니다.
요즘은 개발을 잘 모르는 디자이너와 디자인을 하기 힘든 개발자를 위해 보다 손쉽게 WPF UI 테마를 제작할 수 있도록 작업을 진행하고 있는데요, 일단 WPF에서 제공하는 기본적인 컨트롤들이 어떤 것이 있는지 파악하기 위한 작업부터 시작해 보았습니다. 그리고 그 후 GUI를 제작했는데 가장 보편적이고 무난한 Glossy스타일로 잡아 보았습니다.

* 아직은 본인이 익스프레션 블렌드에 익숙하지 못하기 때문에 먼저 포토샵으로 분위기를 잡아 보았습니다.


기본적으로 Normal, MouseOver, Press, Disable에 대한 정의를 내리고 개발자에게 넘겨 실제 WPF로 제작을 해본 결과는 다음과 같습니다. 기본적으로 Black이 메인으로 들어간 테마인데 손쉽게 여러 다른 컬러를 넣음으로써 분위기를 바꿔 볼 수 있습니다.


* 클릭하면 원본 크기

일단은 개발자와 호흡을 맞춰 보는 느낌으로 시작 했는데 더 고민하여 약 4~5개 정도의 테마가 완성되면 그 테마 안에서 각 사용자가 원하는 컬러를 넣어 봄으로써 매번 다른 느낌의 GUI스타일을 만들어 낼 수 있는 테마 에디터를 제작해 볼 생각입니다.
 


저작자 표시 비영리 변경 금지
신고

XAML을 이용해 그려본 Apple 리모컨입니다. 특별한 기능은 제공하고 있지 않으며 XAML 참고용으로 사용하시길 바라랍니다. 첨부된 파일을 열면 Red, White, Black 이라는 이름으로 정의된 객체를 확인 하실 수 있습니다.

신고