Top element prevet firing of MouseUp for the back element

Question

I'm designing a UserControl in WPF. There is a canvas with some paths. Among those path I have two Ellipses (top and bottom of the picture). I'm doing some works when MouseUp event of the Ellipses is fired but when the user clicks on the plus/minus path they are not firing! I have seenthis and this. But It seems here the bubbling and tunneling is not the case because minus/plus paths are not contained in ellipses. Here is the code for one of the ellipses:

<Canvas Width="96" Height="550" MouseUp="plusPath_MouseUp" Background="Transparent">
    <Path x:Name="Path" Width="96" Height="550" Canvas.Left="0"  StrokeThickness="6" StrokeLineJoin="Round" Stroke="#FF465546" Canvas.Top="0" Stretch="Fill" Data="..."/>
    <Ellipse x:Name="zoomIn"  Width="68" Height="68" Canvas.Left="14" Canvas.Top="18.5143" />
    <Ellipse x:Name="zoomOut" Width="68" Height="68" Canvas.Left="14" Canvas.Top="468.79" />
    <Path  x:Name="minusPath" Cursor="Hand" Width="36" Height="6" Canvas.Left="30" Canvas.Top="500" Stretch="Fill" StrokeThickness="6" StrokeLineJoin="Round" Stroke="#FF87A698" Data="F1 M 33.0001,501.956L 63.0001,501.956"/>
    <Path  x:Name="plusPath" Cursor="Hand" Width="36.0001" Height="36" Canvas.Left="30" Canvas.Top="34" Stretch="Fill" StrokeThickness="6" StrokeLineJoin="Round" Stroke="#FF87A698" Data="M 34.0658,52.181L 64.0659,52.181M 49.0657,67.181L 49.0657,37.181"/>
</Canvas>

Should I handle the MouseUp event of the minus/plus paths or there is a better way?

EDIT: I'm looking for the best practices.

Answer 1

You can put both Ellipse and Path into Grid and catch MouseUp="zoomIn_MouseUp" there:

<Grid Cursor="Hand" MouseUp="zoomIn_MouseUp" Canvas.Left="14" Canvas.Top="18.5143">
    <Ellipse x:Name="zoomIn"  Width="68" Height="68"/>
    <Path x:Name="plusPath" StrokeThickness="6" Width="36.0001" Height="36" StrokeLineJoin="Round" Stretch="Fill" Stroke="#FF87A698" Data="M 34.0658,52.181L 64.0659,52.181M 49.0657,67.181L 49.0657,37.181"/>
</Grid>

Answer 2

Handle the MouseUp on the container element (say Grid, DockPanel, Canvas etc.) because whenever MouseUp event is raised on child (Ellipse or Path), it bubbles upto to the root element (Canvas).

<Canvas MouseUp="Handler">
   <Ellipse/>
   <Path/>
</Canvas>

---

You can get the original sender of event by checking e.OriginalSource if you want to know that which element actually raises the event. (Ellipse or Path).

private void Handler(object sender, MouseButtonEventArgs e)
{
    // Check actual sender here which can be Canvas, Ellipse or Path.
    Ellipse senderObject = e.OriginalSource as Ellipse;
    if(senderObject == null)
    {
       Path senderPath = e.OriginalSource as Path;
    }
}