InkCanvas does not work as expected in Button Flyout

Question

I paired an InkCanvas control with an InkTookbar control inside a button flyout as follows...

<Button>
   <Button.Flyout>
      <Flyout>
         <Grid Height="300">
            <Grid.RowDefinitions>
               <RowDefinition Height="Auto" />
               <RowDefinition Height="*" />
            </Grid.RowDefinitions>
           <InkToolbar x:Name="inkToolbar"
                               Grid.Row="0"
                               TargetInkCanvas="{x:Bind inkCanvas}" />
           <InkCanvas x:Name="inkCanvas"
                              Grid.Row="1"/>
         </Grid>
      </Flyout>
   </Button.Flyout>
</Button>

I found that the InkCanvas control does not respond to mouse input.

I tried a couple of things:

1. Binding the OverlayInputPassThroughElement property of the Flyout to the InkCanvas. Then I realized, this makes no sense since the InkCanvas is not underneath the flyout's overlay.

2. Setting the AllowFocusOnInteraction property of InkCanvas to True, but this had no effect.

How can InkCanvas become responsive inside a Flyout?

Answer 1

For Incanvas to reponce to your mouse input you have to set input device

inkCanvas.InkPresenter.InputDeviceTypes = Windows.UI.Core.CoreInputDeviceTypes.Mouse | Windows.UI.Core.CoreInputDeviceTypes.Pen | Windows.UI.Core.CoreInputDeviceTypes.Touch;