在 Xamarin Forms 中更改 BindableProperty 时未调用自定义控件 OnElementChanged

Question

我一直试图弄清楚如何在下次更改 BindableProperty 时调用自定义渲染器 OnElementChanged。

在我的情况下，为了理解目的而保持简短，我需要刷新 android、uwp、ios 渲染器中的 webview url。

第一次初始化该值有效，但稍后当 URL 更改时它不会调用。

因此，如果自定义渲染器类中有一个函数，那么我们可以调用并更新本机控件。

用 android 和 uwp 试过，但有同样的问题。一旦 url 加载进一步更改它不会刷新 webview。

所以为了示例，我提供了 UWP 渲染器，如果它在这里工作，那么类似的更改可以在 android 渲染器中完成。但不确定要在何处进行更改才能使其正常工作。

XAML

<StackLayout>
     <Entry Keyboard="Url" x:Name="txtUrl" Placeholder="Enter the URL" />

      <Button x:Name="ButtonImage" Text="Search"  Clicked="OnButtonClicked" />

     <local:HybridWebView x:Name="webView" />
</StackLayout>

xml文件

    public partial class WebVieDemo : ContentPage
    {
        public WebVieDemo()
        {
            InitializeComponent();
            webView.Uri = "https://www.101cookbooks.com/archives/blueberry-beet-pancakes-vegan-recipe.html";
        }

        private void OnButtonClicked(object sender, EventArgs e)
        {
            txtUrl.Text = "/sf/ask/107176541/";
            webView.Uri = txtUrl.Text; // doesn't refresh the webview
        }
    }

HybridWebView.cs

    public class HybridWebView : WebView
    {
        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 static readonly BindableProperty HtmlSourceProperty = BindableProperty.Create(
          propertyName: "HtmlSource",
          returnType: typeof(string),
          declaringType: typeof(HybridWebView),
          defaultValue: default(string));

        public string HtmlSource
        {
            get { return (string)GetValue(HtmlSourceProperty); }
            set { SetValue(HtmlSourceProperty, value); }
        }
    }

UWP 渲染器

[assembly: ExportRenderer(typeof(HybridWebView), typeof(WindowsWebViewRenderer))]
namespace DemoApp.UWP
{
    public class WindowsWebViewRenderer : ViewRenderer<HybridWebView, WebView>
    {
        HybridWebView hybridWebView = null;
        protected override void OnElementChanged(ElementChangedEventArgs<HybridWebView> e)
        {
            base.OnElementChanged(e);
            if (Control == null)
            {
                // Create the native control and use SetNativeControl
                var webView = new WebView();
                webView.LoadCompleted += WebView_LoadCompleted;
                SetNativeControl(webView);
            }
            if (e.OldElement != null)
            {
                // Cleanup resources and remove event handlers for this element.
            }
            if (e.NewElement != null)
            {
                // Use the properties of this element to assign to the native control, which is assigned to the base.Control property
                hybridWebView = e.NewElement;
                if (hybridWebView.Uri != null)
                    Control.Source = new Uri(e.NewElement.Uri);
            }
        }

        async private void WebView_LoadCompleted(object sender, Windows.UI.Xaml.Navigation.NavigationEventArgs e)
        {
            hybridWebView.HtmlSource = await Control.InvokeScriptAsync("eval", new string[] { "document.documentElement.outerHTML;" });
        }
    }
}

Answer 1

在您的自定义渲染器中，您需要为此覆盖 OnElementPropertyChanged，而不是 OnElementChanged，例如：

    protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
    {
        base.OnElementPropertyChanged(sender, e);
        if (e.PropertyName == HybridWebView.UriProperty.PropertyName)
        {
            if (Control.Uri != null)
                Control.Source = new Uri(Control.Uri);
        }
    }