Pointer events not triggered on UI Elements in custom control

Question

I am creating an application with a UserControl containing multiple UI Elements. The UserControl is rendered into a StackPanel using ItemsControl since the number of UserControls to be rendered depends on user's input.

The basic XAML in the UserControl is as follows.

<Grid x:Name="Viewport" VerticalAlignment="Top" HorizontalAlignment="Center">
    <Border x:Name="ViewportBorder" Background="White" BorderThickness="2, 2, 2, 2" BorderBrush="#FF353334" />
    <Image x:Name="Image" Margin="0" UseLayoutRounding="True" ManipulationMode="Scale"/>
    <InkCanvas x:Name="InkCanvas" />
    <Canvas x:Name="SelectionCanvas" CompositeMode="SourceOver" />
</Grid>

I want to change the cursor icon when user is hovering over the SelectionCanvas (based on a condition check in my case as you might see in the source). It seemed pretty straight forward so I tried to use PointerEntered & PointerExited events to capture & release the pointer from the SelectionCanvas. And PointerMoved to change the cursor icon. But it seems that none of the events were triggering.

I tried binding to the Viewport grid element as well but no luck in that too.

I'm not sure what I missed here. Could someone please help me on this? Any help is much appreciated. Please find the complete source code here.

• Please note that a sample PDF is included into the startup project /Resources which you'll have to open from the app.

Answer 1

The PointerEntered and PointerExited events are raised provided that the area that is supposed to raise them is painted so try to set the Background property of the Canvas to some brush like for example Transparent:

<Canvas x:Name="SelectionCanvas" CompositeMode="SourceOver"             
        Background="Transparent"             
        PointerEntered="SelectionCanvas_PointerEntered"
        ...