티스토리 뷰
이번강좌부터는 강좌를 보시는 분들에게는 갑자기 존대말을 쓰다가 반말어조로 강좌로 진행되는 것에 놀라지 말기를 바란며. 그것은 어디까지나 필자의 지면상의 이유와 강좌를 진행하는데 있어 유연하게 강좌를 진행하기 위함이니 이해해 주기를 바립니다.
지금까지 닷넷 프레임워크 3.0에서 지원하는 XAML형태로 윈도우 컨트롤을 만들어보는 형태로 강좌가 진행되었다.NET 3.0에서 새로 추가된 컨트롤도 있지만 기존에 있던 컨트롤중에서 자주 쓰는 컨트롤을 비하인드 코드가 아닌 XML형태의 전혀 새로운 형태의 다지인 형태였다 CS형태가 아닌 웹프로젝트를 진행했던 분들이라면 아마도 익숙한 형태의 프로그램 방식이라 하지 않을 수 없다. .앞으로 다룰 주제는 2D, 3D, 그래픽, 동영상, 애니메이션등의 멀티미디어적인 WPF가 추구하는 다이나믹한 형태의 프로그램을 지향하기 위한 가장 기초가 되는 도형부터 시작할까 한다.
그럼 이번강좌에서는 그 첫번째인 원과 타원에 대해 알아보겠다.
WPF에서 프로그램 가능한 작업의 단위는 Element 우리말로 직역하자면 원소, 요소라고 할수 있다 선, 도형, 점...
MSDN에서 Element를 좀더 알아보기 위해서 클래스의 상속 구조를 알아야 할 필요가 있다.
System.Object
System.Windows.Threading.DispatcherObject
System.Windows.DependencyObject
System.Windows.Media.Visual
System.Windows.UIElement
System.Windows.FrameworkElement
그리고 이 UIElement클래스를 상속받은 FrameworkElement이라는 클래스가있고 다시 이를 상속받은 클래스들은 다양하게 있는데 역시 아래를 참고하기 바란다
Microsoft.Windows.Themes.BulletChrome
Microsoft.Windows.Themes.ScrollChrome
System.Windows.Controls.AccessText
System.Windows.Controls.AdornedElementPlaceholder
System.Windows.Controls.ContentPresenter
System.Windows.Controls.Control
System.Windows.Controls.Decorator
System.Windows.Controls.Image
System.Windows.Controls.InkCanvas
System.Windows.Controls.ItemsPresenter
System.Windows.Controls.MediaElement
System.Windows.Controls.Page
System.Windows.Controls.Panel
System.Windows.Controls.Primitives.DocumentPageView
System.Windows.Controls.Primitives.GridViewRowPresenterBase
System.Windows.Controls.Primitives.Popup
System.Windows.Controls.Primitives.TickBar
System.Windows.Controls.Primitives.Track
System.Windows.Controls.TextBlock
System.Windows.Controls.ToolBarTray
System.Windows.Controls.Viewport3D
System.Windows.Documents.Adorner
System.Windows.Documents.AdornerLayer
System.Windows.Documents.DocumentReference
System.Windows.Documents.FixedPage
System.Windows.Documents.Glyphs
System.Windows.Documents.PageContent
System.Windows.Interop.HwndHost
System.Windows.Shapes.Shape
여기서 주의 깊게 봐야 하는 두개의 클래스가 있다.
System.Windows.Controls.Control
System.Windows.Shapes.Shape
즉 UI관련 컨트롤과 도형과 관련된 Shape이 UIElement 클래스를 상속받고 있다
따라서 거의 모양을 가진 모든 비주얼한 클래스들은 UIElement 를 상속받고 있다고 생각하면 된다.
그럼 이러한 UIElement클래스를 상속받은 클래스들을 가지고 무엇을 할수있으며 GDI와 비교해서 장점은 무엇인지 잠시 프로그램을 작성해보자
## 원그리기 ##
## 실행모습 ##
원을 만드는 XAML코드와 실행했을때의 실행모습이다. 너무 심플하지 않은가?~~~
이젠 기존 Win 32의 GDI로 그린 것과는 근본적으로 차이가 많이 난다.
여러가지 차이점이 있지만 우리는 여기서 중요한 2가지??기억하면 된다.
1) 윈도우 상에서 그려진 이미지가 자동으로 상태관리가 된다.
그림이 다른 창에 가린후 다시 보이게 되어도 자동으로 그림의 상태는 유지된다. 기존 GDI에서도 이것이 가능했다 그러 나 이것은 자동으로 관리되는 것이 아니며 적절한 시점에서 ReDraw를 해주어야 했다 즉 다시 지워진 부분을 이전의 형태로 그려주어야 한다 그렇지 않으면 하얀 윈도우만 보이게 될 수도 있다.
2) 마우스 좌표를 반영한 Hit Test를 자체적으로 지원한다.
기존의 GDI에서는 그림은 마우스를 캡쳐할 수 없다. 당연히 그런 것이 그림은 가냥 그려진 그림일 뿐 윈도우와 같이 로직이 포함된 클래스가 아니기 아니다. GDI기술에서는 지금과 같은 상황이 발생하면 타원은 당연히 MouseDown이나 MouseUp등의 이벤트를 받을수가 없다. 하지만 WPF의 Element들은 자체적으로 Hit Test를 지원하기 때문에 마우스의 모든 이벤트를 사용 좀더 정확히 구현할수 있다.
정말 놀라운 기능이 아닐 수 없다. GDI 프로그램을 한번이라도 해본 개발자라면 정말 고마운 일이 아닐 수 없다.
그럼 이전에 그린 원에 마우스 이벤트가 지원이 되는지 확인해보자.
## 원에서 마우스 이벤트
이전의 코드에 마우스 이벤트를 추가해보자
위의 내용을 주욱 ~~~ 타이핑 치면 된다. 인텔리센스가 센스있게 여러분들에게 도움을 줄 것이다. 하지만 아직은 디자이너에서 도형을 더블 클릭한다든가 속성 창에서 이벤트 항목을 찾는다는 등의 후회할(?) 행동은 하지 않기를 바란다. 뭔가 자동으로 비하인드 코드에 코드가 쫘~~악 펼쳐지는 헛된 상상을 않기 바라는 필자의 걱정스런 마음에서 하는 소리다. 왜냐 아직 다자이너는 베타이기 때문에 이런 기능은 포함되어 있지 않기 때문이다.
그럼 빌드를 하고 실행해보자
MouseEnter Event는 마우스가 원의 바깥에 있을때이고 MouseLeave Event는 마우스가 원의 안에 있을때 발생하는 이벤트입니다.
## 전체 소스 코드 ##
[ Window1.xaml ]
[ Window1.xaml.cs ]
GDI 시절 까다로웠던 도형 이미지 그리기 .NET 3.0에서는 HTML처럼 쉬우니... 이렇게 매력만점인 WPF 지금이라도 컴퓨터 앞에 앉아 직접 코딩 한줄이라도 코딩해보고 싶은 충동이 느껴지면 여러분은 분명 WPF의 바다에 푹 빠질 자격이 되어 있다
필자의 볼품없는 강좌를 끝까지 봐주어서 감사하고 그 기대 계속 이어가기 위해 좀더 질높은 강좌를 준비하겠다...