Silverlight: How to Prevent Routing a MouseMove Event from a Child Canvas to Its Parent Canvas

Question

I have my XAML code:

<Canvas x:Name="mainCanvas" Width="200" Height="150" Background="LightGray"
        MouseLeftButtonUp="mainCanvas_MouseLeftButtonUp"
        MouseMove="mainCanvas_MouseMove">
    <Canvas x:Name="topCanvas" Width="200" Height="100" Background="LightBlue"
            MouseLeftButtonUp="topCanvas_MouseLeftButtonUp"
            MouseMove="topCanvas_MouseMove">
    </Canvas>
</Canvas>

and its code behind:

private void topCanvas_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
    MessageBox.Show("topCanvas_MouseLeftButtonUp");

    e.Handled = true; // This can prevent routing to the mainCanvas
}

private void mainCanvas_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
    MessageBox.Show("mainCanvas_MouseLeftButtonUp");
}

private void topCanvas_MouseMove(object sender, MouseEventArgs e)
{
    Debug.WriteLine("topCanvas_MouseMove");

    // How to prevent routing to the mainCanvas?
    // e.Handled = true does NOT exist in MouseEventArgs
}

private void mainCanvas_MouseMove(object sender, MouseEventArgs e)
{
    Debug.WriteLine("mainCanvas_MouseMove");
}

My question is already in the comments.

How to prevent routing the MouseMove event from the topCanvas (the child canvas) to the mainCanvas (parent canvas)?

Thanks.

Peter

I don't understand your question. If you don't want the event remove it from your xaml — MyKuLLSKI, Jan 16 '12 at 06:16
Hmmm. Sometimes I need it, sometimes I don't need it. The code above is just an example. — Peter Lee, Jan 16 '12 at 06:37
Do you know when you need it and when you don't at all times? — MyKuLLSKI, Jan 16 '12 at 14:05

Mark Hall · Answer 1 · 2012-01-19T01:11:04.837

You can try comparing e.OriginalSource in mainCanvas's MouseMove Event and exit the Sub if it wasn't originated from the mainCanvas.

private void mainCanvas_MouseMove(object sender, MouseEventArgs e)
{
    if (sender != e.OriginalSource)
        return;        
}

In replying to your comment in a little more detail. According to the UIElement.MouseMove Event MSDN link.

Controls that inherit MouseMove can provide handling for the event that acts as handler for all instances, by overriding the OnMouseMove method. As with direct handling of the event, there is no Handled property available, so OnMouseMove cannot be implemented in such a way that it suppresses further handling of the event through the Handled technique.

and this link states:

This event creates an alias for the Mouse.MouseMove attached event for this class

Which brings us to this link on AttachedEvents which states.

Extensible Application Markup Language (XAML) defines a language component and type of event called an attached event. The concept of an attached event enables you to add a handler for a particular event to an arbitrary element rather than to an element that actually defines or inherits the event. In this case, neither the object potentially raising the event nor the destination handling instance defines or otherwise "owns" the event.

So as I see it, your only option is to code around it.

Thanks for you reply. This does NOT prevent routing (from top canvas to the main canvas). What I need is just as simple as `e.Handled = true` as in `MouseButtonEventArgs`. — Peter Lee, Jan 18 '12 at 19:18
@PeterLee It doesn't not prevent the routing, because you do not have the option to handle this event. What it does is prevent your handler from running its code unless the event originated from the MainCanvas which effectively does the same thing. — Mark Hall, Jan 18 '12 at 21:11

score 0 · Answer 2 · answered Jan 16 '12 at 06:44

0

Try setting the IsHitTestVisible property of your Canvas. With that property set accordingly mouse events will go either "through" your control or will be caught by it.

Hope this is what you need.

answered Jan 16 '12 at 06:44

marc wellman

5,808
5
32
59

Thanks for you reply. This does NOT prevent routing (from top canvas to the main canvas). What I need is just as simple as `e.Handled = true` as in `MouseButtonEventArgs`. – Peter Lee Jan 18 '12 at 19:18

score -2 · Answer 3 · answered Jan 16 '12 at 05:54

-2

The functionality is called "Event Bubbling". You can stop it using below code:

jQuery: event.stopPropagation(); Ref: http://api.jquery.com/event.stopPropagation/

You can also try below code: e.stopPropagation(); //to prevent event from bubbling up e.preventDefault(); //then cancel the event (if it's cancelable)

Ref: http://stackoverflow.com/questions/1967537/how-to-stop-event-bubbling-with-jquery-live

Thanks, Ravi Verma

answered Jan 16 '12 at 05:54

Ravi Verma

9
1

Hi Ravi, Thanks for your reply. But I'm confused. I'm talking this in Silverlight, your code seems JavaScript. You mean using JavaScript from webpage to prevent bubbling in the Silverlight? – Peter Lee Jan 16 '12 at 06:02
1

Javascript, and jQuery in particular, have nothing to do with Silverlight, making this answer incredibly wrong. – slugster Jan 16 '12 at 06:45

Silverlight: How to Prevent Routing a MouseMove Event from a Child Canvas to Its Parent Canvas

3 Answers3