CollectionView BackgroundColor when MouseOver/Focused

[grewegreg]

How do we set the BackgroundColor in a CollectionView when the Mouse is over an item? I can set the properties of the Grid when it is Selected, but I cannot find the correct combination for MouseOver/Focused.

This graphic represents the question:

Content Page

<ContentPage.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="/Resources/Styles/DashboardStyles.xaml" />
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</ContentPage.Resources>

<StackLayout Margin="0">
    <CollectionView 
        Style="{StaticResource CollectionViewDataGrid}"
        ItemsSource="{Binding TopDonors}"
		ItemsLayout="VerticalList"
        IsGrouped="true"
        VerticalOptions="StartAndExpand"
        SelectionMode="Single"
        SelectedItem="{Binding SelectedTopDonor}"
        SelectionChangedCommand="{Binding OpenMasterFileCommand}">
        <CollectionView.GroupHeaderTemplate>
            <DataTemplate x:DataType="group:TopDonorGroup">
                <Grid RowDefinitions="Auto,Auto,Auto" RowSpacing="1" ColumnDefinitions="*,*,*,*,*" Padding="10" >
                    <Label Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"
                       Style="{StaticResource DashboardChartLabel}"
                       Text="{Binding Name, StringFormat='Donation Year:  {0}'}"/>
                    <Label Grid.Row="0"  Grid.Column="2" Style="{StaticResource DashboardAmountLabel}" 
                       Text="{Binding TotalContributions,StringFormat='Amount:  {0:C2}'}" />
                    <Label Grid.Row="0"  Grid.Column="3" Style="{StaticResource DashboardAmountLabel}" 
                       Text="{Binding Count,StringFormat='Donations:  {0:N0}'}" />

                    <Label Grid.Row="1" Grid.Column="0" Style="{StaticResource DashboardAmountLabel}" HorizontalOptions="Start" 
                       Text="Donor Name"/>
                    <Label Grid.Row="1"  Grid.Column="1" Style="{StaticResource DashboardAmountLabel}" HorizontalOptions="Start"  
                       Text="Parcel Number"/>
                    <Label Grid.Row="1"  Grid.Column="2" Style="{StaticResource DashboardAmountLabel}" 
                       Text="Amount"/>
                    <Label Grid.Row="1"  Grid.Column="3" Style="{StaticResource DashboardAmountLabel}"
                       Text="Rank"/>
                    <Label Grid.Row="1"  Grid.Column="4" Style="{StaticResource DashboardAmountLabel}"
                       Text="Id"/>
                    <BoxView Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="5" HeightRequest="1" 
                         BackgroundColor="{AppThemeBinding Light={StaticResource OutlineLightColor}, Dark={StaticResource OutlineDarkColor}}"/>
                </Grid>
            </DataTemplate>
        </CollectionView.GroupHeaderTemplate>
        <CollectionView.ItemTemplate>
            <DataTemplate x:DataType="model:TopDonor" >
                <Grid ColumnDefinitions="*,*,*,*,*" Margin="20,0,20,0" Style="{StaticResource GridCollectionView}">
                    <Label Grid.Column="0" Style="{StaticResource LabelCollectionViewItem}"
                       Text="{Binding DonorName}"/>
                    <Label Grid.Column="1" Style="{StaticResource LabelCollectionViewItem}"
                       Text="{Binding ParcelNumber}"/>
                    <Label Grid.Column="2" Style="{StaticResource LabelCollectionViewItem}" HorizontalOptions="End"
                       Text="{Binding AmountPaid, StringFormat='{0:C2}'}"/>
                    <Label Grid.Column="3" Style="{StaticResource LabelCollectionViewItem}" HorizontalOptions="End" 
                       Text="{Binding ContributionRank,StringFormat='{0}'}"/>
                    <Label Grid.Column="4" Style="{StaticResource LabelCollectionViewItem}" HorizontalOptions="End" 
                       Text="{Binding MasterFileId,StringFormat='{0}'}"/>
                </Grid>
            </DataTemplate>
        </CollectionView.ItemTemplate>
        <!--
    <CollectionView.GroupFooterTemplate>
        <DataTemplate x:DataType="group:TopDonorGroup">
            <Grid RowDefinitions="Auto,Auto" RowSpacing="1" ColumnDefinitions="*,*,*,*,*"  Margin="10,0,10,0" Padding="10" >
                <Label Grid.Row="0" Grid.Column="0" Style="{StaticResource DashboardAmountLabel}" HorizontalOptions="Start" 
                       Text="{Binding Count,StringFormat='Donations: {0:N0}'}"/>
                <Label Grid.Row="0"  Grid.Column="2" Style="{StaticResource DashboardAmountLabel}" 
                       Text="{Binding TotalContributions,StringFormat='Amount: {0:C2}'}"/>
                <BoxView Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="5" HeightRequest="1" 
                         BackgroundColor="{AppThemeBinding Light={StaticResource OutlineLightColor}, Dark={StaticResource OutlineDarkColor}}"/>
            </Grid>
        </DataTemplate>
    </CollectionView.GroupFooterTemplate>
    -->
        <CollectionView.EmptyView>
            <ContentView>
                <VerticalStackLayout Padding="10" Spacing="10" 
                                 BackgroundColor="{AppThemeBinding Light={StaticResource BackgroundLightColor}, Dark={StaticResource BackgroundDarkColor}}">
                    <Image Source="image_missing.png" HeightRequest="256" WidthRequest="256" 
                       VerticalOptions="Center" HorizontalOptions="Center" />
                </VerticalStackLayout>
            </ContentView>
        </CollectionView.EmptyView>
    </CollectionView>
</StackLayout>

App Styles:

<Style TargetType="CollectionView" x:Key="CollectionViewDataGrid"> </Style>

<Style TargetType="Grid" x:Key="GridCollectionView">
    <Setter Property="BackgroundColor" Value="Transparent" />
    <Setter Property="VisualStateManager.VisualStateGroups">
        <VisualStateGroupList>
            <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal" />
                <!--
                <VisualState x:Name="MouseOver">
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor" Value="White" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="Focused">
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor" Value="Red" />
                    </VisualState.Setters>
                </VisualState>
                -->
                <VisualState x:Name="Selected">
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor" Value="{AppThemeBinding Light={StaticResource SecondaryContainerLightColor}, Dark={StaticResource SecondaryContainerDarkColor}}" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateGroupList>
    </Setter>
</Style>

[Handly1408]

did you solve it ?

[grewegreg]

Unfortunately, no, I never found a fix and I have not looked at this in a while. I have a ToDo item to look at it again when .Net 7 is released.

[grewegreg]

After updating to Net 7, the result is the same, there has been no improvement. I am still searching for a resolution.

[NPadrutt]

I had the same issue. Since I couldn't find a solution via the collection view as well I changed the selection mode there to None and created a GestureRecognizer on the item itself:

                                    <controls:Card.GestureRecognizers>
                                        <TapGestureRecognizer
                                        Command="{Binding ViewModel.GoToTransactionListCommand, Source={x:Reference This}}"
                                        CommandParameter="{Binding .}" />
                                    </controls:Card.GestureRecognizers>

[ClaudiuHBann]

You can use this.

[beeradmoore]

Isn't that for UWP or something, not MAUI?