.NET MAUI中Grid与DevExpress Collection View搭配出现多余空白问题

问题场景 #

我编写了如下XAML代码，使用DevExpress的DXCollectionView展示数据，却发现下方的Button和DXCollectionView之间存在多余空白；但将DXCollectionView替换为原生CollectionView后，空白就消失了。

<dx:DXScrollView x:Name="ParentLayout">
    <Grid BackgroundColor="Transparent" >
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <dx:DXStackLayout Grid.Row="0" Grid.Column="0" VerticalOptions="Start">
            <dx:DXCollectionView ItemsSource="{Binding Data}">
                <dx:DXCollectionView.ItemTemplate>
                    <DataTemplate>
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="40"/>
                                <RowDefinition Height="30"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="170"/>
                                <ColumnDefinition Width="Auto"/>
                            </Grid.ColumnDefinitions>
                            <Label Text="{Binding Name}" Padding="10, 15, 0, 0"  FontAttributes="Bold"/>
                            <Label Text="{Binding Phone}" Padding="10, 15, 0, 0" Grid.Row="0" Grid.Column="1"/>
                            <Label Text="{Binding Location}" Padding="10, 0" Grid.Row="1" Grid.Column="1"/>
                            <BoxView Grid.Row="2" Grid.ColumnSpan="3" BackgroundColor="#ebebeb" HeightRequest="2"/>
                        </Grid>
                    </DataTemplate>
                </dx:DXCollectionView.ItemTemplate>
            </dx:DXCollectionView>
        </dx:DXStackLayout>
        <dx:DXStackLayout Grid.Row="1" Grid.Column="0" VerticalOptions="Start">
            <dx:DXButton Content="Click Me!" Margin="0" Padding="0" />
        </dx:DXStackLayout>
    </Grid>
</dx:DXScrollView>

原因解析 #

1. 默认边距差异：DXCollectionView控件默认带有内置的上下边距（Margin/Padding），而原生CollectionView没有这类默认布局设置。当DXCollectionView被放置在DXStackLayout中时，这个默认边距未被清除，从而在控件底部产生空白，与下方Button形成间距。
2. 功能预留空间：DXCollectionView默认可能为下拉刷新、加载更多等扩展功能预留了顶部/底部空白区域，即使你没有启用这些功能，预留空间依然存在；而原生CollectionView没有这类默认的功能预留布局。
3. 布局属性默认值不同：DXCollectionView的VerticalOptions默认值可能不是Start，导致控件在容器中被拉伸，间接产生额外空白；原生CollectionView的默认布局属性更贴合紧凑布局需求。

快速解决方法 #

• 给DXCollectionView显式设置Margin="0"和Padding="0"，清除默认边距：

  <dx:DXCollectionView ItemsSource="{Binding Data}" Margin="0" Padding="0">
  

• 确保DXCollectionView的VerticalOptions="Start"，避免控件不必要的拉伸：

  <dx:DXCollectionView ItemsSource="{Binding Data}" VerticalOptions="Start">
  

• 若不需要下拉刷新/加载更多功能，可关闭相关属性（如IsPullToRefreshEnabled="False"），消除预留空间。

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