1 Results for '투명'

  1. 2007.12.19 브러시와 마우스 이벤트 (2)

오늘은 Canvas와 브러시 및 마우스 이벤트에 대한 간단한 특이 사항에 대해 알아볼게요.

Null 브러시와 투명색

실버라이트의 개체들은 브러시(Canvas의 Background 또는 Shape들의 Fill) 속성을 XAML에서 명시적으로 선언하지 않으면 즉, 브러시가 Null일 경우 해당 영역을 투명하게 표현하죠. 다른 방법으로는 SolidColorBrush 등의 색상을 설정하는 브러시의 알파값을 0으로 설정하여도 역시 투명하게 표현된다는 사실은 잘 알고 있을거에요.

하지만 개체를 투명하게 표현하는 이 두가지 방법은 분명히 차이점이 있어요. 바로 Null 브러시는 마우스 이벤트를 받을 수 없다는 점이죠.

예를 들어, 다음과 같은 XAML의 Canvas가 있다고 생각해보죠.

<Canvas x:Name="testCanvas" Width="100" Height="100"></Canvas>

이 Canvas에 마우스가 움직일 때 이벤트를 받고 싶다면 testCavnas.MouseMove 이벤트에 핸들러를 붙이겠죠.
하지만 이 이벤트 핸들러는 절대로 호출되지 않아요. 바로 Canvas가 어떠한 값으로도 '칠해지지' 않았기 때문이죠.
만약 이 Canvas에서 마우스 관련 이벤트를 받고 싶지만 여전히 투명하게 칠하고 싶다면 다음과 같은 XAML 코드를 사용해야 해요.

<Canvas x:Name="testCanvas" Width="100" Height="100" Background="#00000000"></Canvas>

Canvas의 Size와 자식 개체에서 전달되는 이벤트

또 다른 상황을 생각해보죠. 우리는 Canvas에 특별히 Width나 Height을 설정하지 않아도 Canvas에 자식 개체들을 올릴 수 있고 이 자식 개체들이 정상적으로 보인다는 사실을 알고 있어요. Canvas에 Width나 Height을 설정하지 않을 경우 Canvas에 Background를 설정하더라도 Canvas 자기 자신으로부터는 마우스 관련 이벤트를 받을 수 없어요. 당연하겠죠? Canvas의 크기가 0인데 표현되는 영역도 없을테니까요.

하지만, 이렇게 Size가 0인 Canvas라고 해도 Canvas의 자식 개체가 있을 경우 자식 개체에서 발생된 마우스 이벤트는 이벤트 버블링이라는 메커니즘에 의해 Canvas에 전달되죠. 신기하지 않나요? 이 이벤트 버블링에 대해서는 언젠가 별도로 포스팅할 예정이에요.

요컨대, 다음과 같이 Size도 Background도 갖지 않는 Canvas에 MouseMove 이벤트 핸들러를 붙였다면 자식 개체인 Ellipse위를 마우스가 지나가면 MouseMove 이벤트가 전달되는거죠. 한번 testEllipse와 testCanvas에 모두 MouseMove 이벤트 핸들러를 달아서 테스트해 보세요.

<Canvas x:Name="testCanvas">
    <Ellipse x:Name="textEllipse" Width="100" Height="100" Fill="#FFFF0000" />
</Canvas>

종합 테스트

우선 Canvas의 Size를 설정했을 때와 안했을 때 그리고, Canvas의 Background를 설정했을 때와 안했을 때를 비교해보죠.

위의 예제에서 Canvas는 모서리가 둥근 사각형 안에 위치해 있고 위에서부터 각각,
1. Background를 설정하지 않음, Size를 설정하지 않음
2. Background를 설정하지 않음, Size를 설정함
3. Background를 설정함, Size를 설정하지 않음
4. Background를 설정함, Size를 설정함
상태에요.

결과는 Background와 Size 모두 설정된 네 번째 Canvas에서만 이벤트를 받을 수 있죠.

그럼 위의 Canvas에 자식 개체를 넣고 테스트 해 볼까요?

결과는 위와 같이 Canvas의 다른 영역에서는 첫 번째 실험과 같지만, 자식 개체 위에서는 마우스 이벤트가 전달된다는 사실을 알 수 있어요.

위의 테스트는 다음 링크에서 확인해 볼 수 있고 프로젝트 파일도 아래에서 다운 받을 수 있으니 테스트 해 보세요.

테스트 : http://gongdo.oranc.co.kr/Silverlight/Samples/CanvasBackgroundTest/TestPage.html

프로젝트 파일 :

신고
Posted by gongdo


티스토리 툴바