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

Question

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

使用WebGL的网站要么显示“您的显卡不支持WebGL”的消息，要么根本不显示任何图形内容。

这是UWP或WebView本身的限制吗？

还是WebView的配置问题？

在该机器上的所有其他浏览器中都可以正常使用WebGL。

- Clancy Merrick

Answer 1

我遇到了同样的问题，但是使用较新的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

- Bryan Lyman

Answer 2

UWP的WebView控件支持WebGL。在msdn中有类似的问题案例可供参考。请尝试使用SeparateProcess模式的WebView来替换默认的控件。

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

- Nico Zhu

---

谢谢！在XAML中是否可以指定SeparateProcess模式？ - Clancy Merrick

这个无法在XAML中指定，我认为你可以自定义WebViewRenderer并使用SeparateProcess进行初始化。 - Nico Zhu

谢谢Nico - 问题已经得到解答，这将是一个很大的帮助 :-) - Clancy Merrick