Search code examples
androidxamlmauicollectionview

How to remove default orange background from CollectionView selected item?


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

enter image description here

<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.


Solution

  • 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.