ListView 的图像背景未正确显示

Question

我有一个 xaml 页面来显示一个标签和一个带有分组选项的列表视图。正如我所料，整个页面都会显示一个背景图像。但是，该页面适用于 Android 模拟器（图像背景显示在整个页面上）但不适用于 iOS 模拟器。在iOS模拟器上，图像背景显示在顶部标签元素下，带有“History Facts”文本，但在我标记/绘制在红框内的ListView区域下看不到。白色背景填充在 ListView 下。请参阅随附的屏幕截图。请帮忙。谢谢。

我的 xaml 文件标记：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:Quiz;assembly=Quiz"
             xmlns:converter="clr-namespace:Quiz.Converters;assembly=Quiz"
             x:Class="Quiz.QuizResultPage">

  <ContentPage.Padding>
    <OnPlatform x:TypeArguments="Thickness" iOS="10, 20, 10, 0" Android="10, 0" WinPhone="10, 0" />
  </ContentPage.Padding>

  <ContentPage.Resources>
    <ResourceDictionary>
      <converter:BoolToStringConverter x:Key="boolToString" TrueText="Yes" FalseText="No" />
      <converter:BoolToColorConverter x:Key="boolToColor"   TrueColor="Green" FalseColor="Red"/>

      <Style TargetType="View" x:Key="labelBase">
        <Setter Property="HorizontalOptions" Value="Center"></Setter>
        <Setter Property="VerticalOptions" Value="Center"></Setter>
      </Style>

      <Style TargetType="Label" x:Key="labelTopTitleStyle" BasedOn="{StaticResource labelBase}">
        <Setter Property="FontSize" Value="Large"></Setter>        
      </Style>

      <Style TargetType="Label" x:Key="questionStyle">
        <Setter Property="FontFamily" Value="Courgette-Regular"></Setter>
        <Setter Property="TextColor" Value="White"></Setter>
        <Setter Property="FontAttributes" Value="Bold"></Setter>
        <Setter Property="FontSize" Value="Medium"></Setter>
      </Style>

      <Style TargetType="Label" x:Key="labelTimerStyle" BasedOn="{x:StaticResource labelBase}">
        <Setter Property="TextColor" Value="Yellow"></Setter>
        <Setter Property="FontAttributes" Value="Bold"></Setter>
        <Setter Property="FontSize" Value="Medium"></Setter>
        <Setter Property="BackgroundColor" Value="Olive"></Setter>
      </Style>

      <Style x:Key="styleAnswer" TargetType="Label">
        <Setter Property="FontFamily" Value="Courgette-Regular"></Setter>
        <Setter Property="FontSize" Value="Large"></Setter>
      </Style>

    </ResourceDictionary>
  </ContentPage.Resources>


  <RelativeLayout Padding="0">
    <!-- Background -->
    <Image x:Name="imgBG"
        Aspect="AspectFill"
        Opacity="0.2"
        Source="{local:ImageResource Quiz.Images.bg8.jpg}"
        RelativeLayout.WidthConstraint= "{ConstraintExpression Type=RelativeToParent, Property=Width}"
        RelativeLayout.HeightConstraint= "{ConstraintExpression Type=RelativeToParent, Property=Height}">
    </Image>

    <StackLayout RelativeLayout.WidthConstraint= "{ConstraintExpression Type=RelativeToParent, Property=Width}"
        RelativeLayout.HeightConstraint= "{ConstraintExpression Type=RelativeToParent, Property=Height}"
          Orientation="Vertical">

      <Label Text="History Facts" Style="{Binding Source={x:StaticResource labelTopTitleStyle}}" ></Label>

      <ListView x:Name="listViewResultQuestions"  BindingContext="{Binding}" ItemsSource="{Binding Questions}"
             IsGroupingEnabled="True"
             GroupDisplayBinding="{Binding Text}"
             GroupShortNameBinding="{Binding ShortName}"
             >
        <ListView.RowHeight>
          <OnPlatform x:TypeArguments="x:Int32" iOS="80" Android="80" WinPhone="90" />
        </ListView.RowHeight>

        <ListView.GroupHeaderTemplate>
          <DataTemplate>
            <ViewCell>
              <StackLayout BindingContext="{Binding}" VerticalOptions="FillAndExpand" Padding="5" 
                           BackgroundColor="{Binding Path=IsAnswerValid, Converter={x:StaticResource boolToColor}}" Orientation="Horizontal">
                <Label Text="{Binding DisplayIndex, StringFormat='{0}. '}" Style="{StaticResource questionStyle}" LineBreakMode="NoWrap"/>
                <Label Text="{Binding Text}" Style="{StaticResource questionStyle}"/>
              </StackLayout>
            </ViewCell>
          </DataTemplate>
        </ListView.GroupHeaderTemplate>
        <ListView.ItemTemplate>
          <DataTemplate>
            <ViewCell>
              <StackLayout BindingContext="{Binding}" Padding="20, 5, 5, 5" Orientation="Vertical">
                <Label Text="{Binding Text}" Style="{StaticResource styleAnswer}"/>
                <Label Text="{Binding IsValid, StringFormat='Answer is correct: {0}', Converter={x:StaticResource boolToString}}" Style="{StaticResource styleAnswer}"/>
              </StackLayout>
            </ViewCell>
          </DataTemplate>
        </ListView.ItemTemplate>
      </ListView>

    </StackLayout>

  </RelativeLayout>

</ContentPage>

Answer 1

在 iOS 上，listview 默认具有白色背景色，因此您只需将 BackgroundColor 设置为“透明”即可解决您的问题

Answer 2

按照BraveHeart，我需要将ListView的BackgroundColor设置为“透明”，问题已经解决了。