ListView

Question

我正在使用Xamarin Forms中的ListView。到目前为止，我已经使用自定义DataTemplate显示了一些数据。现在，我想扩展它以显示图像内/上的文本。像这样：

这是我到目前为止使用的代码。但是，在这种情况下，文本在图像上：

<ListView x:Name="MyListView"
          ItemsSource="{Binding myData}"
          RowHeight="190"
          HasUnevenRows="True">
    <ListView.ItemTemplate>
      <DataTemplate>
        <ViewCell>
          <ViewCell.View>
            <StackLayout Padding="10" Orientation="Vertical">
              <Label Text="{Binding Title}" 
                     FontSize="Large" 
                     VerticalOptions="Center"
                     TextColor="#31659e">
               </Label>                
               <Image Source="http://www.someurl.com/images/image1.jpg" Aspect="AspectFill"></Image>                  
            </StackLayout>
          </ViewCell.View>
        </ViewCell>
      </DataTemplate>
    </ListView.ItemTemplate>
  </ListView>

我怎样才能达到第一张图片的效果？

如果有人有一些示例/链接/提示如何做到这一点，那将非常有帮助。

由于

Answer 1

您可以使用RelativeLayout。它会在您的数据模板中显示为ViewCell.View

<RelativeLayout>
    <!-- Background -->
    <Image Source="http://www.someurl.com/images/image1.jpg" Aspect="AspectFill"
           RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width}"
           RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height}" />
    <!-- Text -->
    <StackLayout Padding="10" Orientation="Vertical" VerticalOptions="EndAndExpand"
                 RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width}"
                 RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height}" >
      <Label Text="{Binding Title}"
             FontSize="Large"
             TextColor="#31659e">
      </Label>
      <Label Text="{Binding SubTitle}"
             TextColor="#31659e">
      </Label>
    </StackLayout>
</RelativeLayout>

这将图像和stacklayout拉伸到相同的高度，并在底部对齐StackLayout的内容。