.NET MAUI CollectionView滚动、背景及悬停高亮问题咨询

问题1：内容不足时CollectionView背景超出内容范围 #

把CollectionView自身的BackgroundColor设为Transparent，同时将列表项的背景色放在DataTemplate内的根布局上。这样只有实际的列表项会显示背景，空出的区域不会有多余的背景色，同时保留VerticalOptions="FillAndExpand"确保滚动功能正常。

问题2：实现列表项悬停高亮效果 #

.NET MAUI的CommonStates默认包含Hover状态（仅桌面平台支持），只需在VisualStateGroup中添加该状态的样式设置即可，同时确保根布局能接收鼠标交互事件。

修改后的完整代码 #

<CollectionView
    ItemsSource="{Binding ItemDefectsCollection}"
    SelectionMode="Single"
    VerticalOptions="FillAndExpand"
    BackgroundColor="Transparent"
    SelectedItem="{Binding SelectedDefect}">

    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Grid IsEnabled="True">
                <!--Item State Settings-->
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup Name="CommonStates">
                        <VisualState Name="Normal">
                            <VisualState.Setters>
                                <Setter Property="BackgroundColor" Value="White" />
                            </VisualState.Setters>
                        </VisualState>
                        <VisualState Name="Selected">
                            <VisualState.Setters>
                                <Setter Property="BackgroundColor" Value="LightGrey" />
                            </VisualState.Setters>
                        </VisualState>
                        <VisualState Name="Hover">
                            <VisualState.Setters>
                                <Setter Property="BackgroundColor" Value="#E0E0E0" />
                            </VisualState.Setters>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>

                <Frame
                    CornerRadius="0"
                    BorderColor="Black"
                    BackgroundColor="Transparent">
                    
                    <Label Text="{Binding .}"/>
                </Frame>
            </Grid>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

关键改动说明 #

• 背景修复：将CollectionView的BackgroundColor改为Transparent，把列表项的默认背景色放在Normal状态的Setter中，确保只有列表项区域显示白色背景。
• 悬停高亮：新增Hover状态的VisualState，设置对应的背景色；Grid的IsEnabled="True"确保能响应鼠标悬停事件（默认已开启，显式声明更稳妥）。
• 注意：Hover状态仅在Windows、macOS等桌面平台生效，移动平台（Android/iOS）无悬停交互，不会触发该状态。

内容的提问来源于stack exchange，提问作者TrollKilla