How to add Native UI : Windows.UI.Xaml.Controls.InkCanvas + Unexpected Behavior?

[giraffepoo]

I have been unable to get the drawing strokes to register/render on the InkCanvas as a Native UI component.

I've created the view manager as so: InkCanvasViewManager.cs

using Microsoft.ReactNative;
using Microsoft.ReactNative.Managed;
using Windows.UI;
using Windows.UI.Input.Inking;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace ReactNativeInk
{
    class InkCanvasViewManager : IViewManager
    {
        private InkCanvas inkCanvas;

        public string Name => "InkCanvasCS";

        public FrameworkElement CreateView()
        {
            inkCanvas = new InkCanvas();

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

            return inkCanvas;

        }
    }
}

I have gotten other components to work and render fine (Slider, InkToolBar, CalendarView), but just not this particular canvas.

Out of ideas for where the source of the problem could be. One caveat of the InkCanvas is that it requires inkCanvas.InkPresenter.InputDeviceTypes to be set in other for the ink strokes to render, is this somehow being undone after CreateView()?

Any help/pointers would be greatly appreciated. Thank you!

[asklar]

@giraffepoo can you validate whether the InkCanvas is making it into the xaml tree at all or not? If you run the test app with this module in Visual Studio and look at the Live Visual Tree (make sure to de-select the "Just My XAML" checkbox under Debug->Properties->XAML), does the InkCanvas show in the LVT? It's possible that if it is there but you can't see it, maybe it's being sized wrong (Check the Properties dialog in the live visual tree)? try hardcoding the width/height to ensure a non-zero size

[giraffepoo]

@asklar Yes I can verify that the InkCanvas exists on the XAML tree along with properties indicating it has a set size. I've tried hardcoding the size as well and that did not affect the outcome. I believe my instantiation of the InkCanvas component should be correct as well - it works as expected when instantiating it in the exact same way in a blank UWP app.

[asklar]

@giraffepoo thanks for checking :) Any chance you can put up your project somewhere so we can take a look?

[asklar]

Debugged this offline. The reason for input not making it to the ink canvas is because RNW adds a PerspectiveTransform3D to the root (see #3093), and inking bails out if there is any 3D transforms up the tree. I'm going to address this by providing an escape hatch in the meantime to turn off the perspective transform to allow adding controls that don't work in 3D scenes.