How to set pointer-events style on custom FrameworkElement

Question

I'm trying to create a file dialog in a WebAssembly application built with Uno. I've added a custom FrameworkElement to create <input type="file"> in the page like so:

[HtmlElementAttribute("input")]
public sealed partial class PicInputControl : FrameworkElement
{
    public PicInputControl()
    {
      this.SetHtmlAttribute("type", "file");
      this.SetHtmlAttribute("accept", "image/png, image/jpg, image/bmp, image/jpeg");
      this.ClearCssStyle("pointer-events");
    }
}

When the application runs, the css style option pointer-events is set to none by default, even when clearing the pointer-events style. This needs to be auto in order to be able to interact with the ui element with the mouse to click it.

How should I go about setting the pointer-events on this control?

Answer 1

The pointer-events CSS style is overridden by the Uno framework at runtime based on the WinUI rules for hit testing, so changing it from the ctor won't have any effect.

To have it set to auto, you need to ensure that your custom element qualifies as 'hit visible'. An easy way to do that is to set a non-null Background value.

    [HtmlElementAttribute("input")]
    public sealed partial class PicInputControl : FrameworkElement
    {
        public PicInputControl()
        {
            this.SetHtmlAttribute("type", "file");
            this.SetHtmlAttribute("accept", "image/png, image/jpg, image/bmp, image/jpeg");
            this.ClearCssStyle("pointer-events");
            Background = SolidColorBrushHelper.Transparent;
        }
    }