Xamarin.Forms: ListView inside StackLayout: How to set height?

Question

In a ContentPage I have a ListView inside a StackLayout inside a ScrollView. The ListView is populated (ItemSource is set) in the ContentPage when OnAppearing gets called and I can see that the list is populated in the emulator. The StackLayouts orientation is Vertical and below the ListView I have a Button.

My problem is that no matter how many elements the ListView has, it gets the height of 53.33. I would like the height of the ListView to match the total height of the items in it. By setting HeightRequest I can set the height of the ListView to anything I want, but since I do not know the height of the items inside the ListView the result is most often that the distance to the button below it is incorrect and therefore looks ugly. I have tried to set VerticalOptions on both the ListView and the StackLayout to Startand other settings, but this does not change the height from 53.33 (and if I try to combine using HeightRequest and Start it turns out that HeightRequest wins out).

How can I solve this?

(please excuse the cross posting from Xamarin forum)

someone help me for this question stackoverflow.com/questions/58329028/… — qwertyuio
– qwertyuio, Commented Oct 10, 2019 at 18:48
someone help me for this question stackoverflow.com/questions/58329028/… — qwertyuio
– qwertyuio, Commented Oct 10, 2019 at 18:51

Eilon · Accepted Answer · 2019-06-28 23:11:21Z

25

With the new BindableLayout feature in Xamarin Forms 3.5 you can easily use the ItemsSource on StackPanel.

So, basically you can write something like this:

<StackLayout BindableLayout.ItemsSource="{Binding list}">
    <BindableLayout.ItemTemplate>
        <DataTemplate>
            ...
        </DataTemplate>
    </BindableLayout.ItemTemplate>
</StackLayout>

You can read more about it here: https://blog.xamarin.com/xamarin-forms-3-5-a-little-bindable-love/

edited Jun 28, 2019 at 23:11

Eilon

25.7k3 gold badges88 silver badges105 bronze badges

answered Feb 9, 2019 at 14:24

mehrandvd

9,18414 gold badges68 silver badges121 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

NovaJoe Over a year ago

Effing brilliant! How did I miss this??? The ability to bind to a StackLayout is awesome. I'm using it in a place where I need to provide a small preview list of a larger list that will be presented in its own proper detail view. Binding to a StackLayout saved me all the headaches associated with getting a ListView to size appropriately and disable scrolling & tap highlighting, etc. Very cool.

Jorge L Hernandez Over a year ago

Loved this! Use this and forget about all the problems to deal with ListViews.

lestersconyers Over a year ago

FYI, the BindableLayout performance is poor. Noticeably slower than ListView when ItemSource exceeds 15-20 items.

mehrandvd Over a year ago

@lestersconyers I think BindableLayout is not the option when the performance matters. In the situations which performance is important, the items are too many, so a solution with virtualization should be selected, like ListView or ... The BindableLayout best fits for situations with few and limited items.

csstudent1418 Over a year ago

But this way you cannot bind the selected Item can you ?

Halvard · Accepted Answer · 2014-07-24 07:44:51Z

20

The solution in my case was to put the ListView inside a StackLayout and then put that StackLayout inside the main StackLayout. Then I could set the VerticalOptions = LayoutOptions.FillAndExpand on the inner StackLayout (the one containing the ListView) with the result that the ListView got the space it needed (which of course varies depending on the data).

Here is the main code:

listView.ItemsSource = alternativeCells;
listView.ItemSelected += ListViewOnItemSelected;
var listStackLayout = new StackLayout
{
    VerticalOptions = LayoutOptions.FillAndExpand,
    Orientation = StackOrientation.Vertical
};
listStackLayout.Children.Add(listView);
_stackLayout.Children.Add(listStackLayout);

As you see, I added a new StackLayout with the only purpose of putting the ListView inside it. Then I put that listStackLayout inside the main _stackLayout.

See the post on this Xamarin forum post for more information

edited Jul 24, 2014 at 7:44

answered Jul 23, 2014 at 8:57

Halvard

4,0017 gold badges42 silver badges54 bronze badges

3 Comments

nix Over a year ago

I cannot recreate your solution. could you be more specific? (for example, say options of other elements, like parent stacklayout)

Halvard Over a year ago

@NikaGamkrelidze Unfortunately I do not have access to the code any longer. Sorry!

Exa Over a year ago

I ran into the same problem but your soultion did not help me. I can't believe this problem is around for 3 years and they still have not fixed it. My ListView always uses more space than it would need to display the items.

Norbor Illig · Accepted Answer · 2015-06-23 21:25:28Z

18

I ran into the same problem, and for me this worked like a charm:

listView.HasUnevenRows = true;

(http://developer.xamarin.com/guides/cross-platform/xamarin-forms/working-with/listview/#Display_Rows_with_Variable_Heights)

answered Jun 23, 2015 at 21:25

Norbor Illig

6587 silver badges15 bronze badges

1 Comment

Denis Vitez Over a year ago

This fixed my issue, where list had only one row at the begining and after adding rows, list would not resize to take all available height.

Marcio Martins · Accepted Answer · 2016-05-06 20:32:27Z

9

I had the same problem, and this was the only thing I did that solved for me (in XAML):

<StackLayout Orientation="Vertical"
             VerticalOptions="Fill"
             HorizontalOptions="StartAndExpand">
    <ListView VerticalOptions="FillAndExpand"
              RowHeight="<some row height>">
    </ListView>
</StackLayout>

Hope it works!

answered May 6, 2016 at 20:32

Marcio Martins

3504 silver badges13 bronze badges

Comments

Vinod Kumar · Accepted Answer · 2016-05-22 07:29:34Z

8

Below code worked for me,

protected override void OnAppearing()
{
base.OnAppearing(); 
listViewOrderCloths.HeightRequest = model.ListOrderedCloths.Count*100)/2 ;
}

answered May 22, 2016 at 7:29

Vinod Kumar

1372 silver badges10 bronze badges

Comments

BRass · Accepted Answer · 2016-10-14 17:43:13Z

I had a similar struggle, with a slightly different solution. First, setting a RowHeight on the ListView seemed to be pivotal. Second, I was running into a binding + timing issue. If the ListView was displayed and had no contents, it was set to a default height (showing the empty space). If I moved away from this page and came back, the size was fine.

So my approach was to bind the ListView's visibility to the presence (or lack of) something being bound to. Then when data came back, the ListView became visible and had the proper size.

<ListView x:Name="lvSettlements" ItemsSource="{Binding RecentSettlements}"  VerticalOptions="FillAndExpand" RowHeight="25" IsVisible="{Binding RecentSettlements, Converter={StaticResource nullConverter}}">
...SNIP...
</ListView>

Ian Warburton · Accepted Answer · 2018-04-26 15:07:23Z

0

On Android, my table created in code was leaving gaps above and below it.

This fixed it...

HeightRequest="1000000"

I think I have the hackiest solution.

edited Apr 26, 2018 at 15:07

answered Apr 26, 2018 at 14:47

Ian Warburton

15.8k25 gold badges120 silver badges211 bronze badges

Comments

James John McGuire 'Jahmic' · Accepted Answer · 2018-12-26 13:08:03Z

The accepted answer wasn't applicable to my situation, where my ListView might be longer then the length of the display, hence it needs be placed within a ScrollView, which brings back the empty space.

They way I solved this, was to have top level StackLayout and then place the ListView in an immediate ScrollView, like the following XAML:

<?xml version="1.0" encoding="utf-8" ?>
<local:ContentPage>
    <StackLayout x:Name="entirePage">
        <ScrollView VerticalOptions="FillAndExpand"
            Orientation="Vertical">
            <ListView x:Name="listView" ItemsSource="{Binding Items}"
                Margin="0">
                <!-- ListView Stuff -->
            </ListView>
        </ScrollView>
    </StackLayout><!--entirePage-->
</local:ContentPage >

Collectives™ on Stack Overflow

Xamarin.Forms: ListView inside StackLayout: How to set height?

8 Answers 8

5 Comments

3 Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

5 Comments

3 Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related