ListView 的图像背景显示不正确

Question

我有一个 xaml 页面来显示标签和带有分组选项的列表视图。如我所料，整个页面都会显示一个背景图像。但是，该页面在 Android 模拟器上运行良好（图像背景显示在整个页面上），但在 iOS 模拟器上运行不佳。在 iOS 模拟器上，图像背景显示在带有文本 "History Facts" 的顶部标签元素下方，但在红色框内 marked/painted 的 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

跟随BraveHeart，我需要将ListView的BackgroundColor设置为"Transparent"，问题已经解决

Answer 2

在 iOS 上，列表视图默认为白色背景色，因此您需要做的就是将 BackgroundColor 设置为 "Transparent"，这将解决您的问题

ListView 的图像背景显示不正确

Image background not showed correctly for ListView

xamarin

xamarin.ios

xamarin.android

xamarin.forms

xamarin-studio