I am working on a project to port my previous app (Android based) to .Net (8.0) MAUI. So, I have ported some code very easily, however, I am facing an issue where I am not able to find any help on the internet.
As you can see in the below picture that there is some white space between the Views (Image
and the Label
) and at the top of the Image
and at the bottom of the Label
as well.
I have tried everything with the views as you can see in the code but I am not able to remove the extra whitespace. I have set the Margin
and Padding
properties to 0
in the DataTemplate
as well but still nothing changed. Moreover, I am not able to find anything on the internet which can tell me why this is happening or it is the default behaviour.
Can someone please guide me in the right direction so that I can adjust the space as needed? Thank you in advance.
MainPage
<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>
Data Template
<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>