기술문서 [1조 주옥찬]Silverlight 이벤트

[21기 주옥찬]

이벤트(Silverlight)	작성자 : 주옥찬
	작성일 : 2011-05-17
주 제 : 이벤트

1. 이벤트

- 이벤트란 특정 동작의 발생을 알리기 위해 객체에서 보내는 메시지

1-1. 이벤트 종류

 ① 입력 이벤트 : 사용자의 입력이 있는 경우 호출되는 이벤트

 ② 비 입력 이벤트 : 객체의 상태가 변경된 경우 호출되는 이벤트

1-2. XAML을 이용한 이벤트 핸들러

<UserControl x:Class="Silver02.Page"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    Width="400" Height="300">

    <Grid x:Name="LayoutRoot" Background="White">

        <Button Width="100" Height="100" Content="이벤트 버튼" Click="Button_Click"/>

    </Grid>

</UserControl>

private void Button_Click(object sender, RoutedEventArgs e)

{

   MessageBox.Show("버튼 클릭");

}

실행 하면 버튼이 있는 창이 뜨며 버튼 클릭시 이벤트 핸들러가 실행 MessageBox가 출력

1-3. C#코드를 이용한 동적 이벤트 핸들러

<Button x:Name="MyButton" Width="100" Height="100" Content="이벤트 버튼"/>

C# 코드에서 XAML에 명시한 컨트롤에 접근하고자 할 경우 x:Name을 사용

public Page()

{

      InitializeComponent();

       MyButton.Click += new RoutedEventHandler(MyButton_Click);    //+=이후 Tab클릭

}

void MyButton_Click(object sender, RoutedEventArgs e)

{

       MessageBox.Show("버튼 클릭");

}

XAML에서 명시한 MyButton을 이용해 버튼에 접근한후 Click 이벤트에 이벤트 핸들러 연결

2. 이벤트 라우팅

 - 실버라이트의 모든 객체들은 서로의 포함 관계에 따라 위, 아래 개념을 가진다. 위, 아래 개념을 가지는 모델을 트리 구조라고 부른다.

 하위 객체에서 이벤트가 발생하면 이벤트는 하위에서 상위로 한 단계씩 올라가면 발생 한다.

 이러한 트리 구조를 따라 이벤트가 발생하는 방식을 이벤트 라우팅이라 하며, 아래서 위로 올라가는 것을 버블링 반대일 경우 터널링이라 하며 실버라이트에서는 버블링 방식만 지원한다.

2-1 이벤트 라우팅을 지원하는 이벤트

KeyDown	KeyUp
GotFocus	LostFocus
MoustLeftButtonDown	MoustLeftButtonUp
MouseMove	BindingValidati[안내]태그제한으로등록되지않습니다-xx[안내]태그제한으로등록되지않습니다-xxonError

2-2 이벤트 라우팅 예

<Grid x:Name="LayoutRoot" Background="Green" Width="400" Height="400">

        <Rectangle x:Name="MyRectangle" Width="100" Height="100" Fill="White"/>

 </Grid>

public Page()

{

    InitializeComponent();

    LayoutRoot.MouseLeftButtonDown += new MouseButtonEventHandler(LayoutRoot_MouseLeftButtonDown);

    MyRectangle.MouseLeftButtonDown += new MouseButtonEventHandler(MyRectangle_MouseLeftButtonDown);

 }

void MyRectangle_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

{

     MessageBox.Show("Rectangle 이벤트 핸들");

}

void LayoutRoot_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

{

      MessageBox.Show("Grid 이벤트 핸들");

}

이벤트 라우팅이 제대로 동작한다면 사각형을 클릭시에 Rectangle 이벤트 메시지 박스와 Grid 이벤트 메시지 박스가 순서대로 출력됨으로 써 이벤트 라우팅은 가장 하단의 객체에서부터 상단으로 한 단계씩 올라가는 것을 확인할수 있다.(Grid 영역 클릭시 Grid 이벤트 메시지 박스만 출력된다.)

3. 트리거와 액션의 관계

 - 트리거는 이벤트를 설정해 언제 트리거가 발생하는 시점을 결정할 수 있다.

 - 액션은 트리거의 하위에 포함 되는 자식 요소 이며 트리거가 실행되면 실제로 수행 되어야할 작업을 정의 한다.(트리거에는 다수의 액션이 존재할 수 있다.)

3-1 Triggers와 EventTrigger

 - Triggers 엘리먼트는 컨트롤의 하위에 선언하며, 다수의 EventTrigger를 자식으로 가지고 있다.

 - EventTrigger는 트리거를 발생시키기 위한 이벤트 이름을 설정할 수 있다. EventTrigger는 2가지의 프로퍼티를 가지고 있다.

EventName : 트리거를 발생시키기 위한 이벤트 이름

SourceName : 이벤트를 처리할 컨트롤 이름 이 프로퍼티를 설정 하지 않으면 디폴트로 Triggers 엘리먼트가 선언된 컨트롤의 이벤트를 처리한다.

3-2 Triggers와 EventTrigger(xaml)

 트리거와 액션을 사용하기 위해서는 3가지 어셈블리를 참조추가 해야 합니다.

- Microsoft.Expression‎.Interactions

- Microsoft.Expression‎.Prototyping.Interactivity

- System.Windows.Interactivity

<UserControl x:Class="Silver02.Page"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:d="http://schemas.microsoft.com/expression‎/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=                    ①

System.Windows.Interactivity"

    xmlns:ic="clr-namespace:Microsoft.Expression‎.Interactivity.Core;assembly=Microsoft.  ②

Expression‎.Interactions"

    mc:Ignorable="d" Width="400" Height="300">   

    <Grid x:Name="LayoutRoot">

        <Button Content="Click Me" x:Name="button" Width="100" Height="100">

            <i:Interaction.Triggers>                                               ③

                <i:EventTrigger EventName="Click">                               ④

                    <ic:ChangePropertyAction PropertyName="Width" TargetName="button" Value="200">                                                                    ⑤

                    </ic:ChangePropertyAction>

                </i:EventTrigger>

            </i:Interaction.Triggers>

        </Button>

    </Grid>

</UserControl>

① 트리거를 사용하기 위해 네임스페이스를 추가한것

② 액션을 사용하기 위해 네임스페이스를 추가

③ 트리거를 정의할 준비

④ <EventTrigger>태그를 이용해 트리거 선언 EventName은 트리거를 발생시킬 이벤트 이름

   Click 설정은 버튼이 클릭되면 트리거를 발생되도록 설정

⑤ <ChangePropertyAction>태그를 이용해 액션 정의 TargetName에 명시된 엘리먼트의 PropertyName에 명시된 프로퍼티 값을 변경시킬 때 사용하는 액션 button엘리먼트의 Width 프로퍼티를 변경하도록 설정

3-3 액션

-      액션은 EventTrigger 하위에 포함되며 트리거에 의해 수행된다.

-      기본적으로 사용할 수 있는 액션 6가지이며, 두 그룹으로 나뉜다.

TargetedTriggerAction

1.     ChangePropertyAction

2.     GoToStateAction

3.     RemoveElementAction

TriggerAction

1.     ControlStoryboardAction

2.     HyperlinkAction

3.     PlaySoundAction

3-3-1 ChangePropertyAction

 Target 컨트롤의 프로퍼티 값을 변경하기 위해 사용 5가지의 프로퍼티를 가지고 있다.

- TargetName : 변경시키고자 하는 컨트롤의 이름

- PropertyName : 변경시킬 컨트롤의 프로퍼티 이름

- Value : 변경될 값

- Ease : 컨트롤 값이 변경될 때 사용할 애니메이션을 지정

- Duration : Ease프로퍼티가 설정된 경우에만 의미있는 프로퍼티 애니메이션 재생 시간

3-3-2 GoToStateAction

 컨트롤의 VisualState(상태)를 변경시키기 위해 사용 2가지의 프로퍼티 가지고 있다.

- TargetName : GoToStateAction으로 변경시키고자 하는 컨트롤의 이름

- StateName : 변경될 State 이름

xaml소스

<Grid x:Name="LayoutRoot">

        <Button Content="GoToStateAction" HorizontalAlignment="Left"  Width="100" Height="100">

            <i:Interaction.Triggers>

                <i:EventTrigger EventName="Click">   ①

                    <ic:GoToStateAction TargetName="button1" StateName="MouseOver"/> ②

                </i:EventTrigger>

            </i:Interaction.Triggers>

        </Button>

        <Button x:Name="button1" Width="100" Height="100" Content="StateTest" HorizontalAlignment="Right"/>   ③

</Grid>

① 트리거 선언 버튼이 클릭될 경우 실행

② GoToStateAction 선언 TargetName을 밑의 버튼을 가르키고 StateName을 MouseOver로 설정

   버튼의 State를 MouseOver로 변경하도록 함

③ 액션으로 변경시킬 버튼

GoToStateAction 버튼을 클릭하면 오른쪽 버튼의 상태가 MouseOver로 변경

3-3-3 RemoveElementAction

 컨트롤을 삭제하기 위해 사용 1가지의 프로퍼티 가지고 있다.

- TargetName : 삭제하고자 하는  컨트롤의 이름

xaml소스

<Grid x:Name="LayoutRoot">

        <Button Content="RemoveElementAction" HorizontalAlignment="Left"  Width="100" Height="100">

            <i:Interaction.Triggers>

                <i:EventTrigger EventName="Click">   ①

                    <ic:RemoveElementAction TargetName="button1" />   ②

                </i:EventTrigger>

            </i:Interaction.Triggers>

        </Button>

        <Button x:Name="button1" Width="100" Height="100" Content="StateTest" HorizontalAlignment="Right"/>   ③

</Grid>

① 트리거 선언 버튼이 클릭될 경우 실행

② RemoveElementAction을 선언 TargetName으로 button1을 가르킨다.

③ 액션으로 변경시킬 버튼 선택

RemoveElementAction 버튼 클릭시 오른쪽의 버튼이 삭제 된다.

3-3-4 ControlStoryboardAction

 Storyboard를 제어하기 위한 액션 사용시 Storyboard를 XAML에서 시작하거나 종료할 수 있다. 2가지 프로퍼티를 가지고 있다.

-      ControlStoryboardOption : Storyboard를 조작하는 방법을 의미 Play, Pause, Stop 등 총 6가지 조작 방법을 사용할 수 있다.

-      Stodyboard : 조작할 Storyboard의 이름을 의미

xaml소스

<Grid.Resources>

            <Storyboard x:Key="Storyboard1">    ①

                <DoubleAnimation Storyboard.TargetName="button1" toryboard.TargetProperty="Width" To="200"/>

            </Storyboard>

        </Grid.Resources>

        <Button Content="ControlStoryboard" HorizontalAlignment="Left"  Width="100" Height="100">

            <i:Interaction.Triggers>

                <i:EventTrigger EventName="Click">    ②

                    im:ControlStoryboardAction ControlStoryboardOption="Play" Storyboard="{StaticResource Storyboard1}"/>     ③

                </i:EventTrigger>

            </i:Interaction.Triggers>

        </Button>

        <Button x:Name="button1" Width="100" Height="100" Content="StateTest" HorizontalAlignment="Right"/>    ④

① ControlStoryboardAction에서 사용할 Storyboard를 정의 버튼의 넓이를 1초동안 100에서 200으로 변경시킨다.

② 트리거 선언 버튼이 클릭될 경우 실행

③ ControlStoryboardAction을 정의 Option에 Play를 설정해 액션이 수행되면 Storyboard가 수행하도록 설정 Storyboard에는 ①에서 설정한 Storyboard를 지정

④ 액션에서 변경시킬 버튼을 정의

ConTrolStoryboard 버튼을 클릭하면 오른쪽 버튼의 넓이가 100에서 200으로 애니메이션을 통해 증가

3-3-5 HyperlinkAction

 HyperlinkAction은 특정 Url로 이동하기 위해 사용하는 액션 HTML의 링크와 비슷한 기능을 하면 2가지 프로퍼티를 가지고 있다.

-      NavigateUrl : HyperlinkAction에 의해 이동할 Url을 의미

-      TargetWindow : 새롭게 이동하는 페이지를 새 창에 띄울 것인지(_blank) 현재 윈도우를 이동할 것인지(_self) 또는 특정 윈도우를 이동할 것인지(윈도우이름) 선택한다.

xaml소스

<Grid x:Name="LayoutRoot">

            <Button Content="HyperlinkAction" HorizontalAlignment="Left"  Width="100" Height="100">

                <i:Interaction.Triggers>

                    <i:EventTrigger EventName="Click">

                        <ic:HyperlinkAction NavigateUri="http://www.naver.com"  TargetWindow="_blank"/>        ①

                    </i:EventTrigger>

                </i:Interaction.Triggers>

            </Button>

</Grid>

① HyperlinkAction을 선언 NavigateUrl를 Naver로 설정 TargetWindow로 새창으로 뜨게 설정 하였다.

HyperlinkAction 버튼 클릭시 새창으로 Naver.com으로 연결된다.

3-3-6 PlaySoundAction

 PlaySoundAction은 오디오 파일을 재생하기 위해 사용하는 액션 mp3, asf, asx, wma,

wmv를 지원 2가지 프로퍼티를 가지고 있다.

-      Source : 재생될 오디오 파일의 경로를 의미

-      Volume : 소리의 크기를 의미한다(0~1)

xaml소스

<Grid x:Name="LayoutRoot">

            <Button Content="HyperlinkAction" HorizontalAlignment="Center" Width="100" Height="100">

                <i:Interaction.Triggers>

                    <i:EventTrigger EventName="Click">

                    <im:PlaySoundAction Source="http://antasis9.woweb.net/

silverlight/sound.wma" Volume="100"/>   ①

                </i:EventTrigger>

                </i:Interaction.Triggers>

            </Button>

   </Grid>

① PlaySoundAction을 선언 Source 프로퍼티에는 재생할 오디오 파일의 경로 설정 Volume에는 1을 설정해서 최대 크기로 오디오 파일을 재생하도록 했다.

PlaySoundAction 클릭시 오디오 파일이 재생