본문 바로가기

Programming/Silverlight

Silverlight – bubbling events


이번 내용은 실버라이트에서 개체가 중첩되어 있을 때 이벤트가 중첩(버블링, Bubbling)되는 현상을 막기 위한 방법인데요.

두서 없이 작성한 내용이라 저도 무슨 소린지 모르겠네요 - _-;;

중요한 내용은 4~5번 내용을 살펴보시면 이해가 되실거에요.


 

1. XAML 코드

<UserControl x:Class="BubblingEvents.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">

    <Grid x:Name="SubPanel" Margin="28,20,33,26" Background="#FF4084CE" Grid.Row="3">

        <Ellipse x:Name="Ellipse1" Margin="47,48,129,43" Stroke="#FF000000">

            <Ellipse.Fill>

                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                    <GradientStop Color="#FF0D4C07"/>

                    <GradientStop Color="#FF239E16" Offset="1"/>

                </LinearGradientBrush>

            </Ellipse.Fill>

        </Ellipse>

        <Ellipse x:Name="Ellipse2" Margin="146,79,61,43" Stroke="#FF000000">

            <Ellipse.Fill>

                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                    <GradientStop Color="#FF490B68"/>

                    <GradientStop Color="#FFF56DFD" Offset="1"/>

                </LinearGradientBrush>

            </Ellipse.Fill>

        </Ellipse>

    </Grid>

 

<TextBlock x:Name="Output" HorizontalAlignment="Left" VerticalAlignment="Top"/>

</Grid>

</UserControl>

 

 

 

 

2. C# Code

 

using System;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Input;

 

namespace BubblingEvents

{

public partial class Page : UserControl

{

private Int16 _sequence = default(Int16);

public Page()

{

InitializeComponent();

 

InitHandlers();

}

 

private void InitHandlers()

{

this.MouseLeftButtonDown += new MouseButtonEventHandler(MouseLeftClickHandler);

this.SubPanel.MouseLeftButtonDown += new MouseButtonEventHandler(MouseLeftClickHandler);

this.Ellipse1.MouseLeftButtonDown += new MouseButtonEventHandler(MouseLeftClickHandler);

this.Ellipse2.MouseLeftButtonDown += new MouseButtonEventHandler(MouseLeftClickHandler);

}

 

void MouseLeftClickHandler(Object sender, MouseButtonEventArgs e)

{

Trace((sender as FrameworkElement).Name);

}

 

private void Trace(String name)

{

this.Output.Text = String.Format("[{0}] {1}\n{2}", ++_sequence, name, this.Output.Text);

}

}

}

 

3. 버블링이 발생한다

(클릭순서 1. 파란배경, 2 녹색원, 3보라원)

 

 

4. 버블링 제거 코드

Ellipse를 포함하고 있는 Grid의 이벤트에서만 별도로 이벤트를 작성해 준다

 

private void InitHandlers()

{

this.MouseLeftButtonDown += new MouseButtonEventHandler(MouseLeftClickHandler);

this.SubPanel.MouseLeftButtonDown += new MouseButtonEventHandler(SubPanel_MouseLeftButtonDown);

this.Ellipse1.MouseLeftButtonDown += new MouseButtonEventHandler(MouseLeftClickHandler);

this.Ellipse2.MouseLeftButtonDown += new MouseButtonEventHandler(MouseLeftClickHandler);

}

 

void SubPanel_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

{

Trace((sender as FrameworkElement).Name);

e.Handled = true;

}

 

 

5. 상위의 개체가 하위의 개체의 이벤트 전달을 막지 않도록 설정

 

IsHitTestVisable 속성을 이용하여 사용자의 마우스나 키보드 등의 입력이 전달되는 것을 막지 않을 수 있다.

 

 

        <Ellipse x:Name="Ellipse2" Margin="146,79,61,43" Stroke="#FF000000" IsHitTestVisible="False">

            <Ellipse.Fill>

                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                    <GradientStop Color="#FF490B68"/>

                    <GradientStop Color="#FFF56DFD" Offset="1"/>

                </LinearGradientBrush>

            </Ellipse.Fill>

        </Ellipse>

    </Grid>

 

<TextBlock x:Name="Output" HorizontalAlignment="Left" VerticalAlignment="Top" IsHitTestVisible="False" />

반응형