Xamarin Forms CollectionView: Cannot give SelectedItem Transparent background

Question

I am using a CollectionView and when a user selects an item, I don't want the SelectedItem to show background color at all. I have tried to achieve this effect by setting the BackgroundColor property to transparent with the VisualStateManager per the instructions in Xamarin's documentation. However, rather than the Item's Background being invisible it just becomes grayed-out when selected. The code works. If I set it to red, I see red. But I can't get the background to go away altogether.

This is happening in iOS.

Can anyone tell me how to do this?

Here's my code:

<Style TargetType="ContentView">
                <Setter Property="VisualStateManager.VisualStateGroups">
                    <VisualStateGroupList>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal" />
                            <VisualState x:Name="Selected">
                                <VisualState.Setters>
                                    <Setter Property="BackgroundColor"
                                        Value="Transparent" />
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateGroupList>
                </Setter>
            </Style>

<CollectionView Grid.Row="0" ItemsSource="{Binding Lessons}"  BackgroundColor="Transparent"
                  SelectedItem="{Binding SelectedLesson, Mode=TwoWay}" HorizontalOptions="FillAndExpand"

                        SelectionMode="Single"
                        cal:Message.Attach="[Event SelectionChanged] = [Action ActivateLesson]">
            <CollectionView.ItemTemplate >
                <DataTemplate x:DataType="engineVm:LessonViewModel">
                    <ContentView BackgroundColor="Transparent" cal:View.Model="{Binding}" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Margin="0, 0, 0, 20" />
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>

Answer 1

This can be accomplished by using Custom Renderer

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

using App7.iOS;

[assembly:ExportRenderer(typeof(ViewCell),typeof(MyViewCellRenderer))]

namespace App7.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 = Color.Transparent.ToUIColor(),
            };
            cell.SelectionStyle = UITableViewCellSelectionStyle.None;

            return cell;
        }

        
    }
}

in xaml

<CollectionView.ItemTemplate >
  <DataTemplate >
     <ViewCell>
         <ContentView BackgroundColor="Transparent" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Margin="0, 0, 0, 20" />
     </ViewCell>
  </DataTemplate>
</CollectionView.ItemTemplate>

Update

You could use the plugin FlowListView from Nuget . It provides the similar function like CollectionView .

And you could create a custom renderers for FlowListViewInternalCell in platforms specific projects which disable ListView row highlighting.

iOS

using System;
using DLToolkit.Forms.Controls;
using DLToolkitControlsSamples.iOS;
using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

[assembly: ExportRenderer(typeof(FlowListViewInternalCell), typeof(FlowListViewInternalCellRenderer))]
namespace DLToolkitControlsSamples.iOS
{
    // DISABLES FLOWLISTVIEW ROW HIGHLIGHT
    public class FlowListViewInternalCellRenderer : ViewCellRenderer
    {
        public override UIKit.UITableViewCell GetCell(Xamarin.Forms.Cell item, UIKit.UITableViewCell reusableCell, UIKit.UITableView tv)
        {
                    tv.AllowsSelection = false;
            var cell = base.GetCell(item, reusableCell, tv);
            cell.SelectionStyle = UITableViewCellSelectionStyle.None;

            return cell;
        }
    }
}

Android

using System;
using DLToolkit.Forms.Controls;
using DLToolkitControlsSamples.Droid;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

[assembly: ExportRenderer(typeof(FlowListViewInternalCell), typeof(FlowListViewInternalCellRenderer))]
namespace DLToolkitControlsSamples.Droid
{
    // DISABLES FLOWLISTVIEW ROW HIGHLIGHT
    public class FlowListViewInternalCellRenderer : 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);

            var listView = parent as Android.Widget.ListView;

            if (listView != null)
            {
                listView.SetSelector(Android.Resource.Color.Transparent);
                listView.CacheColorHint = Android.Graphics.Color.Transparent;
            }

            return cell;
        }
    }
}

For more details and usage of the plugin you could check https://github.com/daniel-luberda/DLToolkit.Forms.Controls/tree/master/FlowListView/