How remove space under collectionview or Listview

AS_H 41

Hi guys

I use Template Selector

 <ListView x:Name="Msg" BackgroundColor="Transparent"  Grid.Row="2" 
                              AutomationProperties.IsInAccessibleTree="True" 
                              ItemsSource="{Binding RepliesItems}" HasUnevenRows="True" 
                              ItemTemplate="{StaticResource TemplateSelector}" Margin="5,0,5,5">
                </ListView>

1 answer

Kyle Wang 5,531

Hi ASH-1598,

Welcome to our Microsoft Q&A platform!

To remove the space under the Listview, you need to set the Margin to "5,0,5,0". The last number represents the height of the bottom thickness, so you need to set it to "0".

Also, if you want to remove the space between the Grid.Rows, you can create a custom Style for Grid.

According to the source code, we can know that the default value is 6 for both RowSpacing and ColumnSpacing. So setting RowSpacing and ColumnSpacing to 0 will remove the sapce immediately.

Here is the xaml demo.

<ContentPage.Resources>  
    <ResourceDictionary>  
        <Style TargetType="Grid" x:Key="CustomGrid">  
            <Setter Property="ColumnSpacing" Value="0" />  
            <Setter Property="RowSpacing" Value="0" />  
        </Style>  
    </ResourceDictionary>  
</ContentPage.Resources>  
  
<Grid RowDefinitions="*,*,*,*" Style="{StaticResource CustomGrid}">  
    <BoxView BackgroundColor="Red" VerticalOptions="FillAndExpand"/>  
    <BoxView Grid.Row="1" BackgroundColor="Yellow" VerticalOptions="FillAndExpand"/>  
    <ListView x:Name="Msg" BackgroundColor="Blue"  Grid.Row="2"   
                            AutomationProperties.IsInAccessibleTree="True"   
                            ItemsSource="{Binding RepliesItems}" HasUnevenRows="True"  
                            ItemTemplate="{StaticResource TemplateSelector}" Margin="5,0,5,0">  
    </ListView>  
    <BoxView Grid.Row="3" BackgroundColor="Green" VerticalOptions="FillAndExpand"/>  
</Grid>

Regards,
Kyle

If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

AS_H 41 Reputation points

2021-07-13T11:21:06.043+00:00

Thank you Mr.Kyle

to clarify further

The problem appears when I add a listView inside ScrollView

EX:
<ScrollView>

<ListView x:Name="Msg" BackgroundColor="Transparent" Grid.Row="2"
AutomationProperties.IsInAccessibleTree="True"
ItemsSource="{Binding RepliesItems}" HasUnevenRows="True"
ItemTemplate="{StaticResource TemplateSelector}" Margin="5,0,5,5">
</ListView>

</ScrollView>

Kyle Wang 5,531

@AS_H A simple way to remove the space is setting the "HeightRequest" for the ListView.

<ListView x:Name="Msg" BackgroundColor="Yellow"     
            HeightRequest="100"  
            ItemsSource="{Binding RepliesItems}" HasUnevenRows="True" Margin="5,0,5,0">

Or set it to the height of the Grid.Row using relative bindings.

<ScrollView Grid.Row="2" BackgroundColor="Blue">  
    <StackLayout>  
        <ListView x:Name="Msg" BackgroundColor="Yellow"     
                    HeightRequest="{Binding Source={RelativeSource AncestorType={x:Type ScrollView}, AncestorLevel=1}, Path=Height}"  
                    ItemsSource="{Binding RepliesItems}" HasUnevenRows="True" Margin="5,0,5,0">  
            ...  
        </ListView>  
        <Button Text="test" HeightRequest="300"/>  
        <Label Text="Hello" HeightRequest="400"/>  
    </StackLayout>  
</ScrollView>