Xamarin.Forms MVVM WebView未加载：需两次旋转设备才显示内容

嘿，这个问题我之前也踩过坑！用WebView绑定HTML内容却要转两次设备才显示，大概率是绑定时机不对或者布局刷新没跟上。咱们先看看你的代码，拆解下可能的问题：

问题根源分析 #

1. 初始尺寸设置的时机不对：你在ViewModel构造函数里直接调用DevicePropertyChanged，但这时候页面布局还没完全初始化，WebView的尺寸虽然绑定了值，但实际渲染时可能还是0或者不正确的大小，导致HTML内容没法加载显示。
2. 硬编码尺寸的适配问题：你用Device.Info.PixelScreenSize获取像素尺寸，然后硬减固定值（150、50），但Xamarin.Forms用的是逻辑单位，不同设备像素密度不一样，这会导致计算出的尺寸不准确，WebView可能因为尺寸异常不渲染内容。
3. 内容刷新触发不及时：当Code设置后，WebView可能没收到绑定更新的通知，尤其是初始尺寸不对的时候，即使内容绑定了也不会渲染，两次旋转后尺寸更新才顺带触发了内容刷新。

针对性解决方案 #

方案1：用布局约束代替硬编码尺寸（最推荐）

别手动算高度了，让布局自动帮你分配空间！把顶部横幅和WebView放进Grid里，让WebView自动占满剩余空间，这样完全不用处理尺寸绑定：

修改你的XAML：

<Grid>
    <!-- 顶部横幅/标题栏，自动适应自身高度 -->
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <!-- 这里放你的横幅内容，比如标题Label -->
    <Label Grid.Row="0" Text="{Binding CodeName}" Style="{StaticResource HeaderStyle}" />

    <WebView Grid.Row="1" x:Name="WebView">
        <WebView.Source>
            <HtmlWebViewSource Html="{Binding Code}"/>
        </WebView.Source>
    </WebView>
</Grid>

然后ViewModel里可以删掉Height、Width属性和DevicePropertyChanged相关逻辑，省得维护这些硬编码的适配值，再也不用担心尺寸不对导致的内容不显示。

方案2：修复尺寸计算和绑定时机

如果你一定要手动控制尺寸，那得调整尺寸计算方式和初始化时机：

1. 用DeviceDisplay.MainDisplayInfo获取逻辑尺寸（适配像素密度）：

private void DevicePropertyChanged(object sender, PropertyChangedEventArgs e)
{
    var displayInfo = DeviceDisplay.MainDisplayInfo;
    // 转换为Xamarin.Forms用的逻辑单位
    var logicalWidth = displayInfo.Width / displayInfo.Density;
    var logicalHeight = displayInfo.Height / displayInfo.Density;

    switch (displayInfo.Orientation)
    {
        case DisplayOrientation.Portrait:
            Height = logicalHeight - 150; // 这里的150改成逻辑单位的高度
            Width = logicalWidth;
            break;
        case DisplayOrientation.Landscape:
            Height = logicalHeight - 50;
            Width = logicalWidth;
            break;
    }
    // 尺寸更新后，强制触发Code的绑定刷新，让WebView重新加载内容
    OnPropertyChanged(nameof(Code));
}

2. 延迟初始化内容，确保UI布局已经准备好：

public ErrorcodeDetailPageViewModel(Errorcode code)
{
    Device.Info.PropertyChanged += DevicePropertyChanged;
    // 放到UI线程延迟执行，等布局初始化完成再设置内容和尺寸
    Device.BeginInvokeOnMainThread(() =>
    {
        DevicePropertyChanged(null, null);
        Code = code.Content;
        CodeName = code.Label;
        CodeContent = code.Content;
    });
}

方案3：强制WebView刷新内容

如果上面的方法还不行，就在页面后台监听ViewModel的属性变化，强制WebView重新加载：

在你的页面代码（比如ErrorcodeDetailPage.xaml.cs）里添加：

protected override void OnBindingContextChanged()
{
    base.OnBindingContextChanged();
    if (BindingContext is ErrorcodeDetailPageViewModel vm)
    {
        vm.PropertyChanged += (s, e) =>
        {
            // 当Code或尺寸变化时，强制WebView刷新
            if (e.PropertyName == nameof(vm.Code) || e.PropertyName == nameof(vm.Height) || e.PropertyName == nameof(vm.Width))
            {
                Device.BeginInvokeOnMainThread(() => WebView.Reload());
            }
        };
    }
}

总结 #

最可能的原因就是初始时WebView尺寸不正确，导致内容无法渲染，两次旋转后尺寸才被正确应用并触发了内容刷新。推荐用方案1的布局约束方法，既简单又能避免各种适配问题，一劳永逸！

内容的提问来源于stack exchange，提问作者Felix Fischer