Xamarin Android加载图片后横屏时图片下方内容消失问题求助

问题根因 #

该异常为Xamarin.Android平台独有布局测量Bug：首次加载远程图片时，Image控件设置了Fill布局选项，系统未正确计算外层Grid的行高分配，导致图片所在的第一行占满全部可视区域，第二行的内容布局被挤出屏幕外。旋转屏幕会触发全局布局重绘，行高分配恢复正常，内容即可重新显示。 #

解决方案 #

可按优先级选择以下方案，也可组合使用：

• 方案1：明确外层Grid的行高分配规则
  给承载两个StackLayout的外层Grid添加明确的行定义，避免系统自动计算异常：

  <Grid.RowDefinitions>
      <!-- 图片行最大占50%屏幕高度，避免过度抢占空间，也可根据需求设为Height="Auto" -->
      <RowDefinition Height="0.5*" />
      <!-- 内容行占剩余高度 -->
      <RowDefinition Height="0.5*" />
  </Grid.RowDefinitions>
  

  如果将第一行设为Height="Auto"，建议同步给Image控件添加MaxHeight属性限制最大高度。
• 方案2：调整Image控件的缩放规则
  给Image添加Aspect属性，禁止图片无比例拉伸，同时限制最大高度：

  <Image x:Name="AnnouncementImage" 
         VerticalOptions="Fill"
         HorizontalOptions="Fill"
         Aspect="AspectFit"
         MaxHeight="250">
  </Image>
  

• 方案3：图片加载后强制触发布局重绘
  在C#代码给Image赋值Source后，手动触发页面全局布局重绘，修正首次测量异常：

  if (!string.IsNullOrWhiteSpace(_announcementDetails.ImageUrl))
  {
      this.DefaultLogo.IsVisible = false;
      this.AnnouncementImage.Source = _announcementDetails.ImageUrl;
      this.ImageLogo.IsVisible = true;
      // 新增强制布局重绘代码
      this.ForceLayout();
  }
  

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