Xamarin WPF .NET 5 отображает WebView2

ProgramBox

Xamarin WPF .NET 5 отображает WebView2

Post author:admin
Запись опубликована:24 октября, 2022
Post category:Вопросы по программированию

#c# #wpf #.net-core #xamarin.forms

#c# #wpf #.net-ядро #xamarin.forms

Вопрос:

Я пытаюсь отобразить WebView2 в приложении Xamarin WPF на .NET 5.

Итак, при запуске я установил для главной страницы значение Navigator, которое выглядит следующим образом:

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>

Пользовательский веб-браузер.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>

Пользовательский веб-браузер.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();
        }
    }
}

WebBrowserRenderer.cs в проекте WPF:

 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, но он стирает страницу содержимого, оставляя только заголовок.

Если я закомментирую пользовательский веб-браузер и вставлю заглушку 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.

Я тоже не могу заставить оболочку работать правильно, но этого следовало ожидать: https://github.com/xamarin/Xamarin .Формы / проблемы /7377

Итак, я подумал, что обходным путем в то же время может быть просто создание моей собственной пользовательской навигации в приложении, но я хочу предоставить элементы управления WebView2 в WPF. Я делаю что-то не так в WebBrowserRenderer или Xaml?

1. Примечание: Если я назову это.WebView. CoreWebView2.OpenDevToolsWindow(); из WebView_CoreWebView2Ready я открываю окна инструментов разработки для Bing, но я не вижу сайт, отображаемый в представлении WPF, а страница WPF была удалена, оставив только заголовок.

Ответ №1:

Измените пользовательский веб-браузер на следующий, основываясь на View, а не на contentView, и теперь все работает без стирания представления:

Пользовательский веб-браузер.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>

Пользовательский webbrowserview.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();
        }
    }
}

Navigator.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>