안녕하세요? witstudio의 김대욱입니다. 그동안 동영상등으로만 몇번 소개드린바 있던 WPF UI테마 엔진인 Codinator(코디네이터)가 드디어 베타서비스를 시작 하였습니다. UI개발 & 디자인을 효율적으로 진행 할 수 있는 방법에 대해 많은 시간을 고민한 끝에 제작된 Codinator는 UI테마를 통해 간단한 조작만으로 다양한 Look & Feel를 선택하고 원하는 형태로 수정이 가능한 제품입니다. 현재 베타 서비스는 아래와 같이 진행되고 있으니 많은 관심 부탁드리겠습니다.


[Codinator Closed Beta 서비스 안내]

기간 : 2010년 12월 4일 ~ 2011년 1월 30일(예정)
대상 : WPF 기술을 사용하는 개발자 & 디자이너
사용환경 : Visual Studio 2010 또는 Expression Blend 4, .NetFramework 4이상
신청방법 : service@codinator.net으로 이름,소속,연락처,사용목적등을 간단하게 작성하여 참여 신청 메일을 보내주시면됩니다.


Codinator는 기존 개발자, 디자이너가 쉽게 제품에 적응 하고 사용할 수 있도록 Visual Studio와 Expression Blend에서 플러그인 형태로 동작하게 되며 현재 Codinator Beta에서 제공되고 있는 기능은 아래와 같습니다. 

테마 선택하기

테마 선택하기는 미리 제작된 테마(Style과 Template의 묶음)를 간단하게 선택해 반영 해 볼 수 있는 기능으로 현재 베타버전에서는 총 4개의 테마(BlueCity, GodFather, Aquarium, ConcreteBlock)를 제공하고 있으며 각각 테마에는 Button, ListBox, TextBox, TabControl, Panel에 대한 테마가 정의되어 있습니다. 정식버전에서는 모든 종류의 기본컨트롤을 지원할 계획에 있으며 자신이 직접 제작한 테마도 적용 할 수 있습니다.

스타일 선택하기

테마에서는 각 요소마다 한개 이상의 스타일을 가질 수 있습니다. 만약 요소에 대한 기본 스타일이 정의 되어 있는 경우에는 테마를 선택할 때 기본스타일이 반영이 되지만, 기본 스타일이 없거나 다른 스타일을 선택하고자 할때에는 직접 스타일을 선택하여 적용할 수 있습니다.

컬러 수정하기(Color Wheel)

Codinator에서는 Color Wheel을 이용해 디자이너가 아니라도 쉽게 테마의 전체적 분위기를 변경 해 볼 수 있습니다. ColorWheel을 이용하면 테마에서 사용된 색들간의 비율을 유지하면서 색을 변경해 주기 때문에 손쉽게 자연스러운 색으로 변환 할 수 있습니다. 색을 변경할때에는 반영된 결과가 Designer View에 실시간으로 보여지기 때문에 쉽게 원하는 느낌으로 찾아갈 수 있습니다.

컬러 수정하기(Detail)

ColorWheel을 이용한 컬러 수정이 간단하게 전체적인 분위기를 바꾸는 작업이었다면, 이번에는 각각 요소에 대한 색을 디테일하게 변경해 보도록 하겠습니다. 검색 영역에 수정할 요소의 이름을 입력하면 해당 요소가 사용하는 브러시의 목록이 나타나게 되며 여기서 각 요소에 대한 디테일한 수정이 가능합니다.

리소스 저장 및 불러오기

ColorWheel과 Detail Editor를 이용한 리소스는 결과를 저장하거나 불러올 수 있습니다. 이를 활용하면 다양한 리소스 목록을 이용해 한번작업해놓은 결과물을 수시로 바꿔가며 반영해 볼 수 있고, 동료 개발자/디자이너와 공유하기도 쉽습니다.

색맹/색약 시뮬레이션

세계적으로 전체 인구의 약 10%가 색맹 또는 색약을 가지고 있다고 합니다. Codinator에서는 여러분께서 선택하고 수정하신 테마가 이들에게 어떻게 보여지는지를 시뮬레이션 하고 이를 보고 색을 보정 할 수 있는 기능을 제공함으로 써 더 많은 사용자에게 편리한 UX를 제공 할 수 있도록 돕습니다.

이상으로 현재 Codinator Beta에서 제공되고 있는 기능에 대한 소개를 마치며 혹시 더 궁금하신점이나 베타 참여, 피드백, 기타 문의 사항은 언제든지 저에게 또는 service@codinator.net 으로 연락주시면 감사하겠습니다. 아직 부족한점이 많은 제품이지만 관심 가져 주셔서 감사드리며 앞으로 더 나은 제품을 만들기 위해 노력하고 끝까지 최선을 다하겠습니다. 많은 관심과 응원부탁드리겠습니다.

감사합니다!!

신고

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를 이용해 MVVM패턴으로 개발할때, ViewModel에서 View에 있는 객체에 Binding을 해야 할경우, ViewModel에서 View에 있는 객체를 직접 Access해야 하므로, View와 ViewModel의 독립성이 떨어지게 됩니다. 이번시간에는 이러한 상황에서 MarkupExtension을 이용해 View에서 ViewModel의 독립성을 유지한체 ViewModel에서 View를 Binding할 수 있도록 하는 ReverseBinding을 구현 하는 방법에 대해 소개합니다.

Create DemoView(Default Data Binding)

ReverseBinding를 구현하기에 앞서 ReverseBinding을 테스트 하기 위한 상황을 만들기 위해 위와 같이 두개의 RadioButton이 있는 간단한 DemoView를 구현했습니다. 그리고 RadioButton에 ViewModel에 정의된 IsMale속성을 Binding하고, 텍스트 박스에도 IsMale 속성을 Binding합니다. 아래는 DemoView에 해당하는 소스코드입니다.


대충 눈으로 살펴봤을때는 특별하게 문제가 없는 코드 같지만, 실제로 동작을 시켜보면 동영상과 같이 DataBinding이 정상적으로 동작하지 않는것을 확인 하실 수 있습니다.
 
이유는 RadioButton의 특성상 IsChecked 속성이 변경될때 같은 Group내에 포함된 다른 RadioButton들의 IsChecked속성이 영향을 받게되는데, 이 과정에서 Binding되어있던 IsChecked속성에 다른 값이 덮여 씌워지면서  Binding이 해제되어 버리기 때문입니다.
 
이를 해결하기 위한 RadioButton에 Binding을 하지 않고, 아래와 같이 IsMale속성에 RadioButton의 IsChecked속성을 Binding하는 방법을 사용 할 수 있습니다.
하지만 위에서 언급 했듯이 ViewModel에서 View 객체를 멤버를 직접 제어하는 방법은 독립성이 떨어지기 때문에 View와 ViewModel에 종속받지 않고 위와 같은 동작을 수행하는 ReverseBinding을 직접 구현해서 사용 할 수 있습니다.

Create ReverseBinding Extension

아래는 ReverseBinding을 구현한 소스코드의 일부분으로, 요약하면 Binding객체를 파라미터로 받는 MarkupExtension을 생성하고, ProvideValueTarget을 이용해 Source Object와 Source Property를 가져온 뒤, DataContext의 Target Property에 Binding을 수행하는 과정을 나타냅니다.
위와 같이 구현된 ReverseBinding을 이용해 실제 XAML에서 사용할 때에는 아래와 같이 사용할 수 있습니다.


실행시켜보면 아래 동영상과 같이 Binding이 정상적으로 동작하는것을 확인 하실 수 있습니다.


아래는 이번시간에 사용된 전체소스코드입니다. 혹시 글을 읽으시고 이해가 안되시는 부분이나, 기타 문의사항은 댓글이나 이메일로 남겨주시면 답변드리도록 하겠습니다.

신고

Introduction

.Net Framework를 이용해 COM객체를 사용하다보면, Object 형식으로 객체가 리턴되는 경우가 있는데 이 객체를 활용하기 위해서는 적절한 Type으로 캐스팅이 필요한 상황이 됩니다. 다행히 Object객체가 어떤 Type의 객체인지 알고 있는 상황이라면 간단하게 캐스팅문법을 이용해 캐스팅 해서 사용할 수 있지만, Type을 모르고 있다면 문제가 발생합니다.

일반적인 .Net Framework환경에서 였다면 간단히 GetType메서드를 통해 해당 객체의 Type을 확인 할 수 있지만, COM 객체의 경우 GetType메서드를 호출하게 되면 System.__ComObject 를 리턴하기 때문에 확인 할 수가 없습니다.

Microsoft KB문서(http://support.microsoft.com/kb/320523)에 보면 as 연산자를 이용해 하나씩 캐스팅을 할수 있다고 하지만, 이렇게 할경우 Type이 많아질 수록 더 많은 체크 루틴을 작성해야 하기 때문에 적합한 방법은 아닌것 같습니다.

이번시간에 소개할 내용은 이러한 상황에서 COM객체의 Type을 확인 할 수 있는 방법에대해 소개합니다.

GetTypeFromComObject Method

COM 객체의 Type을 가져오기 위해서 몇 가지 COM객체의 특성을 이용합니다. 첫째로 COM객체는 GetType메서드를 호출하면 System.__ComObject타입을 리턴한다는 점과, 둘째로 COM Interop Type은 Interface이고, 고유의 GUID를 갖는다는 점을 이용합니다. 소스코드에 대한 설명은 주석으로 대체합니다.



위 코드에서는 Type을 확인 하기 위한 객체와, 해당 COM객체의 Interop Assembly를 입력해 Assembly에 정의된 Type들 중 QueryInterface가 가능한 객체를 검색하는 과정을 수행합니다.
 
 

신고

Introduction

Windows용 소프트웨어를 개발하다보면 사용자 로그를 기록하거나, 특별한 권한이 필요한 기능을 수행하려고 할때, 현재 사용자의 권한을 알아야 하는 상황이 있습니다. 이번시간에 소개할 내용은 .Net Framework를 이용해 사용자 권한의 가져오는 방법에 대해 설명합니다.



 

 

신고