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

【问题标题】：How do I enable WebGL in Xamarin.Forms WebView on UWP?如何在 UWP 上的 Xamarin.Forms WebView 中启用 WebGL？
【发布时间】：2018-12-03 17:07:51
【问题描述】：

我是 Xamarin.Forms 的新手，并尝试在我的带有 UWP 的 Windows 10 x64 v1803 机器上使用 WebView，但我不知道如何让它与 WebGL 一起使用。

使用 WebGL 的网站要么显示“您的视频卡不支持 WebGL，要么根本不显示图形内容。

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

是 WebView 配置问题吗？

WebGL 适用于这台机器上的所有其他浏览器。

【问题讨论】：

标签： windows webview xamarin.forms uwp webgl

【解决方案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);
}

【讨论】：

谢谢！ XAML中是否可以指定SeparateProcess模式？
这不能在xaml中指定，我想你可以自定义WebViewRenderer并用SeparateProcess初始化它。
谢谢 Nico - 这个问题已经得到解答，将会很有帮助:-)

【解决方案2】：

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

首先在共享项目中创建一个 HybridWebView 类以用作您的 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 对象：

将其放在命名空间的顶部，以将 HybridWebView 与自定义渲染器链接：

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

然后创建渲染器类（对于 IOS 和 android 项目，如果你不考虑这个类，它默认为标准的原生控件，这对我来说似乎可以正常工作）：

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

【讨论】：