CollectionView ItemTemplate 中的额外间距问题 - C# XAML .Net MAUI

Question

我正在开发一个项目，将我以前的应用程序（基于 Android）移植到 .Net (8.0) MAUI。因此，我很容易地移植了一些代码，但是，我面临着一个问题，我无法在互联网上找到任何帮助。

如下图所示，视图（

Image

和

Label

）之间以及

Image

的顶部和

Label

的底部也有一些空白。

我已经尝试了所有的视图，正如您在代码中看到的那样，但我无法删除多余的空格。我也将

Margin

中的

Padding

和

0

属性设置为

DataTemplate

，但仍然没有任何变化。此外，我无法在互联网上找到任何可以告诉我为什么会发生这种情况或者这是默认行为的内容。

有人可以指导我正确的方向，以便我可以根据需要调整空间吗？预先感谢您。

主页

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <RefreshView Refreshing="RefreshView_Refreshing"  VerticalOptions="Center"
                 windows:RefreshView.RefreshPullDirection="TopToBottom">
        <CollectionView
            x:Name="mainCV"
            IsEnabled="{Binding MainPageIsWorking, Converter={StaticResource InvertedBooleanConverter}}"
            ItemsSource="{Binding MainPageTVShowsCollection}"
            ItemTemplate="{StaticResource MainPageTVShowsItemTemplate}"
            SelectionChanged="CollectionView_SelectionChanged"
            SelectionMode="Single" SelectedItem="{Binding MainPageSelectedTVShow, Mode=TwoWay}"
            SelectionChangedCommand="{Binding MainPageTVShowsSelectionCommand}"
            SelectionChangedCommandParameter="{Binding MainPageSelectedTVShow}">
            <CollectionView.ItemsLayout>
                <GridItemsLayout Orientation="Vertical"
                                 Span="{Binding VerticalColumnsSpan, Mode=TwoWay}"/>
            </CollectionView.ItemsLayout>
            <CollectionView.EmptyView>
                <StackLayout Orientation="Vertical">
                    <Label Text="{Binding MainPageTVShowsEmptyText}" HorizontalTextAlignment="Center"
                           LineBreakMode="WordWrap"/>
                </StackLayout>
            </CollectionView.EmptyView>
        </CollectionView>
    </RefreshView>
    <ActivityIndicator 
        HeightRequest="{StaticResource ActivityIndicatorHeight}"
        WidthRequest="{StaticResource ActivityIndicatorWidth}"
        IsRunning="{Binding MainPageIsWorking}" IsVisible="{Binding MainPageIsWorking}"/>
</Grid>

数据模板

<DataTemplate x:Key="MainPageTVShowsItemTemplate"
              x:DataType="local_helper:TVShow">
    <Border Padding="0" Margin="0">
        <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">
            <Grid.RowDefinitions>
                <RowDefinition Height="{StaticResource MainPageTVShowsItemHeight}"/>
                <RowDefinition Height="*"/>
            </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"/>
            <Label
                Text="{Binding Title, Mode=OneWay}"
                Grid.Row="1" HorizontalTextAlignment="Center"
                LineBreakMode="TailTruncation" Margin="0" Padding="0"
                MaxLines="2" HeightRequest="{StaticResource MainPageTVShowsLabelHeight}"/>
            <ActivityIndicator IsRunning="{Binding IsLoading}" IsVisible="{Binding IsLoading}" Grid.RowSpan="2"
                               WidthRequest="{StaticResource TVShowsItemTemplateIndicatorWidth}"
                               HeightRequest="{StaticResource TVShowsItemTemplateIndicatorHeight}"/>
        </Grid>
    </Border>
</DataTemplate>

Answer 1

正如@jason在上面的评论中指出的，我更改了

DataTemplate

中所有元素的背景颜色，发现问题是UI元素的高度和宽度属性不一致，主要是

Image

。我更改了属性，它修复了布局。谢谢你。