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>

I'm not overly familiar with CollectionView. This is a solution I had to do with a ListView stackoverflow.com/questions/59671543/… that might help — Joe H
Thanks, using that solution, did you try to make it transparent and not just a different color? — Sean
I have tried with different colors and don't see why transparent would behave differently, but don't know that I ever explicitly tested using transparent — Joe H
@Lucas.. I will try soon again with a ListView. I believe that solution will work. I started encountering a bug with the CollectionView such that when I rotate the device to Landscape mode and then back again to portrait mode, the collectionView loses the first item in my list. ListView doesn't do this. — Sean
Use the recommended method in the documentation, it uses VisualStateManager to change the background color. docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/… — lavilaso

Lucas Zhang Lucas Zhang · Accepted Answer · 2020-02-04T04:36:45

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/

Xamarin Forms CollectionView: Cannot give SelectedItem Transparent background

1 Answers

in xaml

Update

iOS

Android