Xamarin WPF .NET 5 显示 WebView2

Question

我正在尝试在 .NET 5 上的 Xamarin WPF 应用程序中显示 WebView2。

所以在启动时，我将 MainPage 设置为 Navigator，如下所示：

导航器.xaml：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:XamTestNET5.Views"
             x:Class="XamTestNET5.Navigator" Title="Here is a title">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="Auto"></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <StackLayout Grid.Row="0" Grid.Column="0" Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
            <Label FontSize="Medium">Hello</Label>
            <!--<local:PlaceHolderView></local:PlaceHolderView>-->
            <local:CustomWebBrowserView x:Name="browser" Source="https://www.google.com"></local:CustomWebBrowserView>
        </StackLayout>
        <StackLayout Grid.Row="1" Grid.Column="0" Orientation="Horizontal" HorizontalOptions="FillAndExpand" BackgroundColor="{StaticResource Primary}">
            <Button FontSize="Large" Text="Tab 1" BorderWidth="0" BorderColor="Transparent"></Button>
            <Button FontSize="Large" Text="Tab 2" BorderWidth="0" BorderColor="Transparent"></Button>
            <Button FontSize="Large" Text="Tab 3" BorderWidth="0" BorderColor="Transparent"></Button>
        </StackLayout>
    </Grid>
</ContentPage>

CustomWebBrowserView.xaml：

<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XamTestNET5.Views.CustomWebBrowserView">
  <ContentView.Content>
        <Grid></Grid>
  </ContentView.Content>
</ContentView>

CustomWebBrowserView.xaml.cs：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace XamTestNET5.Views
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class CustomWebBrowserView : ContentView
    {
        public static readonly BindableProperty SourceProperty = BindableProperty.Create(
          propertyName: "Source",
          returnType: typeof(string),
          declaringType: typeof(string),
          defaultValue: "");

        public string Source
        {
            get { return (string)GetValue(SourceProperty); }
            set { SetValue(SourceProperty, value); }
        }
        public CustomWebBrowserView()
        {
            InitializeComponent();
        }
    }
}

WPF 项目中的 WebBrowserRenderer.cs：

using Microsoft.Web.WebView2.Core;
using Microsoft.Web.WebView2.Wpf;
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.IO;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms.Platform.WPF;
using XamTestNET5.Views;
using XamTestNET5WPF.Renderers;

[assembly: ExportRenderer(typeof(CustomWebBrowserView), typeof(WebBrowserRenderer))]
namespace XamTestNET5WPF.Renderers
{
    public class WebBrowserRenderer : ViewRenderer<CustomWebBrowserView, WebView2>
    {
        WebView2 webView;
        CoreWebView2EnvironmentOptions options = new CoreWebView2EnvironmentOptions();
        CoreWebView2Environment env;
        String userDataFolder = Path.GetTempPath();

        public WebBrowserRenderer() : base()
        {
        }

        private void WebView_CoreWebView2Ready(object sender, EventArgs e)
        {
            this.webView.CoreWebView2.Navigate(@"https://www.bing.com");
        }

        protected async override void OnElementChanged(ElementChangedEventArgs<CustomWebBrowserView> e)
        {
            base.OnElementChanged(e);
            if (e.NewElement != null)
            {
                webView = new WebView2();
                env = await CoreWebView2Environment.CreateAsync("", userDataFolder, options);
                webView.CoreWebView2Ready += WebView_CoreWebView2Ready;
                webView.Source = new Uri(@"https://www.bing.com");
                webView.Visibility = System.Windows.Visibility.Visible;
                this.SetNativeControl(webView);
                await webView.EnsureCoreWebView2Async(env);
            }
        }

        protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            base.OnElementPropertyChanged(sender, e);
            if (e.PropertyName == nameof(CustomWebBrowserView.SourceProperty))
            {
                this.webView.Source = new Uri(Element.Source);
                this.webView.CoreWebView2.Navigate(Element.Source);
            }
        }
    }
}

我可以通过调试看到我得到了 WebView2，但它抹去了内容页面，只留下了标题。

如果我注释掉 CustomWebBrowserView 并放入 PlaceHolderView 存根，它看起来像这样：

<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XamTestNET5.Views.PlaceHolderView">
  <ContentView.Content>
      <StackLayout>
          <Label Text="Placeholder" />
      </StackLayout>
  </ContentView.Content>
</ContentView>

布局至少没有被抹杀，但当然没有 WebView2。

我也无法让 Shell 正常工作，但这是可以预料的： https://github.com/xamarin/Xamarin.Forms/issues/7377

所以我认为同时解决方法可能只是在应用程序中创建我自己的自定义导航，但我想在 WPF 中提供 WebView2 控件。 我在 WebBrowserRenderer 或 Xaml 中做错了吗？

Answer 1

将 CustomWebBrowserView 更改为以下内容，基于 View 而不是 ContentView ，现在一切正常，视图没有消失：

CustomWebBrowserView.Xaml：

<?xml version="1.0" encoding="UTF-8"?>
<View xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XamTestNET5.Views.CustomWebBrowserView">
</View>

CustomWebBrowserView.cs：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace XamTestNET5.Views
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class CustomWebBrowserView : View
    {
        public static readonly BindableProperty SourceProperty = BindableProperty.Create(
          propertyName: "Source",
          returnType: typeof(string),
          declaringType: typeof(string),
          defaultValue: "");

        public string Source
        {
            get { return (string)GetValue(SourceProperty); }
            set { SetValue(SourceProperty, value); }
        }
        public CustomWebBrowserView()
        {
            InitializeComponent();
        }
    }
}

导航器.xaml：

    <StackLayout Grid.Row="0" Grid.Column="0" Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
        <Label FontSize="Medium">Hello</Label>
        <!--<local:PlaceHolderView></local:PlaceHolderView>-->
        <local:CustomWebBrowserView HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" x:Name="browser" Source="https://www.sneauxkones.com"></local:CustomWebBrowserView>
    </StackLayout>