Why is mouseover not detected on object behind polyline?

I have this XAML for a UserControl with a Polyline in a "triangular" shape:

<UserControl

   x:Class="Shapes.OtherShapes.MyPolyline"

   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

   xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
   xmlns:converters="clr-namespace:Shapes.Converters"><UserControl.Resources><converters:MouseOverConverter x:Key="ColorConverter"/></UserControl.Resources><Canvas
      x:Name="LayoutRoot"
      Background="Transparent"><Polyline
         Points="50,25 0,100 100,100 50,25"
         StrokeThickness="10"
         Stroke="{Binding MouseOver, Converter={StaticResource ColorConverter}, FallbackValue=Black}"
         Opacity="{Binding Opacity}"><i:Interaction.Triggers><i:EventTrigger EventName="MouseEnter" ><i:InvokeCommandAction Command="{Binding MouseEnterCommand}"/></i:EventTrigger><i:EventTrigger EventName="MouseLeave" ><i:InvokeCommandAction Command="{Binding MouseLeaveCommand}"/></i:EventTrigger></i:Interaction.Triggers></Polyline></Canvas><UserControl.RenderTransform><TransformGroup><RotateTransform Angle="{Binding Angle}"/><ScaleTransform ScaleX="{Binding ScaleX}" ScaleY="{Binding ScaleY}"/><TranslateTransform X="{Binding X}" Y="{Binding Y}"/></TransformGroup></UserControl.RenderTransform></UserControl>

And this XAML for a UserControl with a Circle with a number in it:

<UserControl

   x:Class="Shapes.NumberedShapes.NumberedCircle"

   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

   xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
   xmlns:converters="clr-namespace:Shapes.Converters"><UserControl.Resources><converters:MouseOverConverter x:Key="ColorConverter"/></UserControl.Resources><Canvas
      x:Name="LayoutRoot"
      Background="Transparent"
      Width="100"
      Height="100"><Ellipse x:Name="Circle1"
         Canvas.Left="-50"
         Canvas.Top="-50"
         Stroke="green"
         StrokeThickness="3"
         Fill="{Binding MouseOver, Converter={StaticResource ColorConverter}}"
         Height="100"
         Width="100"
         Opacity="{Binding Opacity}"><i:Interaction.Triggers><i:EventTrigger EventName="MouseEnter" ><i:InvokeCommandAction Command="{Binding MouseEnterCommand}"/></i:EventTrigger><i:EventTrigger EventName="MouseLeave" ><i:InvokeCommandAction Command="{Binding MouseLeaveCommand}"/></i:EventTrigger></i:Interaction.Triggers></Ellipse><Grid
         Canvas.Left="-40"
         Canvas.Top="-25"
         Width="80"
         Height="50"
         Background="Transparent"
         IsHitTestVisible="False"><Viewbox ><TextBlock Text="{Binding IDNumber, FallbackValue=##}" Foreground="Black" /></Viewbox></Grid></Canvas><UserControl.RenderTransform><TransformGroup><RotateTransform Angle="{Binding Angle}"/><ScaleTransform ScaleX="{Binding ScaleX}" ScaleY="{Binding ScaleY}"/><TranslateTransform X="{Binding X}" Y="{Binding Y}"/></TransformGroup></UserControl.RenderTransform></UserControl>

When I position the Polyline partially over top the Circle and I move the mouse from being over nothing to being over the Polyline, the polyline "lights up".  And when I move the mouse to an area off the Polyline line segment, but not yet over the Circle that is behind, the Polyline goes back to its original color.  But if it then goes over the Circle, the Circle doesn't "light up" until I leave the "triangular" area of the Polyline and I'm JUST over the Circle.  In fact, it seems like I actually have to go a little further over in the circle before it lights up.

Anybody got a clue what is happening?