Image inside Grid insideListView doesn't let me see the SelectedItem highlight

Question

I may be doing something silly here or something really wrong. I want to have the same background image for every row in the grid. The same image repeating over and over.

When I select an item from the list, the color from the highlight shows behind the image. Is there any way to do it so the image doesn't stay on top of it?

Thank you in advance.

This is my code.

<AbsoluteLayout BackgroundColor="AntiqueWhite">          

        <StackLayout Spacing="0" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1" VerticalOptions="FillAndExpand">                
            <Button Text="Add Item" Command="{Binding AddItemCommand}" />

            <Entry BackgroundColor="AntiqueWhite" x:Name="entryName" FontAttributes="Bold" Placeholder="New Item in Shopping List" Text="{Binding ItemName}" />

            <ListView x:Name="listViewItems" ItemsSource="{Binding ShoppingListItems}" SelectedItem="{Binding SelectedItemFromList}" SelectionMode="Single" 
                      SeparatorVisibility="None" HasUnevenRows="False" VerticalScrollBarVisibility="Always">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>

                            <Grid x:Name="gridList" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1" VerticalOptions="FillAndExpand">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="3*" />
                                    <ColumnDefinition Width="10*" />
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition Width="2*" />
                                    <ColumnDefinition Width="3*" />
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>

                                <Image Source="background2.png" Aspect="AspectFill" Grid.Column="0" Grid.ColumnSpan="6"
                                        AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1" VerticalOptions="StartAndExpand" />
                            </Grid>

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

        </StackLayout>
    </AbsoluteLayout>

Answer 1

You could set the background color of selected item as Transparent (or any other value) by using Custom Renderer .

in iOS project

using UIKit;
using Xamarin.Forms.Platform.iOS;
using Xamarin.Forms;

using xxx.iOS;

[assembly: ExportRenderer(typeof(ViewCell), typeof(MyViewCellRenderer))]
namespace xxx.iOS
{
    public class MyViewCellRenderer: ViewCellRenderer
    {
        public override UITableViewCell GetCell(Cell item, UITableViewCell reusableCell, UITableView tv)
        {
            var cell = base.GetCell(item, reusableCell, tv);

            cell.SelectedBackgroundView = new UIView
            {
                BackgroundColor = UIColor.Clear,  //set bgcolor here 
            };

            return cell;
        }
    }
}

in Android project

using System;

using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

using xxx.Droid;

[assembly: ExportRenderer(typeof(ViewCell), typeof(MyViewCellRenderer))]
namespace xxx.Droid
{
    public class MyViewCellRenderer: ViewCellRenderer
    {
        protected override Android.Views.View GetCellCore(Cell item, Android.Views.View convertView, Android.Views.ViewGroup parent, Android.Content.Context context)
        {
            var cell = base.GetCellCore(item, convertView, parent, context);

            cell.SetBackgroundColor(Android.Graphics.Color.Transparent);

            return cell;
        }
    }
}