[Controls] 20. Element:Shape (Ellipse:원)

위해서 클래스의 상속 구조를 알아야 할 필요가 있습니다.

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.Controls.Control
System.Windows.Shapes.Shape


즉 UI관련 컨트롤과 도형과 관련된  Shape이 UIElement 클래스를 상속받고 있습니다.
따라서 거의 모양을 가진 모든 비주얼한 클래스들은 UIElement 를 상속받고 있다고 생각하면 된다.

그럼 이러한 UIElement클래스를 상속받은 클래스들을 가지고 무엇을 할수있으며 GDI와 비교해서 장점은 무엇인지 잠시 프로그램을 작성해 보겠습니다.

<Ellipse Name="MyEllipse" Width="300" Height="300" Stroke="Red" />

## 원그리기 ##

그림 1.원 그리기

원을 만드는 XAML코드와 실행했을때의 실행그림입니다. 너무 심플하지 않은가요?~~

이젠 기존  Win 32의 GDI로 그린 것과는 근본적으로 차이가 많이 납니다.
여러가지 차이점이 있지만 우리는 여기서 중요한 2가지??기억하면 됩니다.

1) 윈도우 상에서 그려진 이미지가 자동으로 상태관리가 됩니다.
그림이 다른 창에 가린후 다시 보이게 되어도 자동으로 그림의 상태는 유지됩니다. 기존 GDI에서도 이것이 가능했다 그러   나 이것은 자동으로 관리되는 것이 아니며 적절한 시점에서 ReDraw를 해주어야 했다 즉 다시 지워진 부분을 이전의 형태로 그려주어야 합니다. 그렇지 않으면 하얀 윈도우만 보이게 될 수도 있습니다.

2) 마우스 좌표를 반영한 Hit Test를 자체적으로 지원합니다.
기존의 GDI에서는 그림은 마우스를 캡쳐할 수 없습니다. 당연히 그런 것이 그림은 그냥 그려진 그림일 뿐 윈도우와 같이 로직이 포함된 클래스가 아니기 때문입니다. GDI기술에서는 지금과 같은 상황이 발생하면 타원은 당연히 MouseDown이나 MouseUp등의 이벤트를 받을수가 없습니다. 하지만 WPF의 Element들은 자체적으로 Hit Test를 지원하기 때문에 마우스의 모든 이벤트를 사용 좀더 정확히 구현할수 있습니다.

GDI 프로그램을 한번이라도 해본 개발자라면 정말 고마운 일이 아닐 수 없습니다.
그럼 이전에 그린 원에 마우스 이벤트가 지원이 되는지 확인해 보겠습니다.

## 원에서 마우스 이벤트

<Ellipse Name="MyEllipse" Width="300" Height="300" Stroke="Red" />

이전의 코드에 마우스 이벤트를 추가하겠습니다.

<Ellipse Name="MyEllipse" Width="300" Height="300" Stroke="Red"
        Fill="Blue" MouseEnter="MyEllipse_MouseEnter" 
        MouseLeave="MyEllipse_MouseLeave" />

MouseEnter="MyEllipse_MouseEnter"
MouseLeave="MyEllipse_MouseLeave"

void MyEllipse_MouseEnter(object sender, MouseEventArgs e)
{
    MyEllipse.Fill = Brushes.Red;
}

void MyEllipse_MouseLeave(object sender, MouseEventArgs e)
{
    MyEllipse.Fill = Brushes.Blue;
}

위의 내용을 주욱 ~~~ 타이핑 치면 인텔리센스가 센스있게 여러분들에게 도움을 줄 것입니다. 하지만 아직은 디자이너에서 도형을 더블 클릭한다든가 속성 창에서 이벤트 항목을 찾는다는 등의 후회할(?) 행동은 하지 않기를  바랍니다. 뭔가 자동으로 비하인드 코드에 코드가 쫘~~악 펼쳐지는 헛된 상상을 않기 바라는 필자의 걱정스런 마음에서 하는 이야기입니다. 왜냐 아직 다자이너는 베타이기 때문에 이런 기능은 포함되어 있지 않기 때문입니다.

그럼 빌드를 하고 실행해 보겠습니다.

그림 2.MouseLeave

마우스 포인터가 원의 외곽에 위치할때 발생하는 이벤트 입니다.

그림 3.MouseEnter

마우스 포인터가 원의 안쪽에 위치할때 발생하는 이벤트 입니다.
(혹시 일본의 일장기를 상상하지 않기를 희망합니다. -_-;)

<Window x:Class="wpf20.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="450" Width="600">
    <Grid>
       
        <Ellipse Name="MyEllipse" Width="300" Height="300" Stroke="Red"
        Fill="Blue" MouseEnter="MyEllipse_MouseEnter" 
        MouseLeave="MyEllipse_MouseLeave" />
       
    </Grid>
</Window>

using System;
using System.Collections;
using System.Collections.Generic;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Shapes;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;

namespace wpf20
{
    /// <summary>
    /// Interaction logic for Window1.xaml
    /// </summary>

    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();
        }

        void MyEllipse_MouseEnter(object sender, MouseEventArgs e)
        {
            MyEllipse.Fill = Brushes.Red;
        }

        void MyEllipse_MouseLeave(object sender, MouseEventArgs e)
        {
            MyEllipse.Fill = Brushes.Blue;
        }
    }
}

GDI 시절 까다로웠던 도형 이미지 그리기 .NET 3.0에서는  HTML처럼 쉬우니... 이렇게 매력만점인 WPF 지금이라도 컴퓨터 앞에 앉아 직접 코딩 한줄이라도 코딩해보고 싶은 충동이 느껴지면 여러분은 분명 WPF의 바다에 푹 빠질 자격이 되어 있습니다.

필자의 볼품없는 강좌를 끝까지 봐주어서 감사하고 그 기대 계속 이어가기 위해 좀더 질높은 강좌를 준비하겠습니다...

wpf20.zip

※ 테스트 환경
-----------------------------------------------------------------------------------------
운영체체 : Windows Vista Ultimate 32bit
개발툴 : Microsoft Visual C# Codename "Orcas"
-----------------------------------------------------------------------------------------