如何在自定义 FrameworkElement 上设置指针事件样式

Question

我正在尝试使用 Uno 在 WebAssembly 应用程序 built 中创建一个文件对话框。我添加了一个自定义 FrameworkElement 以在页面中创建 <input type="file">，如下所示：

[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");
    }
}

应用程序运行时，css 样式选项 pointer-events 默认设置为 none，即使清除 pointer-events 样式也是如此。这需要 auto 才能用鼠标与 ui 元素交互以单击它。

我应该如何在此控件上设置指针事件？

Answer 1

pointer-events CSS 样式在运行时是 overridden by the Uno framework 基于命中测试的 WinUI 规则，因此从 ctor 更改它不会有任何效果。

要将其设置为 auto，您需要确保您的自定义元素符合 'hit visible'。一个简单的方法是设置一个非空 Background 值。

    [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;
        }
    }

如何在自定义 FrameworkElement 上设置指针事件样式

How to set pointer-events style on custom FrameworkElement

c#

wpf

uwp

uno-platform