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" />
…