WPF 팁

Canvas 의 Preview 기능 구현하기 깊은물 평점: 없음 조회: 4203
첨부파일

 

안녕하세요. ToyWater 라고 합니다. ^^


 

훈스닷넷 가입 후 첫 팁 이네요. ㅎㅎ


 

지난주(2012.07.07) WPF 토요일에 UX 스터디를 시작했는데,

반 강제(?)로 게시판에 팁 하나씩 올려야 한다고 해서 올립니다.


 

물론, 상품으로 오는 키보드를 노리는건 ........

맞구요.~~~ 


 


 


 

~~ 그럼 제 팁 하나 나갑니다.


 

이건 아주 간단하면서도 유용하게 쓰실 수 있는 건데요


 

아래 그림은 제가 요즘에 회사에서 진행하고 있는 프로젝트 중에 하나인데요.

우선 그림을 보시죠.


 





 

이 화면에서 1번 영역은 Canvas로 되어 있고 여러가지 그림(?)들이 그려져 있습니다.

자세히 보시면 2번과 3번 영역에 1 Canvas의 그림이 똑같이 나오고 있는 게 보이실 겁니다.


 

만약 1 Canvas에 있는 그림(또는 객체)을 움직이면 실시간으로 2,3번 그림이 바뀌게 되죠.

여기서 3번 영역을 PreviewBox, 2번은 이걸 더 발전시켜서 만든 ZoomPreviewBox라고 하겠습니다.


 

이번 팁에서는 3번만 보여드리고 나중에 시간 될 때 ZoomPreviewBox도 올리겠습니다.


 

ZoomPreviewBox를 간단하게 말씀 드리면 해당 Canvas를 줌인/아웃과 동시에 화면 이동을 지원합니다.


 


 

먼저 아래는 첨부된 예제의 실행 화면 입니다.


 




 

왼쪽은 PreviewBox이고 오른쪽은 실제 작업하는 Canvas 이며, 가운데 오렌지박스는 Thumb입니다.


 

오른쪽의 Thumb 를 마우스로 움직이면 왼쪽의 PreviewBox도 실시간으로 변경되는 것을 확인할 수 있습니다.


 

아래는 이 프로그램의 XAML 전체 코드 입니다.


 



<Window x:Class="PreviewBoxTest.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Title="MainWindow" Height="472" Width="664">

    <Grid>

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="220"/>

            <ColumnDefinition/>

        </Grid.ColumnDefinitions>

       

        <Canvas Grid.Column="1"

                Name="DrawingCanvas"

                Background="Black"

                ClipToBounds="True">

            <Thumb Width="40" Height="40"

                   Name="MouseThumb"

                   Background="Orange"

                   DragDelta="Thumb_DragDelta"

                   Canvas.Left="0"

                   Canvas.Top="0"/>

        </Canvas>

       

        <Canvas ClipToBounds="True"

                Width="200"

                Height="150">

            <Canvas.Background>

                <VisualBrush Visual="{Binding ElementName=DrawingCanvas}"

                             Stretch="Uniform"/>

            </Canvas.Background>

        </Canvas>

    </Grid>

</Window>


 



위 코드에서 첫 번째 Canvas가 오른쪽, 두 번째 Canvas  PreviewBox입니다.

두 번째 Canvas를 보시면 Background VisualBrush를 썼습니다.

이 안에 Visual 프로퍼티에 첫 번째 Canvas 를 바인딩 해준 것을 볼 수 있습니다.

 

자~~ 그럼 이제 뭘 해야 하느냐.......



없어요.~~ 이게 끝이에요 ㅡㅡ;;;;



좀 허무하죠? ㅋ




그럼 다음에는 위에서도 언급했듯이 PreviewZoomBox 기능 구현에 대해서 팁을 쓰겠습니다.
좋은 시간 되세요 ~!

태그 : Canvas Preview
작성자 정보
깊은물
Level 13
 [EXP.7/40]

메일:  비공개
글등록 +12 192 덧글등록 +3 22
자기소개
휘청거리는 WPF Dog_Foot_자
글 공유하기 |
  tweet facebook
2012-07-13 오전 10:20:44
나도한마디
사용자
대략난감            [2012-09-18]
Level 11
 [EXP.11/40]
ZoomPreviewBox 에 대한 것도 올려주시면 안될까요???
태그로 엮인글
[WPF Q&A] Canvas 재사용에 관련하여 문의드립니다.[2]  자바송장
[WPF Q&A] Thread 진행중인 Dispatcher.invoke Kill또는 해결방법[1] 파일첨부 자바송장
[C#.NET Q&A] PrintPreViewDialog 위치  행숨
[WPF Q&A] 사각형을 여러개를 그릴려고하는데 한개만 그려져요[2]  lists24
[C#.NET Q&A] C# wpf에서 음성 재생 및 canvas 리드로잉 간 문제로 질문드립니다.   klslime
[WPF Q&A] Canvas위에서 마우스포인터 유지하는 방법..[1]  개발력이부조카다
[정보공유] Windows Server 2016 Technical Preview 3  컴포지트
[실버라이트 Q&A] 똑같은 소스 이지만 나오는 화면이 달라요 ㅠㅠ  에리나스
[WPF Q&A] scrollview의 scroll의 위치에 대해서[1]  3광8광
[WPF Q&A] [WPF] 캔버스 화면을 줌프리뷰 형식으로 만들고 싶은데..[1]  3광8광
글리스트
Form Designer 프로젝트 #4 - TreeView + XML [1]  안떠니
Form Designer 프로젝트 #3 - TreeView 삭제 / 이름변경[2]+2  안떠니
Form Designer 프로젝트 #2 - TreeView 노드 추가[1]  안떠니
Form Designer 프로젝트 #1 - 프로젝트 관리 화면[4]+1  안떠니
실행파일에서 config 파일 변경하기[1]+3  킴언어
계산기[3]  sa2랑
WPF 성능관리  sa2랑
[RE] WPF Performance Suite  sa2랑
WPF에서 내부에서 작업한 내용을 UI에 올릴때 Dispatcher 클래스 사용[1]  지유니
VS와 Blend에서 화면구조 보기 파일첨부 깜디
 ★현재글->   Canvas 의 Preview 기능 구현하기[1] 파일첨부 깊은물
[Command] 하나의 컨트롤에 여러 커맨드를 등록하는 법[1]  깜디
[UX 스터디 자료] WPF 자료[5] 파일첨부 sky
DataView를 이용해서 소팅하는 방법  지유니
ListView를 이용해서 그룹핑, 소팅하는 법  지유니
WPF에서 Ellipse 그리기[3]+2  재선
애니메이션 진행 중 마우스의 반응이 안좋습니다.[1]  칼맨
[RE] 애니메이션 진행 중 마우스의 반응이 안좋습니다.[2]+5  Linus
ComboBox에 item 뻘짓하면서 넣기~ 파일첨부 치사대마왕
글자 크기에 맞춰 Control의 크기를 늘리는 방법[2]+1  칼맨
MVVM패턴으로 Navigation을... 파일첨부 강이리