2008/07/16 01:37
[세티의 실버라이트] 12. 마우스 이벤트와 프로시저 코드 Silverlight2008/07/16 01:37
원글출처:http://silverlight.net/quickstarts/blend_quickstart/part2_scripting_and_mouse_events.aspx
본 강좌는 위의 원글을 참고 및 번역해서 작성했으며, 글 중간중간 제 개인적인 표현이나 의견을 넣어서 각색했습니다.
안녕하세요~ 세티 입니다.
오늘도 지난 번과 마찬가지로 실버라이트 퀵 스타트를 기준으로 번역하면서 나름 제 표현을 가미하면서 진행해 보겠습니다.
먼저 우리는 겹쳐져 있는 2개의 rectangle을 가지고 있습니다. 하나는 푸른색의 배경색을 가지고 있고, 다른 하나는 붉은 빛의 배경색을 가지고 있습니다. 이 중에서 붉은 빛의 배경색을 가지는 rectangle 을 가장 위에 둡니다. 일반적인 버튼의 경우 마우스가 버튼 위에 위치하게 되면 아무런 액션도 일어나지 않습니다. 여기서 우리는 아무 애니메이션도 없는 버튼에 애니메이션을 주기 위해 프로시저 코드를 사용할 것입니다.
예제를 위해 mouseover 이벤트를 이용하여 작성해 보겠습니다.
먼저 Blend 2.5를 실행합니다.
그리고 LayoutRoot에 2개의 Rectangle을 만듭니다.
먼저 처음 버튼에는 파란색 그레디언트 효과를 주었습니다.
그리고 버튼을 복사하여 하나의 Rectangle을 똑같이 붙여넣었습니다.
복사한 객체의 색상은 아래의 그림처럼 변경했습니다. 그리고 Visibility 속성을 Collapsed로 변경했습니다.
다음으로 Artboard의 XAML 탭을 클릭하고, 다음의 내용을 코딩합니다.
코드를 보면 쉽게 이해하시겠지만 Grid는 MouseEnter 이벤트와 MouseLeave 이벤트를 가지고 있습니다. 이 이벤트에 행위를 담당하게 될 C#코드의 이벤트를 연결합니다.
여기서는 Grid객체의 MouseEnter 이벤트가 실행되면 C#에서 ButtonMouseEnter 메서드가 실행될 것이고, MouseLeave 이벤트가 실행된다면 C#의 ButtonMouseLeave 메서드가 실행될 것입니다.
Grid의 이벤트가 실행될 때 특정 행위를 주기 위해 이제 C# 코드에 프로시저를 코딩합니다.
그러기 위해선 먼저 솔루션 탐색기에 있는 XAML 파일을 확장해서 C# 파일을 열어야 합니다. 아래의 그림처럼 말입니다.
그리고 Page.xaml.cs를 두 번 클릭하여 해당 파일을 오픈합니다. VisualStudio가 설치되어 있는 분은 자동으로 실행되면서 CS 파일이 오픈될 겁니다. 그 곳에 ButtonMouseEnter 메서드와 ButtonMouseLeave 메서드를 코딩합니다.
자아 이제 다 되셨으면 VS를 닫고 Blend 2.5에서 F5키를 눌러서 프로젝트를 빌드 합니다.
그러면 아래처럼 실행되면서 버튼이 하나 보일 것입니다.
위의 그림에서 설명한 것 처럼 마우스를 하얀 여백에 두었다가 배경색이 있는 Grid로 마우스를 움직여 보세요.
Grid에 마우스가 올라가는 순간 Grid에 설정된 Mouse 관련 이벤트가 작동하면서 C# 코드에 있는 해당 메서드를 실행하게 됩니다. 그러면서 아래의 그림과 같은 결과를 렌더링하게 됩니다.
어때요? 매우 이해하기 쉽죠?
오늘은 이것으로 마치겠습니다.~
본 강좌는 위의 원글을 참고 및 번역해서 작성했으며, 글 중간중간 제 개인적인 표현이나 의견을 넣어서 각색했습니다.
안녕하세요~ 세티 입니다.
오늘도 지난 번과 마찬가지로 실버라이트 퀵 스타트를 기준으로 번역하면서 나름 제 표현을 가미하면서 진행해 보겠습니다.
먼저 우리는 겹쳐져 있는 2개의 rectangle을 가지고 있습니다. 하나는 푸른색의 배경색을 가지고 있고, 다른 하나는 붉은 빛의 배경색을 가지고 있습니다. 이 중에서 붉은 빛의 배경색을 가지는 rectangle 을 가장 위에 둡니다. 일반적인 버튼의 경우 마우스가 버튼 위에 위치하게 되면 아무런 액션도 일어나지 않습니다. 여기서 우리는 아무 애니메이션도 없는 버튼에 애니메이션을 주기 위해 프로시저 코드를 사용할 것입니다.
예제를 위해 mouseover 이벤트를 이용하여 작성해 보겠습니다.
먼저 Blend 2.5를 실행합니다.
그리고 LayoutRoot에 2개의 Rectangle을 만듭니다.
먼저 처음 버튼에는 파란색 그레디언트 효과를 주었습니다.
그리고 버튼을 복사하여 하나의 Rectangle을 똑같이 붙여넣었습니다.
복사한 객체의 색상은 아래의 그림처럼 변경했습니다. 그리고 Visibility 속성을 Collapsed로 변경했습니다.
다음으로 Artboard의 XAML 탭을 클릭하고, 다음의 내용을 코딩합니다.
코드를 보면 쉽게 이해하시겠지만 Grid는 MouseEnter 이벤트와 MouseLeave 이벤트를 가지고 있습니다. 이 이벤트에 행위를 담당하게 될 C#코드의 이벤트를 연결합니다.
여기서는 Grid객체의 MouseEnter 이벤트가 실행되면 C#에서 ButtonMouseEnter 메서드가 실행될 것이고, MouseLeave 이벤트가 실행된다면 C#의 ButtonMouseLeave 메서드가 실행될 것입니다.
Grid의 이벤트가 실행될 때 특정 행위를 주기 위해 이제 C# 코드에 프로시저를 코딩합니다.
그러기 위해선 먼저 솔루션 탐색기에 있는 XAML 파일을 확장해서 C# 파일을 열어야 합니다. 아래의 그림처럼 말입니다.
그리고 Page.xaml.cs를 두 번 클릭하여 해당 파일을 오픈합니다. VisualStudio가 설치되어 있는 분은 자동으로 실행되면서 CS 파일이 오픈될 겁니다. 그 곳에 ButtonMouseEnter 메서드와 ButtonMouseLeave 메서드를 코딩합니다.
자아 이제 다 되셨으면 VS를 닫고 Blend 2.5에서 F5키를 눌러서 프로젝트를 빌드 합니다.
그러면 아래처럼 실행되면서 버튼이 하나 보일 것입니다.
위의 그림에서 설명한 것 처럼 마우스를 하얀 여백에 두었다가 배경색이 있는 Grid로 마우스를 움직여 보세요.
Grid에 마우스가 올라가는 순간 Grid에 설정된 Mouse 관련 이벤트가 작동하면서 C# 코드에 있는 해당 메서드를 실행하게 됩니다. 그러면서 아래의 그림과 같은 결과를 렌더링하게 됩니다.
어때요? 매우 이해하기 쉽죠?
오늘은 이것으로 마치겠습니다.~
'Silverlight' 카테고리의 다른 글
| [세티의 실버라이트] 13. 애니메이션 (2) | 2008/07/21 |
|---|---|
| [엘리의 실버라이트 2.0] Silverlight 응용 프로그램 만들기 (0) | 2008/07/18 |
| [세티의 실버라이트] 12. 마우스 이벤트와 프로시저 코드 (4) | 2008/07/16 |
| [엘리의 실버라이트 2.0] 첫 인사 (0) | 2008/07/11 |
| [세티의 실버라이트] 11. Expression Blend 2.5를 이용한 그리기(2) (0) | 2008/07/11 |
| [세티의 실버라이트] 11. Expression Blend 2.5를 이용한 그리기(1) (0) | 2008/06/29 |
