[엘리의 실버라이트 2.0] Silverlight 입력 이벤트 핸들러 작성 (1) Silverlight2008/08/12 19:52
본 강좌는 위의 원글을 참고 및 번역해서 작성했으며, 글 중간중간 제 개인적인 표현이나 의견을 넣어서 각색했습니다.
안녕하세요. 엘리 입니다.
8월 4일부터 6일까지 부산으로 휴가를 다녀왔습니다. 친한 동생 집이 부산이라 2박 3일 동안 아주 알차게 보내고 왔습니다. 부모님들께서도 너무 잘해주셔서 맛있는 것도 많이 먹고 차까지 빌려주셔서 편히 잘 쉬다 왔습니다. ^^*
해수욕을 할까 말까 하다가 해운대에서 결국 했는데, 직접 가보니 사람이 그렇게 많진 않고 정말 밤까지 시끌벅적 하더군요. 여러 사정으로 휴가 못 가시는 분들한테는 너무 죄송하지만 간만에 유유히 편히 쉬다 왔습니다. ^^;
오늘은 Silverlight 입력 이벤트에 대한 핸들러 작성에 대해서 알아보는 시간입니다. C# 이나 Visual Basic에서, 어셈블리로 컴파일되는 이벤트 핸들러를 작성하는 방법과 XAML 파일에서 이 것들을 참조하는 방법에 대해서 알아보겠습니다.
Silverlight 응용 프로그램 작성 시, XAML 파일은 C# 또는 Visual Basic을 이용하여 함께 작업이 가능합니다. 이 두 파일을 이용하여 프로그램을 작성한다면 보다 나은 Silverlight 응용 프로그램 개발을 할 수 있을 것입니다.
XAML (eXtensible Application Markup Language) 파일에선 응용 프로그램 대부분의 UI (User Interface)를 구현할 수 있고 관리 코드 (C# 또는 Visual Basic)를 사용하여 XAML을 동작하게 합니다.
그럼, 좀 더 자세히 알아보도록 하겠습니다.
Silverlight 기반 응용 프로그램 이벤트를 핸들러를 작성하는데는 아래와 같이 여러 방법들이 있습니다.
1. Silverlight 플러그 인에 의해 해석되고 브라우저의 스크립트 엔진으로 전달되는 JavaScript 핸들러를 작성할 수 있습니다.
2. IronPython이나 관리되는 Jscript 같은 관리되는 코드로 지정한 동적 언어에 핸들러를 작성할 수 있습니다. 이 핸들러는 실행되기 전까지 컴파일이 되지 않습니다. 관리되는 코드 내 동적 언어를 위한 지원은 DLR (Dynamic Language Runtime)에 의해 제공되어 집니다. 좀 더 자세한 정보는 동적 언어로 Silverlight 프로그래밍을 참고하시기 바랍니다.
3. C#이나 Visual Basic과 같은 관리되는 코드 언어에 핸들러를 작성할 수 있습니다. 핸들러를 참조하는 XAML 페이지와 이와 함께 컴파일 되는 코드 비하인드 파일로 이벤트 핸들러가 작성되어집니다.
여기서는 3번 째 방법을 설명을 할 것인데, XAML 파일에서 핸들러를 참조하여 C# 또는 Visual Basic 코드에 이벤트 핸들러를 작성하는 방법에 대해서 설명하고 어셈블리의 일부로서 코드 비하인드 파일과 XAML 파일을 컴파일 하는 것을 설명할 것입니다.
사전 준비 사항
- Visual Studio 2008 (90일 평가판)
- Visual Studio 2008용 Silverlight Tools 베타 2
먼저 Visual Studio 2008을 사용하여 Silverlight 프로젝트를 하나 만드시기 바랍니다. (참고: Silverlight 응용 프로그램 생성하기)
프로젝트와 기본 XAML 파일 생성하기
Visual Studio Silverlight 템플릿 기반 프로젝트는 디폴트 클래스와 네임스페이스를 포함하고 이와 함께 x:Class도 이미 선언되어져 있습니다.
다음은 프로젝트를 만들고 XAML 파일을 편집하는 절차입니다.
1. Silverlight 응용 프로그램 생성하기를 참고하여 Silverlight 응용 프로그램을 하나 만드시기 바랍니다. HTML 페이지를 호스팅하기 위해 옵션으로 이 프로젝트 안에 Silverlight를 호스팅할 HTML 테스트 페이지를 동적으로 생성을 선택하시기 바랍니다. 프로젝트는 C#이나 Visual Basic을 선택할 수 있는데 선택에 따라 절차에 대한 설명이 달라질 것 입니다.
2. 기본 Silverlight 템플릿에서 만든 프로젝트를 보기 위해 솔루션 탐색기를 엽니다.
3. 다음으로 Page.xaml 파일을 여시기 바랍니다.
4. 루트 엘리먼트인 UserControl에 Height와 Width 속성이 정의되어 있다면 삭제합니다.
5. Grid 엘리먼트를 StackPanel 엘리먼트로 변경하고 Background 속성을 추가하시기 바랍니다. Grid 태그를 삭제하고 다음 코드를 붙여넣기 합니다.
|
<StackPanel x:Name=”LayoutRoot” Background=”OldLace”> </StackPanel> |
StackPanel은 완성된 코드를 실행시킨 후 보시면 브라우저의 바탕이라고 보시면 됩니다.
6. UI 엘리먼트를 추가합니다. StackPanel의 자식 엘리먼트로 Canvas 엘리먼트를 추가합니다. StackPanel 태그 사이에 다음 XAML 코드를 자식 엘리먼트로 추가합니다. 참고로 아직 이벤트나 이벤트 핸들러는 선언하지 않은 상태입니다.
|
<Canvas x:Name=”Canvas1” Background=”DarkKhaki” Width=”100” Height=”30”> <TextBlock>Canvas1</TextBlock> </Canvas> |
8. 인텔리센스 드롭다운 항목에 도움말을 보고 탭 키를 누릅니다. 이러면 Canvas1_MouseLeftButtonDown이라는 이벤트 핸들러를 정의하고 참조하게 됩니다. 이 이름은 변경하셔도 됩니다.
지금까지 작성한 XAML 파일은 다음과 같습니다.
|
<Canvas x:Name=”Canvas1” Background=”DarkKhaki” Width=”100” Height=”30“ MouseLeftButtonDown=”Canvas1_MouseLeftButtonDown”> <TextBlock>Canvas1</TextBlock> </Canvas> |
9. 현재 코드 비하인드 파일 (C# 또는 Visual Basic)의 이벤트 핸들러 코드는 비어 있습니다. 아직 컴파일은 하지 마시기 바랍니다. 이 코드는 다음 절차에서 코딩할 예정입니다.
핸들러 작성
XAML 페이지에서 참조하는 모든 이벤트 핸들러는 클래스 내에 정의되어야 하고 XAML 파일내 x:Class에 의해 선언된 어셈블리에 있어야 합니다. 코드 비하인드 파일 (C# 또는 Visual Basic)과 그 XAML 파일은 클래스 내 코드로 연결되어 있고 함께 컴파일 됩니다. 기본적으로 템플릿은 XAML 파일과 코드 비하인드 파일의 이름을 동일하게 만들고 프로젝트 내에서 XAML의 의존적 파일로서 코드 비하인드 파일이 함께 생성됩니다. 예를 들어, Page.xaml 파일을 만들었다면 코드 비하인드 파일은 여러분이 사용하는 언어에 따라 Page.xaml.cs 또는 Page.xaml.vb로 만들어졌을 것입니다. 그리고 코드 비하인드 파일은 단지 바로 아래 위치되어 있습니다. (처음 코드 비하인드 파일을 볼 수 없다면 솔루션 탐색기 내 Page.xaml의 왼쪽 +를 클릭해보세요.)
다음은 관리되는 코드 파일 내 이벤트 핸들러를 정의하는 방법입니다.
1. Page.xaml.cs 또는 Page.xaml.vb 파일을 편집하기 위해 엽니다.
C# 이라면, 프로젝트 템플릿에 따라 네임스페이스와 클래스가 정의됩니다. Visual Basic이라면, 클래스는 정의 되고 네임스페이스는 프로젝트의 기본 네임스페이스에 의해 지정됩니다.
2. Page 클래스의 멤버로서 정의된 Canvas1_MouseLeftButtonDown 빈 핸들러를 찾아보세요. 이 빈 핸들러는 이 전 절차에서 인텔리센스를 통해 TAB 키를 눌렀을 때 생성된 것입니다. XAML 파일의 Canvas 엘리먼트 참조를 하기 위해 sender 파라미터를 사용하는 핸들러 작성해보겠습니다. XAML 파일에 정의된 기본 값을 SolidColorBrush를 사용하여 변경해봅니다. 각 언어에 맞게 아래 코드를 보시기 바랍니다.
CS
|
private void Canvas1_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) { Canvas c = sender as Canvas; SolidColorBrush newColor = new SolidColorBrush(Color.FromArgb(255, 200, 77, 0)); c.Background = newColor; } |
VB
|
Private Sub Canvas1_MouseLeftButtonDown(ByVal sender As System.Object, ByVal e As System.Windows.Input.MouseButtonEventArgs) Dim c As Canvas = sender Dim newColor As SolidColorBrush = New SolidColorBrush(Color.FromArgb(255, 200, 77, 0)) c.Background = newColor End Sub |
3. 응용 프로그램을 컴파일하고 실행해보세요. (F5 키를 사용하여 디버그 상태로 컴파일하고 실행시킵니다.) HTML 페이지와 Silverlight 컨텐츠가 로드될 것입니다. 그럼, Canvas1 부분을 클릭해보세요. 컬러가 변경되는 것을 확인하실 수 있을 것입니다.
|
참고 만약 Silverlight 관리되는 이벤트가 EventArgs/RoutedEventArgs로부터 상속된 클래스를 사용하거나 다른 이벤트 핸들러에서 발생한 이벤트 데이터를 사용하지 않는다면 일반적으로 EventHandler나 RoutedEventHandler를 사용합니다. MouseLeftButtonDown 이벤트는 마우스와 관련된 이벤트의 데이터를 전달해주고 MouseEventHandler 델리게이트를 사용합니다. |
코드에 이벤트 핸들러 추가하기
일반적으로 XAML 코드에 이벤트 핸들러를 추가하는 것이 편리하지만 CLR (Common Language Runtime) 코드에 CLR 구문을 사용하여 추가할 수도 있습니다. 예를 들어, 사용 언어가 C#이라면, +=로 이벤트 핸들러를 추가할 수 있습니다. 다음 절차는 Loaded 이벤트 핸들러를 추가하기 위해 클래스 생성자를 사용한 것 입니다. Loaded 이벤트 핸들러는 기존의 Canvas1_MouseLeftButtonDown 핸들러를 다른 Canvas에 MouseLeftButtonDown 이벤트에 추가할 것 입니다.
아래의 방법으로 XAML 파일과 관리되는 코드를 편집합니다.
1. Page.xaml 파일을 편집합니다. Canvas 엘리먼트 뒤에 핸들러를 제외한 Canvas를 하나를 추가합니다. 첫 Canvas와 구별하기 위해 Background 속성 값을 다르게 지정합니다.
|
<Canvas x:Name=”Canvas2” Background=”Orchid” Width=”100” Height=”30”> <TextBlock>Canvas2</TextBlock> </Canvas> |
2. Page.xaml.cs 파일을 편집합니다. Page 클래스 생성자 내 InitializeComponent 다음에 Loaded 이벤트 핸들러를 추가합니다. (다음 단계에서 새로운 핸들러를 정의할 것 입니다. 또한 C#에서 +=를 입력하면 인텔리센스가 제공하는 여러 옵션들을 보게 될 것입니다. 그리고 다음 단계를 시작하는데 Page_Loaded의 뼈대를 잡아줄 것입니다.)
CS
|
public Page() { InitializeComponent(); this.Loaded += new RoutedEventHandler(Page_Loaded); } |
3. Canvas2의 MouseLeftButtonDown 이벤트를 참조하는 Page_Loaded 핸들러를 정의합니다. 그리고 Canvas1_MouseLeftButtonDown 핸들러를 추가하세요.
CS
|
void Page_Loaded(object sender, RoutedEventArgs e) { Canvas2.MouseLeftButtonDown += new MouseButtonEventHandler(Canvas1_MouseLeftButtonDown); } |
VB
|
Sub Page_Loaded(ByVal sender As Object, ByVal e As RoutedEventArgs) AddHandler Canvas2.MouseLeftButtonDown, AddressOf Canvas1_MouseLeftButtonDown End Sub |
4. 파일을 저장하고 컴파일 한 후 응용 프로그램을 실행시킵니다. Canvas2 영역을 클릭했을 때 컬러가 변경되는 것을 확인하실 수 있습니다.
Handles를 사용하여 Visual Basic에서 이벤트 핸들러 추가하기
Visual Basic은 WithEvents와 Handles 키워드를 사용하여 핸들러를 추가하는 또 다른 구문이 있습니다. XAML 코드에서 만들어져 명명된 엘리먼트의 경우 WithEvents 키워드를 사용할 수 없습니다. Silverlight Visual Studio 프로젝트에서 WithEvents 키워드는 추가되고, 명명된 XAML 엘리먼트에 접근하기 위해 참조되어지고 기본적으로 생성됩니다. Handles 구문은 유일하게 x:Name 엘리먼트가 추가되어졌을 때 작동됩니다. Handles를 선언했을 때 x:Name의 값은 인스턴스를 참조하게 됩니다.
XAML 파일 편집과 이벤트 핸들러 Handles 키워드를 사용하기
1. Page.xaml 파일을 편집합니다. 버튼처럼 보이는 첫 번 째 Canvas 다음에 이벤트 핸들러가 제외된 Canvas를 하나를 추가합니다.
VB
|
<Canvas x:Name="Canvas2" Background="Orchid" Width="100" Height="30"> <TextBlock>Canvas2</TextBlock> </Canvas> |
2. Page.xaml.vb 파일을 편집합니다. 첫 번째 것과 같은 이벤트 핸들러를 추가합니다. (Canvas1_MouseLeftButtonDown을 복사하여 Canvas2_MouseLeftButtonDown으로 이름을 변경하겠습니다.) 이 번에는 Canvas2 인스턴스를 위한 MouseLeftButtonDown 이벤트 핸들러 지정을 위해 Handles 키워드를 사용합니다.
|
Private Sub Canvas2_MouseLeftButtonDown(ByVal sender As System.Object, ByVal e As System.Windows.Input.MouseButtonEventArgs) Handles Canvas2.MouseLeftButtonDown Dim c As Canvas = sender Dim newColor As SolidColorBrush = New SolidColorBrush(Color.FromArgb(255, 200, 77, 0)) c.Background = newColor End Sub |
|
참고 먼저 x:Name=”Canvas1” 같은 속성 값을 가진 Canvas를 만들어놓고 기능적으로나 코드 면에서완전 동일한 핸들러를 구현하고자 한다면 핸들러는 다른 인스턴스에 핸들러 역할도 할 수 있습니다. … Handles Canvas1.MouseLeftButtonDown, Canvas2.MouseLeftButtonDown. 이렇게 구현한다면 XAML 파일 Canvas1 엘리먼트의 MouseLeftButtonDown 이벤트 속성을 삭제하여도 됩니다. |
핸들러 사용 시, XAML 파일에 속성을 추가하여 사용하거나 Handles 구문을 사용하는 것은 각 이벤트에 상호 독립적입니다. 응용 프로그램의 일관성을 유지하기 위해 XAML 파일에서 핸들러를 지정할 지, 코드 비하인드 파일에서 지정할 지 결정을 해야 합니다. Handles를 사용한다면 Silverlight가 라우트된 이벤트를 지원하게 됩니다. 이 것에 대해서는 뒤에서 좀 더 자세히 다루게 될 것입니다. 라우트된 이벤트를 사용하면 객체 트리에서 실제로 발생한 객체가 아닌 다른 객체에서 라우트된 이벤트 핸들러를 추가할 수 있습니다.
'Silverlight' 카테고리의 다른 글
| [엘리의 실버라이트 2.0] 스플래시 스크린 만들기 (0) | 2008/08/25 |
|---|---|
| [엘리의 실버라이트 2.0] Silverlight 입력 이벤트 핸들러 작성 (2) (0) | 2008/08/19 |
| [엘리의 실버라이트 2.0] Silverlight 입력 이벤트 핸들러 작성 (1) (2) | 2008/08/12 |
| [세티의 실버라이트] 15. 미디어 (0) | 2008/08/11 |
| [엘리의 실버라이트 2.0] Visual Studio의 개체 브라우저에 대해 알아보자. (0) | 2008/08/06 |
| [엘리의 실버라이트 2.0] Silverlight 디자이너 미리보기 (0) | 2008/07/30 |
