Question

我是Xamarin.Forms的新手，并尝试在具有UWP的Windows 10 x64 v1803计算机上使用WebView，但是我看不到如何使其与WebGL一起使用。

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

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

这是WebView配置问题吗？

WebGL可在该计算机上的所有其他浏览器中使用。

Answer 1

UWP WebView控件支持WebGL。您可以参考msdn中类似的issue case。请尝试使用SeparateProcess模式的WebView替换默认的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类以用作您的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并将事件中继回Shared项目中的WebForms对象：

将其放在命名空间的顶部，以将HybridWebView与Custom Renderer链接：

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

然后创建renderer类（对于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;
            }
        }
    }

您还可以使用Custom Renderer注入脚本，并且可以使用它从本机Web视图传递回Xamarin App，如下所示：HybridWebView Communication

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

2 个答案: