마우스 이벤트

실버라이트

by happynuri 2008. 2. 20. 17:58

일반적으로 대부분의 프로그램에 관련된 책을 보면 마우스 이벤트에 대해서 다루고 있다. 이번에는 마우스 이벤트와 마우스 포지션을 획득하는 방법에 대해서 설명하고자 한다.

MouseEnter
마우스가 해당 오브젝트의 영역으로 들어갈 때
MouseLeave
마우스가 해당 오브젝트의 영역에서 벗어날 때
MouseMove
마우스가 해당 오브젝트의 영역 내에서 움직일 때
MouseLeftButtonDown
마우스의 왼쪽 버튼을 눌렀을 때
MouseLeftButtonUp
마우스의 왼쪽 버튼에서 손을 떼어냈을 때

Down과 Up을 합쳐서 다른 말로 Click이라는 이벤트로 대변할 수 있는데 나의 짧은 견해로서는 SilverLight에서는 지원하지 않는 것 같다. (혹시 있을 수도 있다.)

여기서 잠깐 머리를 굴려보자. MouseMove, MouseLeftButtonDown, MouseLeftButtonUp을 이용하면 뭔가 다른 하나의 이벤트를 만들 수 있을 것 같지 않은가? 그렇다~~~ Drag and Drop이다.
세가지의 이벤트를 조합해서 다른 기능을 하나 이끌어 낼 수 있다.

다음 강좌에선 이러한 Drag and Drop에 대해서 함 구현을 해 볼 생각이다. 능력이 된다면... 쩝~~

자 그럼 마우스의 위치(Position)를 어떻게 얻을 수 있을까?

이전에 다른 윈도우 관련 4GL프로그램을 해 본 사람들이라면 일반적인 이벤트 처리에는 2가지의 파라미터가 넘어오는 것을 많이 보았을 것이다. SilverLight의 자바스크립트도 예외는 아닌 것 같다.

첫번째 파라미터는 현재 이벤트를 넘겨주는 객체(sender)를 나타내고 두번째 파라미터는 해당하는 이벤트에 관련된 속성들(eventArgs)을 나타낸다.

여기서 주목해야할 사항은 두번째 파라미터인데 두번째 파라미터인 eventArgs의 메소드 가운데 getPosition()이라는 녀석이 위치를 반환시켜 준다. x와 y이다. x는 수평, y는 수직이다. 그리고 항상 웹에서는 오브젝트의 왼쪽 상단의 코너가 원점이 된다. 즉 (0,0)이다.

아래의 소스코드는 TextBlock내에서 마우스를 이동시킬 때 좌표를 표현하기 위해 사용될 XAML코드이다. 여기에서 주목해야할 사항은 어떻게 TextBlock에 마우스의 좌표를 표현하는가? 라는 것과 Canvas를 로딩할 때 발생시킬 canvasLoaded()라는 메소드이다.

대충 코드를 보면 짐작이 되겠지만 addEventListener라는 녀석을 이용하면 될 것 같은 필~~~이 온다.

function canvasLoaded(sender, eventArgs)
{
var textblock = sender.findName('MousePosition');
textblock.addEventListener(
'MouseMove',
mouseMoving
);
}

function mouseMoving(sender, eventArgs)
{
var x = eventArgs.getPosition(null).x;
var y = eventArgs.getPosition(null).y;
sender.findName('MousePosition').text =
'X : ' + x + ' Y: ' + y;
}

위와 같은 형식으로 하는 방법도 있다. 하지만 같은 방법으로 하면 뭔가 재미가 없고 식상한 느낌이 들기 때문에...... 기왕이면 이번에는 아래의 mouseMoving이라는 함수를 생성하지 않는 방법을 이용해 보자.

function canvasLoaded(sender, eventArgs)
{
var textblock = sender.findName('MousePosition');
textblock.addEventListener(
   'MouseMove',
   function(sender, eventArgs)
   {
var x = eventArgs.getPosition(null).x;
var y = eventArgs.getPosition(null).y;
sender.findName('MousePosition').text =
'X : ' + x + ' Y: ' + y;
}
);
}

뭔가 훨씬 간단해진 듯한 느낌이 든다. 어느쪽을 이용해서 마찬가지지만 나중에 확장이 쉽게 되는 쪽과 관리가 용이한 쪽으로 선택하는 편이 좋을 것 같다.

getPosition에 대한 메소드는 도움말 파일을 찾아보면 자세하게 소개가 되어 있다.
여기서 설명할 것은 getPosition의 하나뿐인 파라미터를 왜 null로 설정했는가 인데 이 파라미터에는 포지션을 얻고자 하는 객체를 넘겨줄 때 사용하기 때문에 현재 이 예제에서는 이미 textblock에 addEventListener로 값을 할당해 주었다. 때문에 그다지 사용할 필요가 없어서 널로 설정을 해 두었다.

참고도서 : Essential SilverLight (O'REILLY)

http://blog.daum.net/sonstein/13556877