.NET MAUI Custom WebView Content Not Visible Inside ScrollView on Android Platform - Stack Overflow

admin管理员组

文章数量:1246636

I am using a Custom WebView in my .NET MAUI application to display HTML content on Android. However, when the WebView is placed inside a ScrollView, the content does not appear on the UI. If I remove the ScrollView, the WebView content is visible, but I need to keep the ScrollView for layout purposes.

How can I make the WebView content visible while keeping the ScrollView?

My XAML Code:

<Frame 
Margin="10,0,10,0"
x:Name="android_uwp_layout"
IsVisible="False"
Padding="5"
CornerRadius="20"
Grid.Row="1">
<ScrollView
    Orientation="Vertical"
    VerticalOptions="FillAndExpand">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <!-- Background Image -->
        <Image Aspect="Fill" HorizontalOptions="FillAndExpand" Grid.Row="0" Source="ic_daily_reading_new_bg_xx.png"/>
        
        <!-- WebView -->
        <local:DailyReadingAndroidWebView  
            x:Name="mywebview"
            Grid.Row="0"
            BackgroundColor="Transparent"
            HorizontalOptions="FillAndExpand"
            VerticalOptions="FillAndExpand"/>

        <!-- Other UI Elements -->
    </Grid>
</ScrollView>

Custom WebView Renderer (Android):

public class DailyReadingAndroidRenderer : WebViewRenderer
{
    public DailyReadingAndroidRenderer(Context context) : base(context)
    {
    }

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

        if (Control != null)
        {
            // Enable JavaScript and set other WebView settings
            Control.Settings.DefaultFontSize = 25;
            Control.Settings.JavaScriptEnabled = true;

            // Make WebView background transparent
            Control.SetBackgroundColor(Android.Graphics.Color.Transparent);
            Control.SetLayerType(Android.Views.LayerType.Software, null);
            Control.Settings.SetSupportZoom(false);

            // Inject custom CSS for transparency
            string makeTransparentScript = @"
                let style = document.createElement('style');
                style.innerHTML = 
                    @font-face {
                        font-family: 'CustomFont';
                        src: url('file:///android_asset/Poppins-Light.ttf');
                    }
                    body {
                        background-color: transparent !important;
                        color: black !important;
                        font-family: 'CustomFont', sans-serif !important;
                    }
                    h4 {
                        color: #679E18 !important;
                    }
                ;
                document.head.appendChild(style);
            ";

            Control.SetWebViewClient(new CustomWebViewClient(makeTransparentScript));
        }
    }

    private class CustomWebViewClient : WebViewClient
    {
        private readonly string _script;

        public CustomWebViewClient(string script)
        {
            _script = script;
        }

        public override void OnPageFinished(Android.Webkit.WebView view, string url)
        {
            base.OnPageFinished(view, url);

            // Execute JavaScript to inject CSS
            view.EvaluateJavascript(_script, null);
        }
    }
}

How can I make the WebView content visible while keeping the ScrollView? Is there a workaround or any missing configuration in my custom renderer?

I am using a Custom WebView in my .NET MAUI application to display HTML content on Android. However, when the WebView is placed inside a ScrollView, the content does not appear on the UI. If I remove the ScrollView, the WebView content is visible, but I need to keep the ScrollView for layout purposes.

How can I make the WebView content visible while keeping the ScrollView?

My XAML Code:

<Frame 
Margin="10,0,10,0"
x:Name="android_uwp_layout"
IsVisible="False"
Padding="5"
CornerRadius="20"
Grid.Row="1">
<ScrollView
    Orientation="Vertical"
    VerticalOptions="FillAndExpand">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <!-- Background Image -->
        <Image Aspect="Fill" HorizontalOptions="FillAndExpand" Grid.Row="0" Source="ic_daily_reading_new_bg_xx.png"/>
        
        <!-- WebView -->
        <local:DailyReadingAndroidWebView  
            x:Name="mywebview"
            Grid.Row="0"
            BackgroundColor="Transparent"
            HorizontalOptions="FillAndExpand"
            VerticalOptions="FillAndExpand"/>

        <!-- Other UI Elements -->
    </Grid>
</ScrollView>

Custom WebView Renderer (Android):

public class DailyReadingAndroidRenderer : WebViewRenderer
{
    public DailyReadingAndroidRenderer(Context context) : base(context)
    {
    }

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

        if (Control != null)
        {
            // Enable JavaScript and set other WebView settings
            Control.Settings.DefaultFontSize = 25;
            Control.Settings.JavaScriptEnabled = true;

            // Make WebView background transparent
            Control.SetBackgroundColor(Android.Graphics.Color.Transparent);
            Control.SetLayerType(Android.Views.LayerType.Software, null);
            Control.Settings.SetSupportZoom(false);

            // Inject custom CSS for transparency
            string makeTransparentScript = @"
                let style = document.createElement('style');
                style.innerHTML = 
                    @font-face {
                        font-family: 'CustomFont';
                        src: url('file:///android_asset/Poppins-Light.ttf');
                    }
                    body {
                        background-color: transparent !important;
                        color: black !important;
                        font-family: 'CustomFont', sans-serif !important;
                    }
                    h4 {
                        color: #679E18 !important;
                    }
                ;
                document.head.appendChild(style);
            ";

            Control.SetWebViewClient(new CustomWebViewClient(makeTransparentScript));
        }
    }

    private class CustomWebViewClient : WebViewClient
    {
        private readonly string _script;

        public CustomWebViewClient(string script)
        {
            _script = script;
        }

        public override void OnPageFinished(Android.Webkit.WebView view, string url)
        {
            base.OnPageFinished(view, url);

            // Execute JavaScript to inject CSS
            view.EvaluateJavascript(_script, null);
        }
    }
}

How can I make the WebView content visible while keeping the ScrollView? Is there a workaround or any missing configuration in my custom renderer?

• android
• webview
• maui
• scrollview

Share Improve this question Follow asked Feb 17 at 9:49 Matthew PansMatthew Pans 81911 gold badge1111 silver badges2727 bronze badges 1

• Did you debug to check if the DailyReadingAndroidWebView's height is -1 or not? – Liyun Zhang - MSFT Commented Feb 18 at 1:03

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 2

WebView’s content is too large to be rendered using the software layer (drawing cache), which is limited in size. The line causing this is:

Control.SetLayerType(Android.Views.LayerType.Software, null);

Why This Happens

Software Layer Limits: The software layer (drawing cache) has a fixed size limit. In your case, the WebView requires about 7MB but only about 4.6MB is available.

Transparency Requirements: That line was added to make the WebView's background transparent. However, forcing software rendering can lead to issues with large content.

How to Fix

Remove the Software Layer Setting:

Try commenting out or removing:

Control.SetLayerType(Android.Views.LayerType.Software, null);

This will let the WebView use hardware acceleration, which typically can handle larger content sizes. Hardware acceleration also supports transparency if handled via CSS.

Handle Transparency in CSS:

Since you’re injecting CSS to set the background transparent, you should still be able to maintain transparency without forcing software rendering.

For example:

body {
    background-color: transparent !important;
    color: black !important;
    font-family: 'CustomFont', sans-serif !important;
}

Consider Reducing Content Size:

If for any reason you need to keep software rendering, consider reducing the content’s size or splitting it into smaller parts, though usually the first option is the best.

Updated Renderer Code

Here’s your renderer with the software layer setting removed:

public class DailyReadingAndroidRenderer : WebViewRenderer
{
    public DailyReadingAndroidRenderer(Context context) : base(context)
    {
    }

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

        if (Control != null)
        {
            // Set default font size
            Control.Settings.DefaultFontSize = 25;
            Control.Settings.JavaScriptEnabled = true;

            // Make WebView background transparent via CSS; no need to force software layer
            Control.SetBackgroundColor(Android.Graphics.Color.Transparent);
            // Removed: Control.SetLayerType(Android.Views.LayerType.Software, null);
            Control.Settings.SetSupportZoom(false);

            string makeTransparentScript = @"
                let style = document.createElement('style');
                style.innerHTML = `
                    @font-face {
                        font-family: 'CustomFont';
                        src: url('file:///android_asset/Poppins-Light.ttf');
                    }
                    body {
                        background-color: transparent !important;
                        color: black !important;
                        font-family: 'CustomFont', sans-serif !important;
                    }
                    h4 {
                        color: #679E18 !important;
                    }
                `;
                document.head.appendChild(style);
            ";

            Control.SetWebViewClient(new CustomWebViewClient(makeTransparentScript));
        }
    }

    private class CustomWebViewClient : WebViewClient
    {
        private readonly string _script;

        public CustomWebViewClient(string script)
        {
            _script = script;
        }

        public override void OnPageFinished(Android.Webkit.WebView view, string url)
        {
            base.OnPageFinished(view, url);
            view.EvaluateJavascript(_script, null);
        }
    }
}

本文标签： NET MAUI Custom WebView Content Not Visible Inside ScrollView on Android PlatformStack Overflow