.Net Maui CollectionView selected Item not highlighting

Question

I created a Collection View to resemble a data table and everything is working except for the selected item highlighting. I tried changing the color using visual state managers but still nothing. I have designed it for a windows application so I am only worried about it working on windows. The Selected Item is still working it is just not highlighting. What am I doing wrong?

<CollectionView
    x:Name="CollectionOfItems"
    ItemsSource="{Binding Items}"
    Header="{Binding .}"
    Grid.Row="2"
    Grid.Column="0"
    BackgroundColor="Grey"
    Margin="20,0,0,0"
    WidthRequest="1750"
    HorizontalOptions="Start"
    VerticalOptions="Start"
    SelectionMode="Single"
    SelectedItem="{Binding SelectedItem}">

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

    </VisualStateManager.VisualStateGroups>
    
    <CollectionView.ItemTemplate>
        <DataTemplate x:DataType="m:Item">
            <Grid
                Margin="0"
                RowDefinitions="*"
                ColumnDefinitions="*,*,*,*,*">

                <Frame 
                    x:Name="SerialNumberFrame"
                    CornerRadius="0"
                    BorderColor="Black"
                    Grid.Column="0"
                    BackgroundColor="white">
                    <Label 
                        Text="{Binding SerialNumber}"
                        HorizontalOptions="Start">
                    </Label>
                </Frame>

                <Frame 
                    CornerRadius="0"
                    BorderColor="Black"
                    BackgroundColor="LightGrey"
                    Grid.Column="1">
                    <Label 
                        Text="{Binding ItemType.Text}"
                        HorizontalOptions="Start">
                    </Label>
                </Frame>

                <Frame 
                    CornerRadius="0"
                    BorderColor="Black"
                    BackgroundColor="white"
                    Grid.Column="2">
                    <Label 
                        Text="{Binding HasAllComponents.Text}"
                        HorizontalOptions="Start">
                    </Label>
                </Frame>

                <Frame 
                    CornerRadius="0"
                    BorderColor="Black"
                    BackgroundColor="LightGrey"
                    Grid.Column="3">
                    <Label 
                        Text="{Binding MissionCapable.Text}"
                        HorizontalOptions="Start">
                    </Label>
                </Frame>

                <Frame 
                    CornerRadius="0"
                    BorderColor="Black"
                    BackgroundColor="White"
                    Grid.Column="4">
                    <Label 
                        Text="{Binding CheckedOut.Text}"
                        HorizontalOptions="Start">
                    </Label>
                </Frame>
            </Grid>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

I have tried using visual state managers. I am still new and not really sure what else to try. As far as I know the selected item is suppose to highlight automatically.

Answer 1

I figured it out, finally. I had to change the Grid BackgroundColor to White and then change BackgroundColor of the Frames to Transparent so that I could see the highlighted color underneath them. I wish there were a way to highlight overtop of the Frames instead, but this works.