Xamarin Froms custom template in ListView

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

You can bind a bool property to IsVisable property,disable other items — Vulcan Lee
Have a look at this snppt we're trying to create a platform with these kind of designs. This has some text over background image that you're after. — Gerald Versluis

Sven-Michael Stübe Sven-Michael Stübe · Accepted Answer · 2016-10-09T19:18:46

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.

Xamarin Froms custom template in ListView

1 Answers