.NET MAUI：如何消除CollectionView项间的空白间隔？

问题根源 #

你遇到的空白主要来自三个点：

1. LinearItemsLayout的Orientation属性拼写错误（horizonal应为Horizontal），导致ItemSpacing="0"未生效
2. Button控件自带默认内边距、边框宽度和圆角，占用了额外空间
3. CollectionView的项容器可能存在默认边距

修复步骤 #

1. 修正ItemsLayout拼写错误
   把错误的horizonal改为Horizontal，确保ItemSpacing="0"配置生效：

   <CollectionView 
       ItemsSource="{Binding Data}" 
       ItemSizingStrategy="MeasureFirstItem">
       <CollectionView.ItemsLayout>
           <LinearItemsLayout 
               Orientation="Horizontal"
               ItemSpacing="0" />
       </CollectionView.ItemsLayout>
       <!-- 其他代码 -->
   </CollectionView>
   

2. 重置Button默认样式
   清除Button自带的内边距、边框，并设置圆角为0（如果不需要圆角），让按钮严格按照设置的尺寸显示：

   <DataTemplate>
       <Button 
           Clicked="Button_Clicked" 
           WidthRequest="10" 
           HeightRequest="10" 
           BackgroundColor="{Binding Color}"
           Padding="0"
           BorderWidth="0"
           CornerRadius="0" />
   </DataTemplate>
   

3. 消除项容器默认边距（可选）
   如果仍有空白，给ItemTemplate外层包裹ContentView并设置Margin="0"，强制消除项容器的默认间距：

   <DataTemplate>
       <ContentView Margin="0">
           <Button 
               Clicked="Button_Clicked" 
               WidthRequest="10" 
               HeightRequest="10" 
               BackgroundColor="{Binding Color}"
               Padding="0"
               BorderWidth="0"
               CornerRadius="0" />
       </ContentView>
   </DataTemplate>
   

完整示例代码 #

<CollectionView 
    ItemsSource="{Binding Data}" 
    ItemSizingStrategy="MeasureFirstItem">
    <CollectionView.ItemsLayout>
        <LinearItemsLayout 
            Orientation="Horizontal"
            ItemSpacing="0" />
    </CollectionView.ItemsLayout>
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <ContentView Margin="0">
                <Button 
                    Clicked="Button_Clicked" 
                    WidthRequest="10" 
                    HeightRequest="10" 
                    BackgroundColor="{Binding Color}"
                    Padding="0"
                    BorderWidth="0"
                    CornerRadius="0" />
            </ContentView>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

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