Event Bubbling Problem
I can't determine if the SDK is wrong or the implementation. Here is the issue:
The SDK states:
"WPF/E supports the concept of abubbled event for input events such as mouse events. A bubbled event is an event that is passed from a child object and is forwarded upwards to each of its ancestors in the object hierarchy."
But when I use the following XAML:
<Canvas xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Loaded=root_Loaded"
MouseLeftButtonUp=buttonUp"
x:Name="mainCanvas">
<Canvas x:Name="button" MouseLeftButtonUp=buttonUp">
<Rectangle x:Name="topRect" Stroke="#FF8E8E8E" StrokeThickness="2" RadiusX="2" RadiusY="2" Height="23" Width="75" MouseLeftButtonUp=buttonUp">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0.5,2.109" EndPoint="0.5,-1.109">
<GradientStop x:Name="gradientStop1" Color="#FFFF9E00" Offset="1"/>
<GradientStop x:Name="gradientStop2" Color="#FFEAEAEA" Offset="0.218"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<TextBlock x:Name="textBlock" Canvas.Top="3" Canvas.Left="13" FontSize="12" Foreground="#FF5A5A5A" Text="Click Me" MouseLeftButtonUp=buttonUp" />
<Canvas x:Name="innerCanvas" Canvas.Left="13" Canvas.Top="50" MouseLeftButtonUp=buttonUp">
<Rectangle x:Name="innerRect" Width="100" Height="100" Fill="Blue" MouseLeftButtonUp=buttonUp" />
</Canvas>
</Canvas>
</Canvas>
Note that I have the same event on all objects (buttonUp). In the buttonUp event, I do this:
function buttonUp(sender, eventArgs) {
alert(sender.Name);
}
The events always fire from the mainCanvas down, not from the child up. Am I confused by the SDK, wrong or is there a real problem.
Also, is there a way to cancel the bubbling? (e.g. return false; does not work).
In "real" WPF, you would set e.Handled = true to terminate further event dispatch.
WPF/E doesn't seem to have any equivalent. In fact the whole event handling portion of WPF/E is so anemic at the moment as to be laughable. There aren't any keyboard events, for goodness sake.
Yes - this appears to be as Akhil describes. Use the slightly modified sample below - first click on the "Click Me" button and then click on the "Display Event Info" button. You'll see the events come in the correct order but the alert is causing them to appear in reverse.
<Canvas xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
MouseLeftButtonUp=buttonUp"
x:Name="mainCanvas">
<Canvas x:Name="button" MouseLeftButtonUp=buttonUp">
<Rectangle x:Name="topRect" Stroke="#FF8E8E8E" StrokeThickness="2" RadiusX="2" RadiusY="2" Height="23" Width="75" MouseLeftButtonUp=buttonUp">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0.5,2.109" EndPoint="0.5,-1.109">
<GradientStop x:Name="gradientStop1" Color="#FFFF9E00" Offset="1"/>
<GradientStop x:Name="gradientStop2" Color="#FFEAEAEA" Offset="0.218"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<TextBlock x:Name="textBlock" Canvas.Top="3" Canvas.Left="13" FontSize="12" Foreground="#FF5A5A5A" Text="Click Me" MouseLeftButtonUp=buttonUp" />
<Canvas x:Name="innerCanvas" Canvas.Left="13" Canvas.Top="50" MouseLeftButtonUp=buttonUp">
<Rectangle x:Name="innerRect" Width="100" Height="100" Fill="Blue" MouseLeftButtonUp=buttonUp" />
</Canvas>
</Canvas>
<Canvas Canvas.Top="170" Canvas.Left="3" Background="#F0F0F0" Height="25" Width="150" MouseLeftButtonDown=printResults">
<TextBlock Canvas.Top="2" Canvas.Left="7" Text="Display Event Info"/>
</Canvas>
</Canvas>
With the following event handlers:
var eventdata="";
var count=0;
function buttonUp(sender, eventArgs) {
eventdata += (count.toString() + ":" + sender.Name + " ");
count++;
}
function printResults(sender, eventArgs) {
alert(eventdata);
eventdata = "";
count=0;
}
