如何在Xamarin.Forms中将WebView背景设置为白色（PDF显示场景）

嘿，这个问题我熟！在Xamarin.Forms里要把显示PDF的WebView深色背景改成白色，得针对不同平台做自定义渲染器——因为原生WebView在Android、iOS这些平台的底层实现不一样，直接改Forms层的背景色往往不生效。下面一步步来实现：

1. 先在共享项目里定义自定义WebView #

先创建一个继承自WebView的子类，用来标记我们要自定义的控件：

using Xamarin.Forms;

namespace YourAppNamespace
{
    public class CustomPdfWebView : WebView
    {
        // 不需要额外属性，只是作为标识让渲染器识别
    }
}

然后在XAML里用这个自定义控件代替原生WebView：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:YourAppNamespace"
             x:Class="YourAppNamespace.MainPage">
    <!-- 替换成你的PDF路径或URL -->
    <local:CustomPdfWebView Source="your-pdf-file-path-or-url" />
</ContentPage>

2. Android平台自定义渲染器 #

在Android项目里创建渲染器类，修改原生WebView的背景：

using Android.Content;
using Android.Webkit;
using YourAppNamespace;
using YourAppNamespace.Droid;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

[assembly: ExportRenderer(typeof(CustomPdfWebView), typeof(CustomPdfWebViewRenderer))]
namespace YourAppNamespace.Droid
{
    public class CustomPdfWebViewRenderer : WebViewRenderer
    {
        public CustomPdfWebViewRenderer(Context context) : base(context) { }

        protected override void OnElementChanged(ElementChangedEventArgs<WebView> e)
        {
            base.OnElementChanged(e);

            if (Control != null)
            {
                // 设置WebView本身的背景为白色
                Control.SetBackgroundColor(Android.Graphics.Color.White);
                // 同时设置WebSettings里的背景色，避免网页加载时的深色过渡
                Control.Settings.SetBackgroundColor(Android.Graphics.Color.White);
            }
        }
    }
}

3. iOS平台自定义渲染器 #

iOS这边要处理WKWebView和它的ScrollView，防止滚动时露出深色背景：

using YourAppNamespace;
using YourAppNamespace.iOS;
using WebKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

[assembly: ExportRenderer(typeof(CustomPdfWebView), typeof(CustomPdfWebViewRenderer))]
namespace YourAppNamespace.iOS
{
    public class CustomPdfWebViewRenderer : WkWebViewRenderer
    {
        protected override void OnElementChanged(VisualElementChangedEventArgs e)
        {
            base.OnElementChanged(e);

            if (Control != null)
            {
                // 设置WKWebView背景为白色
                Control.BackgroundColor = UIKit.UIColor.White;
                // 别忘了设置滚动视图的背景色，不然滚动时会露底色
                Control.ScrollView.BackgroundColor = UIKit.UIColor.White;
            }
        }
    }
}

4. 可选：UWP平台处理 #

如果你的项目支持UWP，对应的渲染器代码如下：

using YourAppNamespace;
using YourAppNamespace.UWP;
using Xamarin.Forms;
using Xamarin.Forms.Platform.UWP;

[assembly: ExportRenderer(typeof(CustomPdfWebView), typeof(CustomPdfWebViewRenderer))]
namespace YourAppNamespace.UWP
{
    public class CustomPdfWebViewRenderer : WebViewRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<WebView> e)
        {
            base.OnElementChanged(e);

            if (Control != null)
            {
                Control.Background = new Windows.UI.Xaml.Media.SolidColorBrush(Windows.UI.Colors.White);
            }
        }
    }
}

额外小技巧：如果PDF加载后还有深色区域 #

要是上面的设置后，PDF显示区域还是有深色，你可以尝试用HTML包裹PDF，强制设置网页背景：
比如在加载PDF时，用类似下面的代码替换直接加载URL：

// 示例：在共享项目的CustomPdfWebView里添加加载逻辑，或者在渲染器里处理
var pdfUrl = "your-pdf-url";
var htmlWrapper = $@"
<html>
    <body style='background-color:white; margin:0; padding:0;'>
        <embed src='{pdfUrl}' width='100%' height='100%' type='application/pdf'>
    </body>
</html>";
webView.LoadHtmlContent(htmlWrapper);

这样就能确保整个WebView区域都是纯白色的啦！

内容的提问来源于stack exchange，提问作者Ishara Lakshitha