WPF(Windows Presentation Foundation)의 이벤트 라우팅(Routed Event)에 대해서 설명하고 버블링(Bubbling), 터널링(Tunneling), 다이렉트(Direct) 라우팅 이벤트의 작동 방식과 사용 방법에 대해서 정리하겠습니다.
이벤트 라우팅(Routed Event)이란?
Routed Event는 UI 요소 간의 이벤트 전달과 처리를 위한 것으로 이벤트 전략에 따라서 이벤트의 전달 방향이 달라집니다. 이벤트 전달 방향은 이벤트가 시작되는 UI 요소에서 시작하여 상위(부모) 요소로 전달 혹은 반대로 상위(부모) 요소에서 이벤트가 발생한 UI 요소로 전달됩니다.
Routed Event 전략 종류
Routed Event는 전략에 따라서 3가지 종류가 있으며 버블링(Bubbling), 터널링(Tunneling), 다이렉트(Direct)로 분류됩니다.
버블링 이벤트(Bubbling Event)
버블링 이벤트는 이벤트가 발생한 UI 요소에서 시작하여 상위(부모) 요소로 이벤트를 전파하는 방식입니다. 이벤트를 하위 요소에서 상위 요소로 이동하면서 처리됩니다.
터널링 이벤트(Tunneling Event)
터널링 이벤트는 이벤트가 발생한 UI 요소의 상위(부모) 요소부터 이벤트가 발생한 UI 요소까지 이벤트가 전파하는 방식입니다. 이벤트를 상위 요소에서 하위 요소로 이동하면서 처리됩니다.
다이렉트(Direct)
다이렉트는 이벤트의 전파 없이 이벤트가 발생한 UI요소에서만 이벤트가 처리됩니다.
Routed Event 예제
버블링 이벤트(Bubbling Event)
<Window x:Class="WPFExample.MainWindow"
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"
mc:Ignorable="d"
Title="MainWindow" Height="200" Width="200">
<Grid ButtonBase.Click="Grid_Click" Background="Gray" HorizontalAlignment="Center" VerticalAlignment="Center" Width="150" Height="150">
<Border ButtonBase.Click="Border_Click" BorderBrush="LightGray" BorderThickness="2" Width="100" Height="100">
<Button Content="Click" PreviewMouseDown="" Click="Button_Click" Width="50" Height="50"/>
</Border>
</Grid>
</Window>using System.Windows;
namespace WPFExample
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void Button_Click(object sender, RoutedEventArgs e)
{
MessageBox.Show("Button Click");
}
private void Border_Click(object sender, RoutedEventArgs e)
{
MessageBox.Show("Border Click");
}
private void Grid_Click(object sender, RoutedEventArgs e)
{
MessageBox.Show("Grid Click");
}
}
}Button을 클릭하면 Button → Border → Grid 순서로 이벤트(MessageBox)가 발생됩니다.
터널링 이벤트(Tunneling Event)
<Window x:Class="WPFExample.MainWindow"
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"
mc:Ignorable="d"
Title="MainWindow" Height="200" Width="200">
<Grid PreviewMouseDown="Grid_Click" Background="Gray" HorizontalAlignment="Center" VerticalAlignment="Center" Width="150" Height="150">
<Border PreviewMouseDown="Border_Click" BorderBrush="LightGray" BorderThickness="2" Width="100" Height="100">
<Button Content="Click" PreviewMouseDown="Button_Click" Width="50" Height="50"/>
</Border>
</Grid>
</Window>using System.Windows;
namespace WPFExample
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void Button_Click(object sender, RoutedEventArgs e)
{
MessageBox.Show("Button Click");
}
private void Border_Click(object sender, RoutedEventArgs e)
{
MessageBox.Show("Border Click");
}
private void Grid_Click(object sender, RoutedEventArgs e)
{
MessageBox.Show("Grid Click");
}
}
}
Button을 클릭하면 버블링 이벤트와 반대로 Grid → Border → Button 순서로 이벤트(MessageBox)가 발생됩니다.
