MAUI CollectionView Span属性Bug及滚动条不显示问题求助

问题现象 #

• 环境：MAUI、Visual Studio 17.4 Preview 1、Windows系统
• 当CollectionView设置ItemsLayout="VerticalGrid, 3"（列数3）时，数据源只有1或2个对象，控件完全不显示内容
• 滚动条始终无法显示，无论数据量多少

原XAML代码 #

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="MauiApp1.VerticalListDynamicSizeItemsPage" Title="Vertical list (dynamic item sizing)">
    <StackLayout>
        <Button TextColor="Wheat" Text="Add New " Command="{Binding AddCommand}" />
        <Button TextColor="Wheat" Text="Delete New " Command="{Binding DeleteCommand}" />
        <CollectionView HorizontalOptions="Start" HorizontalScrollBarVisibility="Always" ItemsLayout="VerticalGrid, 3" ItemsSource="{Binding Monkeys}" VerticalScrollBarVisibility="Always">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <Grid Padding="10">
                        <BoxView WidthRequest="100" HeightRequest="100" Color="Red" />
                    </Grid>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </StackLayout>
</ContentPage>

问题根源 #

1. 内容不显示：HorizontalOptions="Start"导致CollectionView宽度随内容自适应，当数据不足一行（3个）时，控件宽度被压缩到几乎为0，所以看不到内容
2. 滚动条不显示：StackLayout会自动拉伸子控件高度以适应内容，CollectionView没有固定高度限制，内容永远不会超出可见范围，滚动条自然不会触发

解决方案 #

方案1：改用Grid布局（推荐）

用Grid替换StackLayout，让CollectionView占据页面剩余空间，同时移除HorizontalOptions="Start"让控件填充满宽度：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             x:Class="MauiApp1.VerticalListDynamicSizeItemsPage" 
             Title="Vertical list (dynamic item sizing)">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/> <!-- 按钮行自适应高度 -->
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/> <!-- CollectionView占剩余所有高度 -->
        </Grid.RowDefinitions>
        <Button Grid.Row="0" TextColor="Wheat" Text="Add New " Command="{Binding AddCommand}" />
        <Button Grid.Row="1" TextColor="Wheat" Text="Delete New " Command="{Binding DeleteCommand}" />
        <CollectionView Grid.Row="2" 
                        HorizontalScrollBarVisibility="Always" 
                        ItemsLayout="VerticalGrid, 3" 
                        ItemsSource="{Binding Monkeys}" 
                        VerticalScrollBarVisibility="Always">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <Grid Padding="10">
                        <BoxView WidthRequest="100" HeightRequest="100" Color="Red" />
                    </Grid>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </Grid>
</ContentPage>

方案2：保留StackLayout但显式设置宽度和高度

如果一定要用StackLayout，给CollectionView指定固定宽度和高度，确保内容能显示且滚动条可触发：

<CollectionView HorizontalOptions="Start" 
                WidthRequest="360" <!-- 3个Item宽度+左右Padding：100*3 + 10*2*3 = 360 -->
                HeightRequest="400" <!-- 固定高度，超过则显示滚动条 -->
                HorizontalScrollBarVisibility="Always" 
                ItemsLayout="VerticalGrid, 3" 
                ItemsSource="{Binding Monkeys}" 
                VerticalScrollBarVisibility="Always">
    <!-- 模板内容不变 -->
</CollectionView>

效果验证 #

• 修改后，即使只有1或2个数据，CollectionView能正常显示红色方块
• 当数据量超过CollectionView可见高度时，垂直滚动条会自动显示；水平方向如果内容超出，水平滚动条也会生效

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