How to fix 'Background Image in ListView' in Xamarin?

Question

I tried to create different backgrounds with images for each listView element. My problem is how to fill this place (except icon at the beginning) with a full picture and not move any of my current elements in it.

Layout Without bg - https://i.sstatic.net/FGaoq.jpg

I've tried to use to Relative Layout and Grid Layout with 'aspects' and etc., but results are below:

My try - https://i.sstatic.net/0DwS7.jpg

<ListView x:Name="deckListView"
          RowHeight="50"
          ItemSelected="DeckListView_ItemSelected"
          Margin="5, 0, 10, 0">

    <ListView.ItemTemplate>

        <DataTemplate>

            <ViewCell>

                <StackLayout Orientation="Horizontal" >
                    <Image >
                        <Image.Source>
                            <UriImageSource Uri="{Binding ImageSource}"
                                CachingEnabled="True"
                                 CacheValidity="14"/>
                        </Image.Source>
                    </Image>

                    <!-- BG IMG-->
                    <RelativeLayout >
                    <Image Aspect="AspectFill" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" > 
                        <Image.Source>
                                <UriImageSource Uri="https://vignette.wikia.nocookie.net/wiedzmin/images/d/d7/G_SS_Kr%C3%B3l_Foltest.jpg/revision/latest?cb=20180317231055"/>
                        </Image.Source>
                    </Image>

                        <!-- LIST VIEW ELEMENT-->
                    <StackLayout Orientation="Vertical" >
                        <Label Text="{Binding NameDeck}"

                            FontSize="Medium"/>
                        <Label Text="{Binding Fraction}"/>
                    </StackLayout>

                        <StackLayout Orientation="Horizontal"
                                 HorizontalOptions="EndAndExpand">
                            <Label Text="{Binding Win}"
                               TextColor="Green"
                               FontSize="Medium"
                               Style="{StaticResource bottomLabel}"/>

                            <Label Text=":" 
                               Style="{StaticResource bottomLabel}"
                               FontSize="Small"
                               Margin="0,0,0,5"/>

                            <Label Text="{Binding Lose}"
                               TextColor="Red"
                               FontSize="Medium"
                               Style="{StaticResource bottomLabel}"/>

                            <Label x:Name="winRatio"
                               VerticalOptions="Center"
                               Text="{Binding WinRatio, StringFormat='{0}%'}"
                               FontSize="Large"/>
                        </StackLayout>
                    </RelativeLayout>
                </StackLayout>
            </ViewCell>

        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

I'm so sorry If I forgot about something to paste.

Answer 1

You can check Jason's answer in the Xamarin Forums discussion that does the same thing.

He shows how you can use a basic AbsoluteLayout to do the same...

var myLayoutWithAllMyNormalStuff = <make it>;
var backgroundImage = new Image { ... };

ContentPage page = new ContentPage {
Content = new AbsoluteLayout {
 Children = {
  {backgroundImage, new Rectangle (0, 0, 1, 1), AbsoluteLayoutFlags.All},
  {myLayoutWithAllMyNormalStuff, new Rectangle (0, 0, 1, 1), AbsoluteLayoutFlags.All}
  }
 }
};