Introduction

일반적으로 Image Viewer 등과 같이 화면에 출력해야할 내용이 화면크기보다 클 경우 ScrollViewer를 이용해 내용을 스크롤할 수 있도록 구현을 하는데요, 이번시간에는 화면을 스크롤하기 위해서 스크롤바를 조작하지 않고 간단한 마우스조작으로 컨텐츠를 직접 드래그하는 방식으로 View를 조절하고 확대 축소할 수 있는 기능을 구현해보았습니다. 아래는 이번시간에 구현한 결과물 영상입니다.

Create ZoomAndPanning Behavior

Zoom 또는 Panning의 경우 자주 사용될 수 있는 기능이기 때문에 재사용을 용이하게 하기 위해서 Behavior의 형태로 작성했습니다. ZoomAndPanning Behavior의 기본적인 구성은 와래와 같습니다.

ScrollViewer의 기본적인 마우스 이벤트와 ScrollChanged이벤트를 수신하고 각 이벤트마다 적적할 처리를 진행 해줬습니다. 그리고 추가적으로 최대 확대배율이나 최소 확대배율, Zoom And Panning 단축키등을 통해 다양한 조작환경을 제공 할 수 있도록 구현됬습니다.

소스코드자체가 어려운 내용들은 아니기 때문에 이번시간에는 별도의 코드 설명은 생략하겠습니다. 아래는 이번시간에 사용한 전체소스코드 파일이며 VisualStudio 2010에서 작업되었습니다. 기타 질문이나 문의사항은 이메일이나 댓글남겨주시면 답변드리겠습니다. 감사합니다.

WIT.WPF.Sample.ZoomAndPanningBehaviorExample.zip

신고

Introduction

ListBox나 Listview와 같이 목록형으로 데이터를 출력하는 컨트롤에서 많은 양의 데이터를 출력할경우, 스크롤 바를 조작할때 스크롤 속도가 매우 느려지는 현상을 발생합니다. 속도가 느려지는 가장큰 원인은 스크롤하는 도중에 매번 화면에 출력될 View가 업데이트되면서 퍼포먼스에 영향을 주게 되는것인데, 이를 해결하기 위한 간단한 방법으로 ScrollViewer의 IsDeferredScrollingEnabled 속성을 이용해 스크롤이 모두 끝났을때 View를 갱신하는 방법이 있습니다.

하지만 IsDeferredScrollingEnabled을 사용 할 경우 스크롤 동작이 완료될때까지 뷰가 갱신되지 않기때문에 디테일한 탐색이 불가능하기 때문에 오히려 더 불편한 상황이 발생 할 수도 있습니다. 이번시간에는 IsDeferredScrollingEnabled를 사용하여 스크롤할 때 View 전체가 갱신되지는 않지만 Thumb가 위치 한 데이터를 미리보기 형태로 제공함으로서 효과적인 탐색이 가능하도록 하는 방법에 대해 소개합니다. 아래는 이번시간에 구현할 결과물 영상입니다.

Create Scrolling Preview Helper

위 동영상과 같은 내용을 구현하기 위해 가장 먼저 확인 해 봐야 할 것이 DefferedScrolling을 이용했을 때 ScrollBar의 변경상태를 확인하는 방법입니다. ScrollViewer에서 기본적으로 제공되는 ScrollChanged는 DefferedScrolling을 이용할 경우 마지막에만 이벤트가 호출되기 때문에 정확한 위치를 계산할 수 없습니다.

WPF에서는 DefferedScrolling을 제어할 수 있도록 ScrollBar에 DeferScrollToVerticalOffsetCommand를 제공하고 있습니다. 이 Command는 ScrollViewer가 DefferedScrolling를 사용해 스크롤을 조작할 때 호출되는 Command로 CommandParameter를 통해 현재 Thumb의 위치를 가져올 수 있습니다.

ScrollViewer를 사용하는 Selector 컨트롤에서 미리보기가 가능하도록 하기 위해서 아래와 같이 Attached Dependency Property를 정의하고 ScrollViewer에 CommandBinding을 추가해줍니다.

속성값을 DataTemplate으로 받는 이유는 사용자가 임의로 미리보기로 출력될 데이터의 모양을 수정할 수 있도록 하기 위해서입니다. 그리고 아래와 같이 Command가 발생했을때의 처리를 해줍니다.


마지막으로 Thumb의 위치를 통해 계산된 Item Index에 해당하는 아이템을 Thumb옆에 Popup으로 출력하면 완성 할 수 있습니다.


아래는 이번시간에 구현한 전체 소스코드이며 궁금하신점이나 문의사항은 이메일이나 댓글로 남겨주시면 답변드리도록 하겠습니다. 아래소스코드는 VisualStudio2010버전에서 제작되었습니다.

신고

호응에 힘입어 벌써 4번째 세미나를 개최하게 되었습니다.
UI 디자인을 쉽고 효율적으로 할 수 있는 방법을 알려드릴 예정이오니 많은 참석 부탁드립니다.

일시 : 2011년 8월 17일 (수) 19시 00분 ~ 21시 00분
장소 : 강남 토즈2호점


코디네이터 (쉽고 빠른 UI 디자인 툴)

http://codinator.co.kr

코디네이터는 고품질의 UI 디자인을 아주 쉽고 빠르게 제작할 수 있는 디자인솔루션입니다.
개발자, 디자이너 누구나 몇번의 클릭만으로 나만의 UI 디자인과 테마를 아주 높은 퀄리티로
제작할 수 있는 방법이 바로 여기에 있습니다.
(최근 1.1로 버전 업데이트가 되면서 퍼포먼스가 향상되었습니다.)

 ※ 제품의 버전이 1.1로 업데이트 되면서 '무료'로 결정되었습니다.
세미나 당일날 크로스플랫폼 버전과 관련한 '무료'정책의 배경을 설명해 드립니다. 

 1. 누가 들으면 좋은가?
- 홀로 앱을 개발하는 개발자
- 윈도우즈폰 앱을 남과 다른 느낌으로 디자인하고 싶은 디자이너
- UI 디자인을 효율적인 방법으로 제작하고 싶은 개발자와 디자이너

 2. 코디네이터는 무엇이 좋은가?
 - 마우스 클릭 몇번으로 UI 디자인이 완성됩니다.
- 포토샵 수준의 수준 높은 디자인을 쉽게 제작할 수 있습니다.
- 다양한 색감의 테마를 쉽게 만들 수 있습니다.

 3. 코디네이터만의 특장점
- 자신만의 디자인 프리셋을 저장하고 언제든지 재사용할 수 있습니다.
- 컬러휠 기능으로 전체적인 분위기를 빠르게 변환할 수 있습니다.
- 데스크탑, 모바일, 웹 개발환경에 동일한 디자인을 적용하고 교환할 수
   있기 때문에 N스크린 개발환경에 적합합니다.

Codinator 소개 동영상 : http://www.youtube.com/watch?v=hpy2yhDJksU





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

안녕하세요 김대욱입니다! 그동안 wit studio에서 준비해왔던 Codinator의 첫 정식 버전이 이번 주를 기준으로 정식 릴리즈가 되었습니다. 지난 12월 실시되었던 베타테스트 서비스를 끝으로 약 5개월간의 피드백 반영 기간을 거쳐 출시된 이번 정식버전에서는 보다 쉽고 빠르게 UI디자인을 할 수 있도록 다양한 기능들이 추가되었습니다.

Codinator의 간단한 소개를 드리자면 수준 높은 GUI Design을 쉽고 빠르게 제작할 수 있는 GUI 디자인 툴(컴포넌트)로서 간단한 마우스 조작만으로 다양한 형태의 Application을 디자인 하고 구현 할 수 있는 제품입니다. 현재 Codinator는 Microsoft의 Expression Blend에 Add-in으로 동작하고 있으며 WPF, Silverlight 그리고 WindowsPhone7의 개발환경을 지원하고 있습니다.


※ 정식 버전 Codinator는 Codinator 홈페이지(http://codinator.net/)에서 무료로 다운로드 받아 사용해보실 수 있습니다.


이제막 출시된것이다 보니 제품의 장점들을 검증하기 위해 여러 레퍼런스 케이스가 필요한 상황인데요. 기회가 된다면 저희 제품이 적용될 수 있는 곳에 테스트(or 프로젝트)를 진행해보고자 하는데 주변에 새로운 GUI의 필요성을 느끼고 있는 곳이나 관련 기술을 사용하는 곳이 있다면 소개좀 부탁드리겠습니다. :D


오랜 시간동안 개발한 저희 wit studio의 첫 제품이라 애정이 깊고 긴장되는데요, 아무쪼록 많은 관심 가져 주시고 도와주시면 감사드리겠습니다. 코디네이터에 대한 자세한 설명과 활용방법은 조만간 다시 포스팅하도록 하겠습니다 감사합니다.

신고

기나긴 베타 기간을 마치고 여러 피드백을 수렴한 결과 드디어 정식 버전을 내놓게 되었습니다.
조만간 트라이얼 버전을 배포할 예정이며, 이미 코디네이터를 활용한 사업제휴가 2건이나! 들어갔습니다.

트라이얼 버전 배포가 시작되는대로 코디네이터에 대해 더 자세한 안내를 해드릴 예정인데요,
한글 텍스트 버전 영상으로 먼저 소개해드립니다.




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