Xamarin.forms: [Bug] ItemsViewCell SelectedBackground shows Gray selected background even when content visual state has been overriden

[newky2k]

Description

On iOS
When using a CollectionView, overriding the selected visual states of the DataTemplate content the Gray SelectBackgroundView is shown and cannot be hidden. A long press will show the Gray selectedbackground color, then the overridden one which looks odd.

Additionally, if the content doesn't fill the whole cell(such as using rounded corners) the gray background selection shows through on the unused space which looks bad(see below)

On Android
The same thing happens but it uses the system selection colour if the overriden background colour is Transparent.

            <DataTemplate>
                <Grid Margin="10" BackgroundColor="Transparent" HeightRequest="200">
                    <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>
                    </VisualStateManager.VisualStateGroups>

The justification is that i want to handle the selection change within the visible content and there is no way to stop the full cell background colour(Gray on iOS and System colour on android) being shown and too leave selection to the templated content.

This is the code on iOS that is causing the problem

https://github.com/xamarin/Xamarin.Forms/blob/37c22eb1cb64afc5d62b9386a50bb6090446a65a/Xamarin.Forms.Platform.iOS/CollectionView/ItemsViewCell.cs#L16-L21

Steps to Reproduce

1. Create a new XF project
2. Add a CollectionView, set to use an ItemSource and a DataTemplate and SelectionMode set to single
3. Add a Grid(with the visual state as above) as the root item object, then add a Frame as below in the ItemTemplate
   
   
   
   • Margin = "10"
   
   
   • BackgroundColor = "Red"
   
   
   • CornerRadius = "20"
   
   

Expected Behavior

When the item is selected the unused background will not change colour

Actual Behavior

The unused background shows either Gray(iOS) and system color on Android

You could provide a property of CollectionView to set the selected item colour, or have some other way of disabling it. I could disable selection and add a tap gesture to the sub-views but that would be more work and would lose some of the benefits of CollectionView.

Basic Information

• Version with issue: 4.2
• Last known good version: n/a
• IDE: VS4M 2019 8.3
• Platform Target Frameworks:
  
  
  
  • iOS: 13.0
  
  
  • Android:
  
  
• Android Support Library Version:
• Nuget Packages:
• Affected Devices:

Screenshots

Reproduction Link

CollectionViewTest.zip

[adrianknight89]

@newky2k There was a discussion on the selected item background color somewhere on Github, but I can't find it, particularly with respect to overriding Android's default style colors. @hartez

Another approach here could possibly be adding content insets to CollectionView along with item spacing, which would not show the gray/orange selection colors(https://github.com/xamarin/Xamarin.Forms/issues/7442), but it would restrict the tappable item area.

I agree, however, that VSM should work as intended.

[MSiccDev]

I have to confirm this one. Happens also here on my end.

EDIT: In my case, I was able to work around the behavior using a Grid and setting the background in both cases to the page background...

[eli191]

On Android, you can make it transparent by setting
<item name="android:colorActivatedHighlight">@android:color/transparent</item>
Does someone knows a renderer stuff to achieve transparency on iOS?

[LeoJHarris]

@eli191 Ive followed as suggested in the docs on Xamarin using the visual state manage but doesnt work, I havnt been able to find work around yet. My problem is my background is a blurred image so I cannot simply change the row to the same as the background source.

Below does not work:

<VisualStateManager.VisualStateGroups>
                        <VisualStateGroup Name="CommonStates">
                            <VisualState Name="Normal" >
                                <VisualState.Setters>
                                    <Setter Property="BackgroundColor" Value="Transparent" />
                                </VisualState.Setters>
                            </VisualState>
                            <VisualState Name="Selected">
                                <VisualState.Setters>
                                    <Setter Property="BackgroundColor" Value="Transparent" />
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>

[eli191]

@LeoJHarris I ended up with SelectionMode="None" and custom GestureRecognizer like this for example

 <DataTemplate>
                                        <StackLayout
                                            InputTransparent="False">
                                            <syncEffectsView:SfEffectsView
                                                TouchDownEffects="Ripple"
                                                RippleColor="{DynamicResource AccentColor}"
                                                CornerRadius="8"
                                                InputTransparent="True">
                                                <Label
                                                    InputTransparent="True"
                                                    Padding="5,15"
                                                    HorizontalOptions="Center"
                                                    VerticalOptions="Center"
                                                    Text="{Binding}"
                                                    TextColor="{DynamicResource TextColor}"
                                                    FontSize="12">
                                                </Label>
                                            </syncEffectsView:SfEffectsView>
                                            <StackLayout.GestureRecognizers>
                                                <TapGestureRecognizer
                                                    Command="{prism:NavigateTo 'NewPage'}">
                                                    <TapGestureRecognizer.CommandParameter>
                                                        <prism:NavigationParameters>
                                                            <prism:NavigationParameter
                                                                Key="Book"
                                                                Value="{Binding ViewModel.SelectedBook.BookName, Source={x:Reference book_page}}" />
                                                            <prism:NavigationParameter
                                                                Key="BookId"
                                                                Value="{Binding ViewModel.SelectedBookId, Source={x:Reference book_page}}" />
                                                        </prism:NavigationParameters>
                                                    </TapGestureRecognizer.CommandParameter>
                                                </TapGestureRecognizer>
                                            </StackLayout.GestureRecognizers>
                                        </StackLayout>
                                    </DataTemplate>

[LeoJHarris]

@eli191 I thought about doing that, not a biggie atm to have the gray background color on selected rows. We can wait it out if they fix this issue soon otherwise Ill look at implementing something similiar to that.

[timahrentlov]

This really needs fixing.

[developer9969]

Hi wondering if this will be fixed, whatever I do I cannot remove the gray background.Any suggestion