如何在 UWP 上的 Xamarin.Forms WebView 中启用 WebGL？

Question

我是 Xamarin.Forms 的新手，尝试在我的 Windows 10 x64 v1803 机器上使用 WebView 和 UWP，但我看不出如何让它与 WebGL 一起工作。

使用 WebGL 的站点会显示一条消息，指出“您的视频卡不支持 WebGL，或者根本不显示图形内容。

这是 UWP 还是 WebView 本身的限制？

是否是 WebView 配置问题？

WebGL 可以在这台机器上的所有其他浏览器中运行。

Answer 1

UWP WebView 控件支持 WebGL。 msdn中有类似的issue case你可以参考。请尝试使用SeparateProcess模式的WebView来替换默认的。

public MainPage()
{
    this.InitializeComponent();
    var MyWebView = new WebView(WebViewExecutionMode.SeparateProcess);
    MyWebView.Source = new Uri("http://cycleblob.com/");
    this.RootGrid.Children.Add(MyWebView);
}

Answer 2

我遇到了同样的问题，但是使用较新的 Xamarin Forms 需要更多的探索才能使这个工作正常。但是，我确实喜欢他们将本机 WebView 解析器移回 UWP/iOS/Android 项目（作为本机 XAML 对象）的职责，而不是在共享项目中使用带有编译器指令的代码分支。

首先在共享项目中创建一个 HybridWebView class 以用作您的 WebForm 视图对象：

public class HybridWebView : Xamarin.Forms.WebView
{
    Action<string> action;

    public static readonly BindableProperty UriProperty = BindableProperty.Create(
        propertyName: "Uri",
        returnType: typeof(string),
        declaringType: typeof(HybridWebView),
        defaultValue: default(string));

    public string Uri
    {
        get { return (string)GetValue(UriProperty); }
        set { SetValue(UriProperty, value); }
    }

    public void RegisterAction(Action<string> callback)
    {
        action = callback;
    }

    public void Cleanup()
    {
        action = null;
    }

    public void InvokeAction(string data)
    {
        if (action == null || data == null)        
        {
            return;
        }
        action.Invoke(data);
    }
}

然后在 UWP 项目中，创建一个自定义渲染器，它将构建本机 WebView 并将事件中继回共享项目中的 WebForms 对象：

将它放在命名空间的顶部，link 带有自定义渲染器的 HybridWebView：

[assembly: ExportRenderer(typeof(HybridWebView), typeof(WebViewRenderer2))]

然后创建渲染器 class（对于 IOS 和 android 项目，如果您不使用此 class，它默认为标准本机控件对我来说工作得很好）：

public class WebViewRenderer2 : ViewRenderer<Xamarin.Forms.WebView, Windows.UI.Xaml.Controls.WebView>, IWebViewDelegate
    {
        Windows.UI.Xaml.Controls.WebView _control;

        public void LoadHtml(string html, string baseUrl)
        {

        }

        public void LoadUrl(string url)
        {

        }

        protected override void Dispose(bool disposing)
        {

        }

        protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.WebView> e)
        {
            if (_control == null) {
                _control = new Windows.UI.Xaml.Controls.WebView(WebViewExecutionMode.SeparateProcess);
                SetNativeControl(_control);
            }
        }

        protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            var xamWebView = sender as HybridWebView;
            switch(e.PropertyName.ToLower())
            {
                case "source":
                    var urlSource = xamWebView.Source as Xamarin.Forms.UrlWebViewSource;
                    _control.Source = new Uri(urlSource.Url);
                    break;
                case "width":
                    _control.Width = xamWebView.Width;
                    break;
                case "height":
                    _control.Height = xamWebView.Height;
                    break;
                case "isfocused":
                    var focused = xamWebView.IsFocused;
                    if (focused)
                        _control.Focus(FocusState.Programmatic);
                    else
                        _control.Focus(FocusState.Unfocused);
                    break;
            }
        }
    }

您还可以使用自定义渲染器注入脚本，您可以使用它从本机 webview 返回 Xamarin 应用程序，如下所示：HybridWebView Communication

如何在 UWP 上的 Xamarin.Forms WebView 中启用 WebGL？

How do I enable WebGL in Xamarin.Forms WebView on UWP?

windows

webview

webgl

xamarin.forms

uwp