Image background not showed correctly for ListView

Question

I have a xaml page to show a label and a listview with grouping option. There is a background image to be shown for the whole page as I expect. However, the page works well with Android simulator (the image background is displayed on the whole page) but not with iOS simulator. on the iOS simulator, the image background is showed under the top label element with text of "History Facts", but it is not seen under the ListView area I marked/painted inside a red frame. The white background is filled under the ListView instead. Please see the attached screen shot. Please help. Thanks.

My xaml file markups:

<?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

On iOS the listview has a white background color as default , so all what you need to do is to Set the BackgroundColor to "Transparent" and this will solve your problem