Xamarin Forms WebView占满屏幕，自定义顶部布局无法显示求助

我来帮你搞定这个问题！你遇到的WebView占满整个屏幕、顶部StackLayout看不到的情况，核心是代码里的一个关键错误，咱们一步步修复：

问题根源 #

你在OnAppearing方法里执行了Content = webView;，这行代码会直接替换掉XAML中定义的整个Grid布局——相当于把页面内容直接换成了WebView，那顶部的StackLayout自然就被完全覆盖了。

修复步骤 #

1. 移除覆盖页面内容的代码 #

直接删掉Content = webView;这一行，XAML里已经把WebView放在Grid的第二行，只要给WebView设置好Source就行，完全不用替换整个页面内容。

2. 优化导航栏隐藏的时机 #

你用NavigationPage.SetHasNavigationBar(this, false);隐藏默认导航栏是对的，但把它移到页面构造函数里会更稳妥，避免在页面出现时才触发可能的延迟：

public HNBmotorPayment()
{
    InitializeComponent();
    NavigationPage.SetHasNavigationBar(this, false);
}

3. 完善WebView的布局属性 #

确保WebView的VerticalOptions设置为FillAndExpand，让它只占据Grid第二行的剩余空间，不会溢出到顶部的StackLayout区域。修改XAML中的WebView：

<WebView Grid.Row="1" 
         x:Name="webView" 
         HorizontalOptions="FillAndExpand" 
         VerticalOptions="FillAndExpand"
         Navigating="webView_Navigating" 
         Navigated="MywebView_Navigated"/>

修改后的完整代码 #

XAML代码 #

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns:other="clr-namespace:CustApp.CusApp.Dushan.Other" 
             xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             xmlns:d="http://xamarin.com/schemas/2014/forms/design" 
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             mc:Ignorable="d" 
             EnableBackButtonOverride="True" 
             x:Class="CustApp.Views.GeneralPayments.MotorPayments.hnb.HNBmotorPayment">
    <ContentPage.Content>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="100"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <StackLayout Grid.Row="0" 
                         VerticalOptions="Start" 
                         HorizontalOptions="FillAndExpand" 
                         Orientation="Horizontal" 
                         Padding="10,5,10,5">
                <Image HorizontalOptions="StartAndExpand" Source="pdfDown.png"/>
                <Label HorizontalOptions="CenterAndExpand" Text="ALL"/>
                <Image HorizontalOptions="EndAndExpand" Source="pdfDown.png"/>
            </StackLayout>
            <WebView Grid.Row="1" 
                     x:Name="webView" 
                     HorizontalOptions="FillAndExpand"
                     VerticalOptions="FillAndExpand"
                     Navigating="webView_Navigating" 
                     Navigated="MywebView_Navigated"/>
        </Grid>
    </ContentPage.Content>
</ContentPage>

后台代码 #

public partial class HNBmotorPayment : ContentPage
{
    private bool isFirstRun = true;
    private string jsonOutput;
    private string TempUrl;
    private object payData; // 你的自定义数据对象

    public HNBmotorPayment()
    {
        InitializeComponent();
        NavigationPage.SetHasNavigationBar(this, false);
    }

    protected override void OnAppearing()
    {
        base.OnAppearing();
        if (isFirstRun)
        {
            jsonOutput = JsonConvert.SerializeObject(payData);
            var urlSource = new UrlWebViewSource();
            string url = DependencyService.Get<IBaseUrl>().Get();
            TempUrl = Path.Combine(url, "xamarinhtmlmotor.html");
            urlSource.Url = TempUrl;
            webView.Source = urlSource;
            isFirstRun = false;
            // 已移除Content = webView;
        }
    }
}

额外说明 #

修改完成后，页面会先渲染顶部的StackLayout作为自定义导航栏，WebView会乖乖占据剩余的屏幕空间，不会再覆盖顶部区域。关于iOS端的测试，目前的修改已经解决了核心布局问题，后续如果遇到iOS上WebView的特殊适配需求，再针对性调整即可。

内容的提问来源于stack exchange，提问作者D.madushanka