WPF Input Events

Input Events

Routed Events

Routed Events는 요소 트리와 잘 작동하도록 설계된 이벤트 타입 입니다. Routed Events가  발생하면 시각적 및 논리적 트리를 위,아래로 이동할 수 있어 사용자 정의 코드 없이 간단하고 일관된 방식으로 각 요소에서 이벤트를 발생 시킵니다. 

Routed Events 전략 및 이벤트 처리기

등록 된 모든 라우트 된 이벤트는 세 가지 라우팅 전략 중 하나를 선택합니다.
즉, 이벤트 발생이 요소 트리를 통해 이동하는 방식 중 하나를 선택합니다. 이러한 전략은 RoutingStrategy 열거 형의 값으로 표시됩니다.

• Tunnerling - 루트에서 이벤트가 먼저 발생하고 소스 요소에 도달 할 때까지 (또는 핸들러가 이벤트를 처리 된 것으로 표시하여 터널링을 중지 할 때까지) 트리 아래의 각 요소에서 발생합니다.


• Bubbling - 이벤트는 소스 요소에서 먼저 발생하고 루트에 도달 할 때까지 (또는 처리기가 이벤트를 처리 된 것으로 표시하여 버블 링을 중단 할 때까지) 트리 위쪽의 각 요소에서 발생합니다.


• Direct - 이벤트는 원본 요소에서만 발생합니다. 이는 일반 .NET 이벤트와 동일한 동작입니다.

라우트 된 이벤트 처리기는 일반적인 .NET 이벤트 처리기의 패턴과 일치하는 서명을가집니다. 첫 번째 매개 변수는 일반적으로 sender라는 System.Object이고 두 번째 매개 변수 (일반적으로 e라는)는 System.EventArgs에서 파생되는 클래스입니다.

sender 매개 변수는 항상 핸들러가 첨부 된 요소이며, e 매개 변수는 다음 네 가지 유용한 속성을 제공하는 EventArgs의 하위 클래스 인 RoutedEventArgs의 인스턴스입니다. RoutedEventArgs의 유용한 속성 :

• Source - 원래 이벤트를 발생시킨 논리적 트리의 요소
• OriginalSource - 이벤트를 발생시킨 시각적 트리의 요소 (예 : 표준 버튼의 TextBlock 또는 ButtonChrome 하위)입니다.
• Handled - 이벤트를 처리 된 것으로 표시하려면 true로 설정할 수있는 부울입니다. 이것은 정확하게 터널링이나 버블 링을 중단시키는 것입니다.
• RoutedEvent - 여러 라우트 된 이벤트에 대해 동일한 핸들러가 사용될 때 발생 이벤트를 식별하는 데 도움이되는 실제 라우트 된 이벤트 오브젝트 (예 : Button.ClickEvent).

터널링 이벤트는 Preview 접두어가 붙습니다. 터널링 이벤트는 버블링 이벤트 이전에 발생 합니다. 예를 들어, PreviewMouseMove는 MouseMove 버블링 이벤트 전에 발생하는 터널링 이벤트 입니다.

예제

Grid > StackPanel > UniformGrid > Button > Image 순으로 요소 트리를 구성 한 후 요소에 MouseRightButtonDown, PreviewMouseRightButtonDown 이벤트를 등록 합니다.

1:  <Grid MouseRightButtonDown="Grid_MouseRightButtonDown" PreviewMouseRightButtonDown="Grid_PreviewMouseRightButtonDown">  
2:      <StackPanel Orientation="Horizontal">  
3:        <UniformGrid Margin="10" MouseRightButtonDown="UniformGrid_MouseRightButtonDown" PreviewMouseRightButtonDown="UniformGrid_PreviewMouseRightButtonDown">  
4:          <Button Margin="10" BorderBrush="Black" BorderThickness="0" Background="White" MouseRightButtonDown="Button_MouseRightButtonDown" PreviewMouseRightButtonDown="Button_PreviewMouseRightButtonDown">  
5:            <Button.Content>  
6:              <Image Source="./Images/img1.jpg" Stretch="Fill" MouseRightButtonDown="Image_MouseRightButtonDown" PreviewMouseRightButtonDown="Image_PreviewMouseRightButtonDown" />  
7:            </Button.Content>  
8:          </Button>  
9:          <Button Margin="10" BorderBrush="Black" BorderThickness="0" Background="White" MouseRightButtonDown="Button_MouseRightButtonDown" PreviewMouseRightButtonDown="Button_PreviewMouseRightButtonDown">  
10:            <Button.Content>  
11:              <Image Source="./Images/img1.jpg" Stretch="Fill" MouseRightButtonDown="Image_MouseRightButtonDown" PreviewMouseRightButtonDown="Image_PreviewMouseRightButtonDown" />  
12:            </Button.Content>  
13:          </Button>  
14:          <Button Margin="10" BorderBrush="Black" BorderThickness="0" Background="White" MouseRightButtonDown="Button_MouseRightButtonDown" PreviewMouseRightButtonDown="Button_PreviewMouseRightButtonDown">  
15:            <Button.Content>  
16:              <Image Source="./Images/img1.jpg" Stretch="Fill" MouseRightButtonDown="Image_MouseRightButtonDown" PreviewMouseRightButtonDown="Image_PreviewMouseRightButtonDown" />  
17:            </Button.Content>  
18:          </Button>  
19:          <Button Margin="10" BorderBrush="Black" BorderThickness="0" Background="White" MouseRightButtonDown="Button_MouseRightButtonDown" PreviewMouseRightButtonDown="Button_PreviewMouseRightButtonDown">  
20:            <Button.Content>  
21:              <Image Source="./Images/img1.jpg" Stretch="Fill" MouseRightButtonDown="Image_MouseRightButtonDown" PreviewMouseRightButtonDown="Image_PreviewMouseRightButtonDown" />  
22:            </Button.Content>  
23:          </Button>  
24:        </UniformGrid>  
25:        <StackPanel Orientation="Vertical">  
26:          <Button Name="btnClear"  
27:            Padding="10,5"  
28:            >Clear</Button>  
29:          <TextBlock Name="textBlock1"  
30:              Margin="7,4,0,0"></TextBlock>  
31:        </StackPanel>  
32:      </StackPanel>  
33:    </Grid>  

비하인드 코드에 등록된 이벤트를 이용해 TextBlock에 텍스트를 출력하도록 합니다.

1:   private void Button_MouseRightButtonDown(object sender, MouseButtonEventArgs e)  
2:      {  
3:        textBlock1.Text += "Button Event\r\n";  
4:      }  
5:      private void UniformGrid_MouseRightButtonDown(object sender, MouseButtonEventArgs e)  
6:      {  
7:        textBlock1.Text += "UniformGrid Event\r\n";  
8:      }  
9:      private void Image_MouseRightButtonDown(object sender, MouseButtonEventArgs e)  
10:      {  
11:        textBlock1.Text += "Image Event\r\n";  
12:      }  
13:      private void UniformGrid_PreviewMouseRightButtonDown(object sender, MouseButtonEventArgs e)  
14:      {  
15:        textBlock1.Text += "UniformGrid Tunneling Event\r\n";  
16:      }  
17:      private void Button_PreviewMouseRightButtonDown(object sender, MouseButtonEventArgs e)  
18:      {  
19:        textBlock1.Text += "Button Tunneling Event\r\n";  
20:      }  
21:      private void Image_PreviewMouseRightButtonDown(object sender, MouseButtonEventArgs e)  
22:      {  
23:        textBlock1.Text += "Image Tunneling Event\r\n";  
24:      }  
25:      private void Grid_MouseRightButtonDown(object sender, MouseButtonEventArgs e)  
26:      {  
27:        textBlock1.Text += "Grid Event\r\n";  
28:      }  
29:      private void Grid_PreviewMouseRightButtonDown(object sender, MouseButtonEventArgs e)  
30:      {  
31:        textBlock1.Text += "Grid Tunneling Event\r\n";  
32:      }  

이제 버튼을 클릭 했을 때 Bubbling, Tunneling 이벤트가 어떻게 발생하는지 확인 해보겠습니다.

최상단의 Grid 요소부터 발생하기 시작해서 최하위 요소인 Image 요소까지 Tunneling Event가 먼저 발생하는 것을 볼 수 있습니다. 그 뒤 반대로 최하위 요소인 Image 부터 최상단 요소인 Grid 요소까지 Bubbling Event가 발생하는 것을 확인 할 수 있습니다.