MAUI: CollectionView changing background color of frame in selection doesnt work

Question

I am trying to change the selected item color as described in the maui tutorial here: https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/collectionview/selection?view=net-maui-7.0

But it doenst seem to work right. My targettype is a frame and I set to properties: border color light green when normal, and border color light blue when selected. But the selection is completely ignored and instead just puts the default grey bar behind the selection as shown here:

I added my code:

 <ContentPage.Resources>
           <Style TargetType="Frame">
               <Setter Property="VisualStateManager.VisualStateGroups">
                   <VisualStateGroupList>
                       <VisualStateGroup x:Name="CommonStates">
                           <VisualState x:Name="Normal" >
                                <VisualState.Setters>
                                   <Setter Property="BorderColor"
                                           Value="{StaticResource LighterGreen}" />
                               </VisualState.Setters>
                           </VisualState>
                           <VisualState x:Name="Selected">
                               <VisualState.Setters>
                                   <Setter Property="BorderColor"
                                           Value="LightSkyBlue" />
                               </VisualState.Setters>
                           </VisualState>
                       </VisualStateGroup>
                   </VisualStateGroupList>
               </Setter>
           </Style>
    </ContentPage.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="250"/>
            <RowDefinition Height="250"/>
        </Grid.RowDefinitions> 
        <CollectionView SelectionMode="Multiple"
                        SelectionChanged="collectionview_coll_skills_SelectionChanged"
                        Margin="15,0,0,0"
                        Grid.Row="1"
                        VerticalScrollBarVisibility="Never" x:Name="collectionview_coll_skills">
            <CollectionView.ItemsLayout>
               <GridItemsLayout Orientation="Vertical" Span="3" />
            </CollectionView.ItemsLayout>
            <CollectionView.ItemTemplate>
                <DataTemplate>                   
                    <ContentView>
                        <Grid>    
                            <Grid.RowDefinitions>
                                <RowDefinition Height="50"/>
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="135"/>
                            </Grid.ColumnDefinitions>
                            <Frame Padding="8" Margin="0,0,0,5"  BackgroundColor="Transparent">
                                <Label FontSize="14" VerticalOptions="Center" HorizontalOptions="Center" Text="{Binding DisplayValue}"/>
                            </Frame>
                        </Grid>
                  </ContentView>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>

You can see that the border does have the right color but it is not affected by me selecting an item or deselecting it.

I hope you can help me

Thanks,

J

Answer 1

I give you some suggestions here.

1.Why the border color not changed?

Because each time you tap the item in CollectionView, you can just select the outer ContentView which has been defined in DataTemplate. Then frame border color won't change as it doesn't receive a state change. So as an alternative, you could set the TargetType to ContentView.

2.How to set the background color?

The gray background color is the default color when an item is selected. So the easiest way to avoid i think is to set the Backgroundcolor of ContentView to White.

<CollectionView.ItemTemplate>
    <DataTemplate>
        <ContentView BackgroundColor="White">

3. Here is the my complete code which works fine:

<ContentPage.Resources>
       <Style TargetType="ContentView">
           <Setter Property="VisualStateManager.VisualStateGroups">
               <VisualStateGroupList>
                   <VisualStateGroup x:Name="CommonStates">
                       <VisualState x:Name="Normal" >
                            <VisualState.Setters>
                                <Setter TargetName="myframe" Property="Frame.BorderColor"
                                    Value="Green" />
                                </VisualState.Setters>
                       </VisualState>
                       <VisualState x:Name="Selected">
                            <VisualState.Setters>
                                <Setter TargetName="myframe" Property="Frame.BorderColor"
                                        Value="LightSkyBlue" />
                            </VisualState.Setters>
                       </VisualState>
                   </VisualStateGroup>
               </VisualStateGroupList>
           </Setter>
       </Style>
</ContentPage.Resources>

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="auto"/>
        <RowDefinition Height="250"/>
        <RowDefinition Height="250"/>
    </Grid.RowDefinitions>
    <CollectionView SelectionMode="Multiple"
                    ItemsSource="{Binding ItemCollection}"
                    Margin="15,0,0,0"
                    Grid.Row="1"
                    VerticalScrollBarVisibility="Never" x:Name="collectionview_coll_skills">
        <CollectionView.ItemsLayout>
           <GridItemsLayout Orientation="Vertical" Span="3" />
        </CollectionView.ItemsLayout>
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <ContentView BackgroundColor="White">
                    <Grid >    
                        <Grid.RowDefinitions>
                            <RowDefinition Height="50"/>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="135"/>
                        </Grid.ColumnDefinitions>
                        <Frame Padding="8" Margin="0,0,0,5" x:Name="myframe"  BackgroundColor="Transparent">
                            <Label FontSize="14" VerticalOptions="Center" HorizontalOptions="Center" Text="{Binding DisplayValue}"/>

                        </Frame>
                    </Grid>                  
                </ContentView>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>

    </Grid>

Note: In DataTemplate of CollectionView, remember to set the name of the Frame to "myframe" as we used it in the ContentPage.Resources.

For more info, you could refer to Visual states.

Hope it works for you.