안녕하세요. 찰스페졸드 아저씨의 블로그에 놀러갔다가 재미있는 내용의 포스팅을 보고 여러분께 소개해 드리고자 글을 씁니다. 페졸드 아저씨가 작성한 원문은 http://www.charlespetzold.com/blog/2008/08/Curved-ScrollBars.html 에서 확인 해 보실 수 있습니다.

이번시간에는 아래 그림과 같이 구부러진 스크롤바를 구현 해보겠습니다.

위 예제는 기존의 2차원 객체인 Scroll Bar를 3차원 객체에 매핑시켜 구현한 것으로, 이전에 한번 소개 해 드렸었던  Viewport2DVisual3D를 사용합니다. Viewport2DVisual3D자체가 중요한 것이 아니라 응용 가능성에 대해서 언급하는 예 이므로 Viewport2DVisual3D에 대한 자세한 설명은 생략하도록 하겠습니다. (다음 URL에서 Viewport2DVisual3D에 대한 내용을 참고 하실 수 있습니다. (http://msdn.microsoft.com/ko-kr/library/system.windows.media.media3d.viewport2dvisual3d.aspx)

먼저 위와 같은 구부러진 스크롤바를 구현하기 위해서는 다음과 같은 과정을 거치게 됩니다.

1. 객체를 표현하기 위한 ViewPort생성
2. ScrollBar를 3차원으로 표현하기 위하여 Viewport2DVisual3D를 생성하고 ScrollBar를 추가.
3. Viewport2DVisual3D의 Geometry를 원하는 모양으로 설정
4. Viewport2DVisual3D.Material에 Viewport2DVisual3D.IsVisualHostMaterial="True" 로 설정.
5. 빛, 카메라 세팅

아래는 소스코드입니다.  

엄청난 양의 MeshGeometry 데이터에 살짝 겁을 먹을 수도있지만, Mesh 정보를 제외하고 본다면 그렇게 어려운 계념은 없어 보입니다. 종종 받는 질문중에 WPF 3D에서 직접 Mesh데이터를 손으로 계산해서 써야고 하는지 질문 하시는 분들이 계시는데, 간단한 박스정도야 가능하지만.. 위 예제와 조금 복잡한 도형을 그리려고 한다면 아무래도 XAML Export 가 가능한 Tool을 활용하시는 것을 추천합니다.

Xaml Exprot에 대한 Tool은 김영욱 차장님의 블로그(http://winkey.tistory.com/120)에 소개되어 있으니 참고 하시기 바랍니다.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.