[WPF] EVENT(BUBBLING, TUNNULING)

WPF의 이벤트는 크게 버블링과 터널링로 나뉘어진다. 

 

✍ 버블링

자식에서 부모로 이벤트가 이동을 한다. 

 

✍ 터널링

부모에서 자식으로 이벤트가 이동을 한다. 

 

좌: 버블링(자식 -> 부모), 우: 터널링(부모 -> 자식)

<Window x:Class="WpfTutorials.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"
        xmlns:local="clr-namespace:WpfTutorials"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition Height="50"/>
        </Grid.RowDefinitions>

        <!--버블링-->
        <Button 
            Click="Button_Click">
            <Border 
                MouseDown="Border_MouseDown"
                Background="Blue" Width="300" Height="300">
                <Rectangle 
                    MouseDown="Rectangle_MouseDown"
                    Fill="Red" Width="200" Height="200"></Rectangle>
            </Border>
        </Button>
        
        <!--터널링-->
        <Button Grid.Column="1"
                PreviewMouseDown="Button_PreviewMouseDown">
            <Border 
                PreviewMouseDown="Border_PreviewMouseDown"
                Background="Blue" Width="300" Height="300">
                <Rectangle 
                    PreviewMouseDown="Rectangle_PreviewMouseDown"
                    Fill="Red" Width="200" Height="200"></Rectangle>
            </Border>
        </Button>
        
        <!--이벤트 순서 확인-->
        <TextBox
            Name="txtBubbling"
            Grid.Row="1"
            FontSize="20"/>
        <TextBox
            Name="txtTunneling"
            Grid.Row="1" Grid.Column="1"
            FontSize="20"/>


    </Grid>
</Window>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WpfTutorials
{
    /// <summary>
    /// MainWindow.xaml에 대한 상호 작용 논리
    /// </summary>
    public partial class MainWindow : Window
    {

        private List<string> list = new List<string>();

        public MainWindow()
        {
            InitializeComponent();
        }

        private void SetBubblingTextBox()
        {
            txtBubbling.Text = string.Join(" > ", list);
            ClearList();
        }

        private void SetTunnelingTextBox()
        {
            txtTunneling.Text = string.Join(" > ", list);
            ClearList();    
        }

        private async void ClearList() // 비동기 
        {
            await Task.Delay(100);
            list.Clear();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            list.Add("Button-Gray");
            SetBubblingTextBox();
        }

        private void Border_MouseDown(object sender, MouseButtonEventArgs e)
        {
            list.Add("Border-Blue");
            SetBubblingTextBox();

        }

        private void Rectangle_MouseDown(object sender, MouseButtonEventArgs e)
        {
            list.Add("Rectangle-Red");
            SetBubblingTextBox();
        }

        private void Button_PreviewMouseDown(object sender, MouseButtonEventArgs e)
        {
            list.Add("Button-Gray");
            SetTunnelingTextBox();
        }

        private void Border_PreviewMouseDown(object sender, MouseButtonEventArgs e)
        {
            list.Add("Border-Blue");
            SetTunnelingTextBox();
        }

        private void Rectangle_PreviewMouseDown(object sender, MouseButtonEventArgs e)
        {
            list.Add("Rectangle-Red");
            SetTunnelingTextBox();
        }
    }
}