Introduction

WPF의 경우 이미지나 드로잉객체를 바둑판형식으로 출력하기 위한 TileBrush를 제공하고있지만 Silverlight에서는 TileMode를 지원하고 있지 않아 Shader를 이용하거나 여러개의 객체를 생성하여 바둑판형식의 출력을 구현해 사용했습니다. 하지만 Windows Phone7과 같이 Shader등을 사용할 수 없는 제약 적인 환경에서는 다른 방법으로 구현해야 합니다.

여러개의 객체를 바둑판식으로 배열하는 방법에 대해 생각해 볼 수 있겠지만, 이는(동적으로 생성했다 할지라도) 렌더링에 필요한 모든 과정(레이아웃,렌더링 등)의 연산이 매번 필요하기 퍼포먼스나 관리 측면에서 효율적이라 하긴 어렵습니다. 이번시간에는 이와같은 환경에서 동적으로 Tile Image를 생성하여 바둑판식 출력을 구현하는 방법에 대해 소개합니다. 아래는 이번시간에 구현하게될 결과물이며 WindowsPhone7에서 동일한 코드로 사용이 가능합니다.

Create Tile Image Generator

먼저 Tile Image를 생성할때 필요한 요소들에 대해 정리해보면 아래와 같습니다.

1. Source Image : Tile Image를 생성할때 사용할 소스 이미지 입니다.
2. Tile Size(Width, Height) : Tile Image를 생성할때 Tile 하나의 크기 입니다.
3. Margin XY : Tile 간의 간격을 지정합니다.
4. Result Size : 최종적으로 생성될 Tile Image의 크기입니다.

위와 같은 내용을 파라미터로 받아 타일이미지를 생성하는 메서드를 구현하면 아래와 같이 구현할 수 있습니다.

Create Tile Panel

위에서 Tile Image를 생성했으면 이제 입력받은 데이터들을 이용해 UI에 출력할 수 있는 TIle Panel을 아래와 같이 구현할 수 있습니다. 각 Property들은 값이 변경되었을때 OnPropertyChanged를 호출하게 되며 이때 UpdateTile을 호출하여 TileImage를 생성하게 됩니다.


이상으로 이번시간 포스팅을 마치며 기타 궁금하신점이나 문의 사항은 메일이나 댓글로 남겨주시면 답변드리도록 하겠습니다. 아래는 이번시간에 사용한 전체 소스코드입니다. 감사합니다.

신고

Codinator 1.0 Promotion

Codinator 2011.03.02 10:38 |
코디네이터 블렌드버전 1.0의 캡쳐 영상입니다.

신고

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


신고

Codinator는 Visual Studio 2010 에서 Plug-In방식으로 동작합니다. (Expression Blend도 지원 예정)
Codinator는 사용자(개발자)가 개발중인 Application에 UI Theme를 적용할 수 있도록 도와주고,
수정및 관리를 할 수 있는 기능을 가지고 있습니다.
여기서 중요한 점은 사용자가 사용하던 기존의 환경에 Codinator가 자연스럽게 녹아들어야 한다는 것입니다.
그렇기 때문에 여러번의 시행착오를 겪었고 다음과 같은 UI가 탄생하게 되었습니다.


그럼 Codinator Beta의  UI를 자세하게 소개해 드리겠습니다.

1. 테마선택/적용
- 마음에 드는 테마를 선택하면 개발중인 Application에 실시간으로 적용됩니다.




2. 리소스 에디터 (테마의 컬러 수정)
- 컬러휠을 사용하여 빠르게 전체 분위기를 바꿔볼 수도 있고 상세한 컬러 변경도 할 수 있습니다.
   (이는 코디네이터의 테마의 각 리소스가 연관관계를 이루어 구성되어 있기 때문에 가능합니다.)




3. 스타일 선택
- 테마에 따라 다르지만 같은 기능의 컨트롤이라도 서로 다른 스타일을 가진 경우가 있는데 원하는 스타일로 선택할 수 있습니다.




4. 컬러 피커
신고

UI 개발 프로세스에 혁신을 가져올 저희 제품명칭이 Codinator로 확정되었습니다.
Codinator의 로고는 효과적인 UI개발의 무한한 가능성을 의미합니다.





현재 코디네이터의 베타버전을 완성하기 위해 작업중이며 조만간 Closed Beta 서비스를 진행할 예정입니다.
코디네이터가 무엇인지 한눈에 알아 볼 수 있는 안내 영상을 첨부합니다. 많은 관심 부탁드립니다. :D



신고