안녕하세요. 김대욱입니다. 이번시간에 소개해 드릴 내용은 임의로 제작한 Attribute를 UI에 Binding 하기 위한 MarkupExtension에 대해 소개해 드리겠습니다. 이 내용은 데브피아 WPF&Silverlight마을에서 이광현 (dololas)님께서 질문해주신 내용입니다. 간단하게 이번시간에 하고자 하는 내용을 그림으로 표현 하면 아래와 같습니다.
먼저 위 그림과 같이 Header부분에 제목, 감독, 출연배우라고 출력만 하면 되는 상황이라면 아래와 같이 직접 명시해줄 수 있을텐데요, 질문자 님께서 말씀 하신 내용은 명시적으로 Header값을 입력하지 않고, 지정한 Attribute에 따라 Header의 출력 내용을 결정 하고자 하셨으므로 이에 따른 해결 방법에 대해 알아보도록 하겠습니다.
이번 예제에 사용되는 Class와 Attribute의 구조는 다음과 같습니다.
일단 위와 같은 상황에서 가장먼저 떠오르는게 DataBinding이 지만, DataBinding은 Property와 Property간의 연결을 제공하기 때문에 Attribute와는 함께 사용하실 수 없습니다. 따라서 Attribute 값을 반환 하는 MarkupExtension을 구현하여 해결해야 합니다. 아래는 MarkupExtension 구현 부분 소스코드입니다.
MarkupExtension 파라미터로 입력받은 Type과 MemberPath정보를 기반으로, CustomAttribute의 값을 가져옵니다. 간단하죠? 실제 사용할때에는 아래와 같이 사용하시면 되겠습니다.
이상으로 이번시간 내용을 마치며, 기타 질문은 리플이나 이메일로 해주시면 답변 드리도록 하겠습니다. 아래는 이번시간에 사용된 전체소스코드입니다.
안녕하세요. 김대욱입니다. 이번시간에 소개해 드릴내용은 WPF에서 사용할 수 있는 AngleGradientBrush를 제작하는 방법이 되겠습니다. AngleGradient란 아래 그림을 보시면 쉽게 이해 하실 수 있을텐데요, WPF에서는 LinearGradient, RadialGradient만을 제공하는걸 하기때문에 (ReflectedGradient와 Diamond Gradient는 LinearGradient를 이용해 구현할 수 있습니다.)
Angle Gradient와 같은효과 나타내고자 한다면 직접 구현해서 사용해야 합니다.
그런데, 막상 구현을 해서 사용하려고 보면 WPF에서 Custom Brush 제작을 지원하고 있지 않아 직접 구현하는것도 어려워보입니다. 해외 포럼이나 블로거들을 보면 많은 분들께서 Angle Gradient와 관련된 내용에 대해 궁금해 하시는걸 확인할 수 있었는데요. 대부분 Angle Gradient를 Photoshop등에서 미리 그려서 Image File로 가지고 있다가, ImageBrush를 사용하는 방법을 사용한다고 합니다. 하지만, 이런 방법의 경우 Runtime 중에 Gradient Stop을 지정할 수 자유도가 많이 떨어지게 됩니다.
위동영상을 보시면 Runtime중에 자유롭게 Gradient Stop을 지정할 수 있고, Gradient Size, Gradient Detial, CenterPoint등을 의 크기를 지정할 수 있습니다. 원리는 아주 간단합니다. Property를 통해 GradientStop 정보와 Size, Detail, CenterPoint 등의 정보를 입력받고 이를 기반으로 직접 Gradient Image를 생성합니다. 그리고 MarkupExtension의 ProvideValue에 생성한 Image를 사용하는 ImageBrush를 반환 하는 방법을 사용합니다.
그럼 이제 중요한건 Angle Gradient Image를 어떻게 생성하는가가 되겠습니다. 저같은 경우 아래와 그림과 같은 방법을 이용하여 Gradient Color를 계산하고 활용했습니다. WPF에서는 이미 LinearGradient를 제공하기 때문에 Gradient Stop을 입력하면 자연스러운 Gradient 색상을 추출 할 수 있고, 회전 각에 따라 추출된 색상정보를 매핑하면 아래와 같은 Angle Gradient Image를 생성 할 수 있습니다.
아래 코드는 GradientStopCollection에 저장된 GradientStop정보를 가지고 Gradient Color Code를 추출 하는 내용과 ColorCode를 이용해 AngleGradient Image를 생성하는 코드입니다. 코드 자체는 특별하게 어려운 부분은 없으니 한줄한줄 천천히 살펴보시면 이해하시는데에는 무리가 없을것같습니다.
그리고 실제 사용할 때에는 아래와 같이 사용할 수 있습니다.
이번시간에 중요한 내용은 MarkupExtension을 이용해 XAML을 확장하는 방법과 그리고 Gradient Image를 생성하는 부분이 되겠습니다. 그리고 아래는 이번시간에 사용한 전체 소스코드이며, 기타 질문이나 문의는 리플이나, 이메일로 주시면 되겠습니다!
CustomAttributeExtension.zip
