Xamarin Froms custom template in ListView - xaml

Question

I'm working with the ListView in Xamarin Forms. So far, I've displayed some data using a custom DataTemplate. Now, I would like to extend this to display the text inside/ over an image. Something like this:
This is the code, I'm using so far. However, in this case the text is over the image:
<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>
How could I achieve the result of the first image?
If anyone has some example/ links/ tips how to do that, that would be very helpful.
Thanks

Answer 1

You can use a RelativeLayout. It would look like this in your data templates 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>
This stretches the image and the stacklayout to the same height and aligns the content of the StackLayout at the botttom.