IsMouseOver not triggering

Question

This question is related to another question that I just barely asked on SO as well.

I have a Canvas with both a Path and a TextBlock in it.

<Canvas>
    <Path Name="pathNodeType" StrokeThickness="1">
        <Path.Style>
            <Style>
                <Setter Property="Path.Stroke" Value="Black" />
                <Setter Property="Path.Fill" Value="LightGray" />
                <Style.Triggers>
                    <Trigger Property="Canvas.IsMouseOver" Value="True">
                        <Setter Property="Path.Stroke" Value="Blue" />
                        <Setter Property="Path.Fill" Value="LightBlue" />
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Path.Style>
        <Path.Data>
            <PathGeometry>
                <PathGeometry.Figures>
                    <PathFigureCollection>
                        <PathFigure IsClosed="True" StartPoint="20,40">
                            <PathFigure.Segments>
                                <PathSegmentCollection>
                                    <ArcSegment Size="10,10" RotationAngle="45" IsLargeArc="True"  SweepDirection="Clockwise"  Point="50,40" />
                                    <LineSegment Point="50,60" />
                                    <LineSegment Point="20,60" />
                                </PathSegmentCollection>
                            </PathFigure.Segments>
                        </PathFigure>
                    </PathFigureCollection>
                </PathGeometry.Figures>
            </PathGeometry>
        </Path.Data>
    </Path>
    <TextBlock HorizontalAlignment="Left" Margin="22,40,0,0" TextWrapping="Wrap" Text="AND" VerticalAlignment="Top" FontWeight="Bold"/>
  </Canvas>

The IsMouseOver property of the canvas triggers the path style as I expect it to when the mouse pointer is over the drawn path. However, when the mouse pointer is over the textblock (which is positioned right smack in the middle of the drawn path) then the path style does not trigger as I expect it to.

Why does it not trigger? The textblock resides within the canvas, so technically speaking isn't the mouse pointer over the canvas as well?

Thanks in advance for any help on this.

Answer 1

The reason is that, you set the Trigger's Property to Canvas.IsMouseOver, so it will fire when the Canvas is Mouser Over. But as you set the Trigger in the Path's Style, this will limited within the area of the Path.

I know the IsMouseOver is a Property, but i want to use MouseEnter as an example. MouseEnter is a Routed Event, so when the mouse is hover the TextBlock, it will fire as Routed Event, the TextBlock's MouseEnter Event will fire, and maybe the TextBlock's IsMouseOver became true, not the Path and the Canvas. Because now the TextBlock's ZIndex is the highest.

So, what we need to do is let the TextBlock's IsMouseOver don't change when it get hovered.

We can set the TextBlock's IsHitTestVisible="False";

And the Code can be like this: I have tested this code, it works!

<Canvas Background="Transparent">
    <Path Name="PathNodeType" StrokeThickness="1">
        <Path.Style>
            <Style TargetType="Path">
                <Setter Property="Stroke" Value="Black" />
                <Setter Property="Fill" Value="LightGray" />
                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Stroke" Value="Blue" />
                        <Setter Property="Fill" Value="LightBlue" />
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Path.Style>
        <Path.Data>
            <PathGeometry>
                <PathGeometry.Figures>
                    <PathFigureCollection>
                        <PathFigure IsClosed="True" StartPoint="20,40">
                            <PathFigure.Segments>
                                <PathSegmentCollection>
                                    <ArcSegment IsLargeArc="True"
                                                Point="50,40"
                                                RotationAngle="45"
                                                Size="10,10"
                                                SweepDirection="Clockwise" />
                                    <LineSegment Point="50,60" />
                                    <LineSegment Point="20,60" />
                                </PathSegmentCollection>
                            </PathFigure.Segments>
                        </PathFigure>
                    </PathFigureCollection>
                </PathGeometry.Figures>
            </PathGeometry>
        </Path.Data>
    </Path>
    <TextBlock Margin="22,40,0,0"
               HorizontalAlignment="Left"
               VerticalAlignment="Top"
               FontWeight="Bold"
               Text="AND" IsHitTestVisible="False"
               TextWrapping="Wrap" />
</Canvas>