question

ASH-1598 avatar image
0 Votes"
ASH-1598 asked KyleWang-MSFT edited

How remove space under collectionview or Listview

Hi guys

How remove space under collectionview or Listview


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>





dotnet-xamarin
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

1 Answer

KyleWang-MSFT avatar image
0 Votes"
KyleWang-MSFT answered KyleWang-MSFT edited

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.

· 2
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

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>

0 Votes 0 ·

@ASH-1598 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>
0 Votes 0 ·