Sergio
Sergio

Reputation: 197

Excessive space in the ListView on Xamarin

i am using Xamarin to realize a listView that is filled dynamically with a list of object. The main problem is that even i use a static list of 2 elements (for example) there is, in the view, a blank space belonging the listView. The inherent code is the following:

SfidePage.xaml

          <ListView
                Grid.Row="2"
                x:Name="sfideLanciate"
                HasUnevenRows="true"
                SeparatorVisibility="None"
                >
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <ViewCell>

                                    <Grid
                                BackgroundColor="{StaticResource OpzioniTitleBackgroundColor}"
                                Margin="0,1,0,0"
                                RowSpacing="0"
                                ColumnSpacing="10"
                                VerticalOptions="Start"
                                Padding="5"
                            >
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="2*"/>
                                            <ColumnDefinition Width="7*"/>
                                            <ColumnDefinition Width="1*"/>
                                        </Grid.ColumnDefinitions>

                                        <ci:CircleImage Source="avatar" Aspect="AspectFill" 
                                                HorizontalOptions="Center" VerticalOptions="Start" 
                                                HeightRequest="70" WidthRequest="70" 
                                                BorderColor="{StaticResource OpzioniLineDividerBackground}" BorderThickness="3" 
                                                Grid.Row="0"></ci:CircleImage>

                                        <Grid RowSpacing="0" ColumnSpacing="0" Grid.Column="1" Grid.Row="0">
                                            <Grid.RowDefinitions>
                                                <RowDefinition />
                                                <RowDefinition />
                                                <RowDefinition Height="Auto"/>
                                            </Grid.RowDefinitions>
                                            <Label Text="In attesa di Kyle Cain" FontSize="16" Grid.Row="0" TextColor="Black" FontAttributes="Bold"></Label>
                                            <Label Text="Ardeatina Roma 70" Grid.Row="1" TextColor="Black"></Label>
                                            <Label Text="10 DOMANDE - Argomento: Pannelli integrativi" Grid.Row="2" TextColor="{StaticResource LightGreyInfo}"></Label>
                                        </Grid>
                                        <Label Text="1h" Grid.Column="2" Grid.Row="0" TextColor="{StaticResource LightGreyInfo}" HorizontalTextAlignment="Center"></Label>
                                    </Grid>

                            </ViewCell>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>

SfidePage.xaml.cs

public partial class SfidePage : ContentPage
{
    public SfidePage ()
    {
        InitializeComponent ();

        sfideLanciate.ItemsSource = new List<int> { 1, 2 };

    }
}

The output is the following: https://i.sstatic.net/O40Z5.png

"SFIDE COMPLETATE" is a Stack Layout after the listView, so the blank space is part of the listView. How can i adapt the height of listView to its elements?

Upvotes: 0

Views: 235

Answers (3)

user3988148
user3988148

Reputation: 87

In the Listview, add and set the property "HasUnevenRows = true".

If it doesn't have that property it doesn't bind items to the uneven rows, but still displays them as blank rows.

Upvotes: 0

Dean Kuga
Dean Kuga

Reputation: 12119

You set the top margin to 1 in your code: Margin="0,1,0,0" change that to Margin="0" and the space should be gone...

Upvotes: 0

Neto Costa
Neto Costa

Reputation: 252

It might be related to the padding property, have you tried removing it? Also, you set the Margin-Top as 1, this could probably create the Space too.

Upvotes: 0

Related Questions