.NET MAUI中CollectionView ItemTemplate多余间距问题求助

针对迁移到.NET 8 MAUI时遇到的CollectionView ItemTemplate内Image与Label之间、Image顶部、Label底部存在多余空白的问题，即使设置了Margin和Padding为0仍未解决，可尝试以下关键调整：

1. 消除CollectionView布局的默认间距 #

CollectionView的GridItemsLayout默认带有ItemSpacing，这是容易被忽略的全局间距来源，直接在布局中设置为0：

<CollectionView.ItemsLayout>
    <GridItemsLayout Orientation="Vertical"
                     Span="{Binding VerticalColumnsSpan, Mode=TwoWay}"
                     ItemSpacing="0"/>
</CollectionView.ItemsLayout>

2. 修正Grid行定义的高度策略 #

当前Grid第一行使用固定高度{StaticResource MainPageTVShowsItemHeight}、第二行用*，会导致Image未填满行高时出现顶部空白，Label区域被拉伸产生底部空白。建议将两行改为Auto自适应内容高度，同时让控件贴紧顶部：

<Grid.RowDefinitions>
    <RowDefinition Height="Auto"/>
    <RowDefinition Height="Auto"/>
</Grid.RowDefinitions>

给Image添加VerticalOptions="Start"，避免控件在行内居中产生空白：

<Image
    Source="{Binding ImageSourceData}"
    HeightRequest="{StaticResource MainPageTVShowsImageHeight}"
    WidthRequest="{StaticResource MainPageTVShowsImageWidth}"
    Grid.Row="0" HorizontalOptions="Center"
    Margin="0"
    VerticalOptions="Start"/>

3. 压缩Label的默认内边距 #

Label默认有基于字体的上下内边距，通过设置LineHeight（按需调整，比如1）和VerticalOptions="Start"消除多余空间：

<Label
    Text="{Binding Title, Mode=OneWay}"
    Grid.Row="1" HorizontalTextAlignment="Center"
    LineBreakMode="TailTruncation" Margin="0" Padding="0"
    MaxLines="2" HeightRequest="{StaticResource MainPageTVShowsLabelHeight}"
    LineHeight="1"
    VerticalOptions="Start"/>

4. 确保外层容器不拉伸内容 #

外层Border和内部Grid默认VerticalOptions为Fill，会导致容器被拉伸产生额外空白，设置为Start让内容紧凑排列：

<Border Padding="0" Margin="0" VerticalOptions="Start">
    <VisualStateManager.VisualStateGroups>
        <!-- 保留原有视觉状态 -->
    </VisualStateManager.VisualStateGroups>
    <Grid HorizontalOptions="Center" Padding="0" Margin="0" VerticalOptions="Start">
        <!-- 保留原有Grid内容 -->
    </Grid>
</Border>

5. 检查Image的显示比例 #

如果Image使用AspectFit模式，图片无法填满设置的宽高时会自动添加空白，可根据需求改为AspectFill或AspectCenter，确保图片完全填充指定尺寸：

<Image
    ...
    Aspect="AspectFill"/>

修改后的完整DataTemplate示例 #

<DataTemplate x:Key="MainPageTVShowsItemTemplate"
              x:DataType="local_helper:TVShow">
    <Border Padding="0" Margin="0" VerticalOptions="Start">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal" />
                <VisualState x:Name="PointerOver">
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor" Value="{AppThemeBinding Light={StaticResource Secondary}, Dark={StaticResource Primary}}"/>
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="Selected">
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor" Value="{StaticResource Primary}"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <Grid HorizontalOptions="Center" Padding="0" Margin="0" VerticalOptions="Start">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="{StaticResource MainPageTVShowsItemWidth}"/>
            </Grid.ColumnDefinitions>
            <Image
                Source="{Binding ImageSourceData}"
                HeightRequest="{StaticResource MainPageTVShowsImageHeight}"
                WidthRequest="{StaticResource MainPageTVShowsImageWidth}"
                Grid.Row="0" HorizontalOptions="Center"
                Margin="0"
                VerticalOptions="Start"
                Aspect="AspectFill"/>
            <Label
                Text="{Binding Title, Mode=OneWay}"
                Grid.Row="1" HorizontalTextAlignment="Center"
                LineBreakMode="TailTruncation" Margin="0" Padding="0"
                MaxLines="2" HeightRequest="{StaticResource MainPageTVShowsLabelHeight}"
                LineHeight="1"
                VerticalOptions="Start"/>
            <ActivityIndicator IsRunning="{Binding IsLoading}" IsVisible="{Binding IsLoading}" Grid.RowSpan="2"
                               WidthRequest="{StaticResource TVShowsItemTemplateIndicatorWidth}"
                               HeightRequest="{StaticResource TVShowsItemTemplateIndicatorHeight}"/>
        </Grid>
    </Border>
</DataTemplate>

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