Introduction

ERP 관련 Application을 제작할때 자주 사용되는 컨트롤 중의 하나가 ListView입니다. 많은 양의 데이터를 손쉽게 출력하기에는 용이하지만 컨트롤 자체적으로 데이터의 정렬이나 필터링등의 기능을 제공하고 있지 않기 때문에 이부분을 직접 구현하거나 상용 컴포넌트를 구입해서 사용해야 합니다. 이번시간에는 ListView의 Column을 클릭해 데이터를 정렬하거나 필터링 하는 방법에 대해 소개합니다. 아래는 이번시간에 구현하게 될 내용의 데모 동영상입니다.

이번 예제의 경우 한번의 포스팅에서 다루기 힘든 양의 소스코드이기 때문에 이번시간에는 기본적인 부분만 설명하고 나머지 부분은 추후 다시 포스팅을 하거나 소스코드를 보시고 이해가 안되신다고 하시는 부분을 위주로 먼저 설명 드리겠습니다.

ListView Sorting

ListView의 데이터를 정렬하기 위해서는 CollectionView의 SortDescriptions을 이용합니다. ListBox나 ListView와 같이 ItemsPresenter를 사용하는 컨트롤의 경우 화면에 출력될때 CollectionView를 이용해 출력될 데이터를 구성하는데 이때 SortDescription을 지정해주면 간단하게 데이터를 정렬 할 수 있습니다. 아래는 정렬 기준 속성이름과 정렬방향 그리고 ItemsSource를 통해 화면에 출력될 데이터를 정렬하는 방법입니다.

ListView Filtering

데이터 필터링도 마찬가지로 CollectionView를 이용해 간단히 구현 할 수 있습니다. CollectionView에는 Predicate<object>형식의 대리자를 통해 해당 요소가 화면에 출력될 때 필터링 되야 하는지 여부를 결정하는데 하나의 Predicate<object>에서 여러개의 필터링 규칙을 지정하는 것은 효율적이지 않기 때문에 아래와 같은 PredicateList<T>를 생성해 여러 상황의 Filtering 기준을 지정 할 수 있습니다.


아래는 이번시간에 사용된 전체 소스코드입니다.

※ 이번 시간 이후로 등록되는 포스팅의 소스코드를 열기 위해서는 VisualStudio2010버전이 필요합니다.

신고

코디네이터 베타로 구현한 WPF, Silverlight UI Theme 디자인.
모든 기본 UI 콘트롤에 적용 가능합니다.


신고

Introduction

C# 에서의 이벤트는 해당 이벤트가 선언된 클래스에서만 호출할 수 있는 특수한 종류의 Multicast Delegate의 형태로서, 아래와 같이 이벤트가 정의된 클래스를 상속 받아 구현 했다 하더라도 이벤트를 직접 호출할 수 는 없습니다.


이를 해결하기 위한 일반적인 방법으로 아래와 같이 부모객체에 해당 이벤트를 호출 할 수 있는 메서드를 미리 정의 함으로서 이벤트를 호출 하는 방법을 사용합니다.


그런데 만약 부모의 소스코드에 접근 할 수 없는 상황(예: 라이브러리에서 제공하는 객체를 상속받아 구현하는 경우)이거나 외부객체의 이벤트를 강제로 호출하고자 할 경우에 여러가지 문제가 발생할 수 있습니다. 이번시간에는 외부 혹은 내부에 정의된 이벤트에 접근하고 해당 이벤트를 직접 호출하는 방법에 대해 소개합니다.

Create RaiseEventHelper

외부에서 정의된 이벤트를 호출하기전에 먼저 개발자가 이벤트를 정의 했을때 내부적으로 어떠한 변화가 있는지를 확인 해볼 필요가 있습니다. 먼저 아래와 같이 간단한 이벤트가 정의된 코드를 빌드한 후 Windows SDK에서 제공하는 IL DASM을 이용해 작성한 코드가 어떻게 변화 했는지 확인 해 보겠습니다.

왼쪽은 이벤트를 정의 하기 전의 어셈블리이며. 오른쪽이 위 코드를 빌드한 어셈블리입니다. 단순히 이벤트한줄만 추가했을 뿐인데 내부적으로 여러개의 멤버들이 추가로 생성된것을 확인 할 수있습니다.

추가된 항목중에 관심있게 살펴봐야 하는 것은 DummyEvent 필드로, 코드에서 정의한 이벤트와 같은 Delegate를 사용하고 이름까지 동일하는 것으로 보아 이벤트를 구독하거나 해지 할때 DummyEvent필드를 이용한다는것을 알 수 있습니다. 이제 이벤트가 생성되었을때 내부적으로 관리되는 Delegate가 어떻게 생성되는지 알았으므로 Reflection을 이용해 외부에서도 얼마든지 이벤트를 호출 할 수 있습니다.


간단히 코드를 설명하면 Target 객체에 EventName에 해당하는 Delegate를 검색하고 이를 구독하는 여러 메서드들을 직접 호출해주는것으로 이벤트를 호출하는것과 동일한 효과를 낼 수 있습니다. 그리고 실제 사용할 때에는 아래와 같이 사용할 수 있습니다.


이상으로 이번 포스팅을 마치며 기타 궁금하신점이나 다른 문의사항은 메일이나 댓글로 남겨주시면 답변드리도록 하겠습니다. 감사합니다.
 

신고

안녕하세요? 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메서드를 재정의 하여 각 요소의 위치를 바로잡는 과정을 수행합니다.

이외에 몇가지 추가기능(마우스 제어 등)을 구현이 필요하지만 포스팅에 올리기에는 많은양의 소스코드라 나머지 부분에 대해서는 첨부파일을 확인 해주시기 바랍니다. 아래는 이번시간에 사용된 전체 소스코드 입니다. 기타 궁금하신점이나 문의사항은 이메일이나 댓글로 올려주시면 답변드리도록 하겠습니다.


신고