[WPF] VisualBrush 사용해서 미리보기 만들기

사진

좌측이 ScrollViewer 안에 Grid를 넣은 것이고 우측은 Canvas이다.

 

간단하게 포토샵의 네비게이터 비슷한 걸 만들어봤다.

하지만 지식의 한계로 포토샵처럼 빨간박스를 움직이게 하진 못했다.

 

원래 VisualBrush만 쓰려했는데 그럼 코드 한 줄 밖에 안되기 때문에 이렇게 만들어봤다.

 

---

자세한 코드는 맨 아래 첨부

 

 

 

좌측 스크롤 뷰어 안에 Grid를 넣고 Grid안에 이것 저것 넣었다.

 

우측 Canvas에 Background로 VisualBrush의 Visual을 바인딩 해주면 Grid의 모습이 그대로 Canvas의 배경이 된다.

 

참고로 Visual 속성을 바인딩할 때 같은 컨테이너에 속하거나 간접적인 관계가 있으면 Visual을 불러오지 못한다.

 

 

---

 

 

이제 Canvas에 빨간색 사각형을 만들어 주자

 

 

 

 

Canvas의 풀소스이다.

 

빨간 박스를 그릴려면 ScrollViewer에서 Grid가 얼마나 표시가 되는질 알아야하는데

다음 속성을 참고하면 된다.

 

 

ScrollViewer의

ActualWidth : 렌더링된 실제 너비

ActualHeight : 렌더링된 실제 높이

 

ViewportWidth : 스크롤 바 길이를 제외한 너비

ViewportHeight :  스크롤 바 길이를 제외한 높이

 

ExtentWidth : 내부의 총 너비

ExtentHeight : 내부의 총 높이

 

Horizontal(Content)Offset : 좌우 이동량

Vertical(Content)Offset : 상하 이동량

현재 예제 처럼 미리보기는 원래 폼과 같은 너비와 높이일리는 없으므로 비율로 줄여야한다.

 

Canvas의 Background는 알아서 줄어들지만 빨간 박스는 그렇지 않기 때문에 갲발자가 직접 줄여야한다.

 

 

위 그림을 보면 VisualBrush가 원래 크기의 1/2 이라면 40도 1/2로 줄어 20이 되어야한다.

 

그럼 구하고자 하는 빨간 박스는 VisualBrush의 20이며, 40/100 * 50을 계산하면된다.

 

 

난 왠만하면 Xaml로 할 수 있으면 Xaml 코드로 해결하려는 경향이 있기 때문에 Converter를 이용했다.

 

그리고 여러 값을 받아와야하기 때문에 MultiBinding 을 사용하였다.

 

컨버터

 

아 힘딸리네

 

첨부파일

---

VisualBackground_.zip

1.66MB