How to remove default orange background from CollectionView selected item?

Question

This collection view is fine but after item selection. There is visible orange background. How should I remove it?

<CollectionView 
                x:Name="MyCollectionView"

                ItemsSource="{Binding Groups}" 
                SelectionMode="Single"
                SelectedItem="{Binding SelectedGroup}"
                ItemsLayout="HorizontalList"
                Margin="10,10,0,10">

    <CollectionView.ItemTemplate>

        <DataTemplate x:DataType="models:PlcGroup">

            <Frame Margin="0,0,5,0" Padding="10,5" HasShadow="False" CornerRadius="10">
                
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroupList>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal" >
                                <VisualState.Setters>
                                    <Setter Property="Style" Value="{DynamicResource unselectedGroup}" />
                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="Selected">
                                <VisualState.Setters>
                                    <Setter Property="Style" Value="{StaticResource selectedGroup}" />
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateGroupList>
                </VisualStateManager.VisualStateGroups>
                
                <Frame.GestureRecognizers>
                    <TapGestureRecognizer Command="{Binding SelectItem, Source={RelativeSource AncestorType={x:Type viewModels:MainViewModel}}}"
                                          CommandParameter="{Binding .}"/>
                </Frame.GestureRecognizers>
                
                <Label Text="{Binding Name}"/>
                
            </Frame>


        </DataTemplate>
    </CollectionView.ItemTemplate>

</CollectionView>

It really is a pain to change style to all descendants to DataTemplate but I just want to set color to frame background. In a perfect world I would like to change label´s TextColor as well but I gave up on that.

Answer 1

That may due to the default color of CollectionView Selected Item. I give a workaround here.

You could wrap the Frame in a Container, such as StackLayout and set the BackgroundColor property to white. Set x:Name="myFrame" to the Frame which we will use in VisualStateManager.

<DataTemplate>
    <StackLayout BackgroundColor="White">
        <Frame x:Name="myFrame" .... 

Then VisualStateGroup should be attached to StackLayout as it is the outer container:

<DataTemplate>
    <StackLayout BackgroundColor="White">
        <Frame x:Name="myFrame"   Margin="0,0,5,0" Padding="10,5" HasShadow="False" CornerRadius="10">              
            <Frame.GestureRecognizers>
            ....
            </Frame.GestureRecognizers>
            <Label Text="{Binding Name}" />                                                                                  
        </Frame>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroupList>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualState x:Name="Normal" >
                        <VisualState.Setters>
                            <Setter TargetName="myFrame" Property="Frame.Style" Value="{DynamicResource unselectedGroup}" />
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState x:Name="Selected">
                        <VisualState.Setters>
                            <Setter  TargetName="myFrame" Property="Frame.Style" Value="{StaticResource selectedGroup}" />
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateGroupList>
        </VisualStateManager.VisualStateGroups>   
    </StackLayout>
</DataTemplate>

For more info, you could refer to Visual states.