locked
ListView inside StackLayout: a height problem RRS feed

  • Question

  • User23520 posted

    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 Start, 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).

    (please excuse the cross posting on Stackoverflow)

    Sunday, July 6, 2014 4:23 PM

All replies

  • User61098 posted

    Running into same sort of layout problems with a ListView inside a StackLayout, bound to a viewmodels ItemSource. In my case the ListView doesn't appear (has Height=0) unless I specify a hard coded HeightRequest. Any updates on this?

    (Running Xamarin.Forms 1.2.2)

    Monday, July 21, 2014 9:10 AM
  • User23520 posted

    @ddotmunch? Unfortunately I have not been able to solve this. I have not received any suggestions either.

    Tuesday, July 22, 2014 10:45 AM
  • User14 posted

    ListView is not intended to always size itself to just fit its contents.

    Consider the common use-case: a ListView is added to a Page but the data in the list will be downloaded from a web service, so initially it is empty (the data comes later after an async web call). What size should the ListView be? It is intended to be a scrolling container that will be able to display all its cells, by scrolling, not by initially sizing itself. The number of cells will never affect its height.

    This gets further complicated if you nest scrolling controls inside each other (such as a ListView inside of a ScrollView. In theory the size that the scrolling contents can use is unbound (ie. because they're intended to scroll) so the contained controls really need to be told what size they should be. Nesting scrolling controls inside other scrolling controls is going to create issues unless you are very careful with your layouts.

    in short... a ListView should be sized either with specific width and height requests or in combination with other controls (using LayoutOptions). Refer to the views & layouts section of the intro doc for more info on the types of layouts and how they compare:

    Controls themselves are hosted inside of a layout. Xamarin.Forms has two different categories of layouts that arrange the controls in very different ways:

    • Managed Layouts - these are layouts that will take care of positioning and sizing child controls on the screen and follow the CSS box model. Applications should not attempt to directly set the size or position of child controls. One common example of a managed Xamarin.Forms layout is the StackLayout.
    • Unmanaged Layouts - as opposed to managed layouts, unmanaged layouts will not arrange or position their children on the screen. Typically, the user will specify the size and location of the child control as it is being added to the layout. The AbsoluteLayout is an example of an unmanaged layout control.

    Please post if you have further questions about this stuff works.

    Tuesday, July 22, 2014 5:01 PM
  • User23520 posted

    @CraigDunn? You are correct and got me on the right track. 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).

    @ddotmunch? I did not have to set a HeightRequest on my ListView to get this solution to work.

    Wednesday, July 23, 2014 8:45 AM
  • User24644 posted

    @HalvardHagesther? Is it possible for you to post the code you just described above to illustrate it better?

    Wednesday, July 23, 2014 3:59 PM
  • User23520 posted

    Sure, @ChristopherGozdziewski? .

    The main points are: 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.

    As I can't seem to get the Markdown to look pretty here I have also posted the code on stackoverflow.com/questions/24598261/xamarin-forms-listview-inside-stacklayout-how-to-set-height

    Thursday, July 24, 2014 7:45 AM
  • User67184 posted

    @HalvardHagesther?, I have the same problem, i used your method but dont work for me !

    Thursday, August 7, 2014 5:34 PM
  • User90085 posted

    @kameloulebsir.7777, Are you using XAML or C# for your layout?

    Tuesday, January 6, 2015 9:39 PM
  • User89739 posted

    I used the same code here but it doesn't work for me either, I have a personalized DataTemplate, could be that the problem? I'm using C# for the layout..

    Monday, January 19, 2015 4:13 PM
  • User1080 posted

    I'm having the same problem and Halvard's approach does not work for me. In my case the ListView is filling about 2/3 of the screen. I too am using a personalized DataTemplate and am also wondering if that is part of the problem.

    Friday, February 27, 2015 11:46 PM
  • User47803 posted

    Hello,

    I've used the same code as @HalvardHagesther and it worked. But with the new Xamarin Version 1.4.0 the height of the ListView doesn't match the height of the items in it anymore. I have a ScrollView with 3 ListViews on it and they all have more than the double size than they need.

    Monday, March 16, 2015 9:54 AM
  • User26934 posted

    You can put the list in a grid with a single row, and then set the height of the row based on the calculated height of the cells. Calculate the height in your custom cell renderer in OnBindingContextChanged. Keep a cumulative total of cell heights and set grid row height accordingly.

    Saturday, March 21, 2015 9:57 AM
  • User96012 posted

    Hi, @AlecTucker.1318 I've used your solution with some little changes as per my requirement and it's work for me with new xamarin version. But i don't think it is right solution for that but there is no other option. Anyhow it's working for me.

    thank you

    Wednesday, April 8, 2015 9:10 AM
  • User110928 posted

    @AlecTucker.1318 I have the same issue, But in my case I am having Listview inside relative layout, and it doesnt allow me to scroll the listview, Can you help me here ?

    Thursday, April 16, 2015 6:12 AM
  • User65389 posted

    @kameloulebsir.7777, @NeilMcKechnie, @mra, @AlecTucker.1318, @UddhaoPachrne, @rspl: I work with the newest .forms version (1.4.3-pre2) and also have this (more than) strange problem on one page (all c# without XAML).
    I show a ListView bound to a List with a custom data-template (ViewCell).
    The ListView is added to the main StackLayout with some more labels and an editor.
    The ListView takes to much space, so that there is a lot of free space showed after the ListView.
    I use the same ViewCell on various other pages (with ListViews) and also have the same page architecture on other pages, where I don't have such problems.
    If I have a look with the debugger at runtime, anything seems to be O.K.
    To add the LV in an additional StackLayout and set VerticalOptions = LayoutOptions.FillAndExpand don't help.
    If I remove the ListView from the page, the spacing between the controls is correct.
    I think, it may have something to do with the data-template (ViewCell).

    Do you have further information's to the problem? Thanks

    Tuesday, May 19, 2015 1:16 PM
  • User65389 posted

    Update: I have found an hint in another thread.
    If I set the VerticalOptions of the main StackLayout to LayoutOptions.Start:

    ErfassenStack.VerticalOptions = LayoutOptions.Start;

    I can change the size of the ListView and the additional space (after the ListView) has gone.
    I absolutely don't understand this as - like I wrote in my last posting - I use the same "page architecture" on other pages, where I don't have set LayoutOptions.Start and don't have this problem...
    But... it works now... :blush:
    So... If you have similar strange problems... check it out.... :smirk:

    Tuesday, May 19, 2015 2:08 PM
  • User135492 posted

    listView.HasUnevenRows = true;

    Tuesday, June 23, 2015 9:32 PM
  • User84954 posted

    listView.HasUnevenRows = true; works for android, but for IOS still has problems :( :( anyone ???

    Monday, July 27, 2015 4:49 PM
  • User65389 posted

    @Nininea: Works also for iOS (since a longer time now) :smile:

    Monday, July 27, 2015 4:51 PM
  • User84954 posted

    hm, it doesn't work here :( but in android looks fine

    Monday, July 27, 2015 4:54 PM
  • User84954 posted

    here is my listview

    listView.ItemTemplate = new DataTemplate (typeof(ListItemCell)); listView.HasUnevenRows = true;

    and ListItemCell:

    `public ListItemCell () { var nameLabel = new Label { HorizontalOptions = LayoutOptions.FillAndExpand }; nameLabel.SetBinding (Label.TextProperty, "Product.Name");

            var viewLayout = new StackLayout () {
                Orientation = StackOrientation.Vertical,
                VerticalOptions = LayoutOptions.FillAndExpand,
                Padding = 4,
                Children = { nameLabel, CreateDetailsLayout () }
            };
            View = viewLayout;
    
        }
    
        static StackLayout CreateDetailsLayout ()
        {
            var quantityName = new Label {
                HorizontalOptions = LayoutOptions.FillAndExpand,
                Text = "Quantity:"
            };
            var quantity = new Label {
                HorizontalOptions = LayoutOptions.FillAndExpand
            };
            quantity.SetBinding (Label.TextProperty, "Quantity");
    
            var priceName = new Label {
                HorizontalOptions = LayoutOptions.FillAndExpand,
                Text = "Price:"
            };
            var price = new Label {
                HorizontalOptions = LayoutOptions.FillAndExpand
            };
            price.SetBinding (Label.TextProperty, "Product.Price");
            var priceSymbol = new Label {
                HorizontalOptions = LayoutOptions.FillAndExpand,
                Text = "$"
            };
            var nameLayout = new StackLayout () {
                HorizontalOptions = LayoutOptions.StartAndExpand,
                Orientation = StackOrientation.Horizontal,
                VerticalOptions = LayoutOptions.FillAndExpand,
                Children = { quantityName, quantity, priceName, price, priceSymbol }
            };
            return nameLayout;
        }`
    
    Monday, July 27, 2015 4:56 PM
  • User84954 posted

    should I use ViewCellRenderer ?

    Monday, July 27, 2015 5:07 PM
  • User65389 posted

    If you don't set the height explicitly in your code (out of the posted code), I think, you have another problem with your layout... Sometimes the combination of options can give problems Not sure, but I would try to remove the vertical options to your SL (VerticalOptions = LayoutOptions.FillAndExpand) first..

    Monday, July 27, 2015 5:09 PM
  • User149289 posted

    Put listview in stacklayout then set stack layout propery "Spacing = 0". Done

    Wednesday, August 12, 2015 12:19 AM
  • User153505 posted

    I am facing a similar problem but I was not able to use the solutions posted here. I am using a custom DataTemplate with a ListView in my Xamarin.Forms app. The content within the template however is bleeding over to the next row (attached the image). Similar to another post, my layout does not work for iOS but works on Android:

    An alternative is to hard-code the 'RowHeight' for the ListView but I want the row's height to be updated according to its contents so was hoping for a more generic solution.

    My markup is so:

    <ContentPage.Content>
        <StackLayout VerticalOptions="FillAndExpand">
            <ListView
                x:Name="busesListView"
                HasUnevenRows="true">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <StackLayout
                                Orientation="Horizontal">
                                <Image Source="{Binding Icon}" />
                                <StackLayout
                                    VerticalOptions="FillAndExpand">
                                    <Label Text="{Binding Name}" />
                                    <Label Text="{Binding Capacity}" />
                                    <Label Text="{Binding Location}" />
                                </StackLayout>
                            </StackLayout>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </StackLayout>
    </ContentPage.Content>
    

    Any insights on how to fix this problem?

    Wednesday, September 9, 2015 8:54 PM
  • User137306 posted

    Hello all,

    I am using Relative Layout using xaml and I have 1 label at the top and 2 buttons at the bottom. I want to show listview at the middle position. ListView contains label and button. My ListView is acquiring all the space of the page. What should I do? I am using relative layout to give constraints so that it can work on all the iOS and Android devices.
    please help

    Wednesday, November 4, 2015 11:17 AM
  • User130334 posted

    Defining RowHeight seems to be important for this to work.

    Tuesday, December 15, 2015 8:42 AM
  • User5742 posted

    Specifying a single RowDefinition with RowHeight="Auto" makes a difference.. strange.

    Saturday, December 19, 2015 12:50 PM
  • User144996 posted

    RowHeight does not work me in iOS. How to overcome this issue? Please share ur ideas.

    Thanks

    Tuesday, December 29, 2015 12:18 PM
  • User11239 posted

    Was anyone able to figure this out? I'm having this same issue. Thanks!

    Tuesday, January 12, 2016 10:28 PM
  • User62876 posted

    Not the best solution but I implemented a workaround, maybe some one can improve it

    scrollView.SizeChanged += (s, e) =>
      {
          foreach (var child in stackLayout.Children)
          {  
              stackLayout.HeightRequest = stackLayout.Height + child.Height;
          }
      };
    

    What this does is adds extra height so that ListView's scroll does not get stuck.

    Wednesday, January 13, 2016 3:45 PM
  • User188698 posted

    listView.HasUnevenRows = true; worked for me in the context of a listView with a DataTemplate with stack layout inside and variable element displayed.

    Wednesday, March 9, 2016 4:19 PM
  • User188698 posted

    Checked on iOS and the issue is still there.

    @Nininea: did you find any solution?

    We also have a bunch of stack layout options. Seems to maybe have to do with the context displayed when mixed with horizontal layout for some lines in the listview element content

    <StackLayout Orientation="Vertical" Padding="5"> <controls:LabelEx Text="{Binding EventType}" FontAttributes="Bold" FontSize="16" /> <StackLayout Orientation="Horizontal"> <controls:LabelEx Text="Occured on" FontSize="16"/> <controls:LabelEx Text="{Binding EventDate, StringFormat='{}{0:MMMM, d yyyy}'}" FontSize="16" /> </StackLayout> <StackLayout Orientation="Horizontal" IsVisible="{Binding ValidUntilDate, Converter={StaticResource ValidityVisibilityConverter}}"> <controls:LabelEx Text="Valid until" FontSize="16"/> <controls:LabelEx Text="{Binding ValidUntilDate, StringFormat='{}{0:MMMM, d yyyy}'}" FontSize="16" /> </StackLayout> </StackLayout>

    Thursday, March 10, 2016 9:38 AM
  • User223597 posted

    Forget StackLayout. Use Grid with RowDefinition Height="Auto"

    Thursday, May 12, 2016 8:57 PM
  • User255419 posted

    Putting ListView in StackLayout and setting it's attribute of Spacing=0 worked for me. Thank you

    Wednesday, September 21, 2016 3:32 PM
  • User46691 posted

    The only way I've been able to overcome this issue, is to explicitly set the height of the StackLayout containing the Listview. My challenge now, is that I have uneven rows so explicit heights will be problematic. I am also building building a custom rendered ExpandableListView -> Android BaseExpandableListView haven't gotten to iOS yet. There are some examples out there of solutions for that, but they do not handle item.clicked events well, so most digging to do. Out of a year long build on our project, this is the most difficult UI issues we have faced...

    Saturday, November 5, 2016 3:02 PM
  • User238292 posted

    The solution for me was to calculate the total height of my rows by the amount of items from the source and binding this property. Example:

    string heightList;
    int heightRowsList = 90;
    
    public string HeightList 
    { 
        get 
        { 
            heightList = (Items.Count * heightRowsList).ToString(); 
            return heightList; 
        } 
    }
    

    And in my xaml looks like this:

        <ListView x:Name="ItemsList"  HasUnevenRows="True" 
                ItemsSource="{Binding Items}" 
                HeightRequest="{Binding HeightList}"></ListView>
    
    Monday, November 14, 2016 10:01 PM
  • User176749 posted

    @LuisMatos said: The solution for me was to calculate the total height of my rows by the amount of items from the source and binding this property. Example:

    string heightList;
    int heightRowsList = 90;
    
    public string HeightList 
    { 
      get 
      { 
          heightList = (Items.Count * heightRowsList).ToString(); 
          return heightList; 
      } 
    }
    

    And in my xaml looks like this:

        <ListView x:Name="ItemsList"  HasUnevenRows="True" 
              ItemsSource="{Binding Items}" 
              HeightRequest="{Binding HeightList}"></ListView>
    

    your solution has conflict. you use hasunevenrows true and you define even number for each row, 90 in your case.

    Sunday, November 20, 2016 3:20 AM
  • User238292 posted

    @batmaci

    This solution work for my, for now...

    Monday, November 21, 2016 3:09 PM
  • User176749 posted

    @LuisMatos said: @batmaci

    This solution work for my, for now...

    for sure it works for one device but when you actually try your solution on a bigger screen or smaller screen, you may get not expected view because you hardcode the size. This post is made for dynamic sizing. So it can adapt based on screen size of the device.

    Monday, November 21, 2016 4:16 PM
  • User238292 posted

    @batmaci said:

    for sure it works for one device but when you actually try your solution on a bigger screen or smaller screen, you may get not expected view because you hardcode the size. This post is made for dynamic sizing. So it can adapt based on screen size of the device.

    I'll check what it says, likewise thanks for the contribution

    Tuesday, November 22, 2016 5:28 PM
  • User253769 posted

    Hello. Is there any solution for this? I tried calculating the HeightRequest using the font size of the device.

    double SizeLabel = Device.GetNamedSize(NamedSize.Default, typeof(Label));
    double SizeCell = Device.GetNamedSize(NamedSize.Default, typeof(Cell));
    double SizeRow = (SizeCell / SizeLabel) * 17.327;
    MyListView.HeightRequest = (Items.Count > 0) ? (NumberOfRows * SizeRow * Items.Count) : 0;
    

    But in some devices I'm not obtaining a good result. Any ideas?

    Friday, December 30, 2016 9:18 AM
  • User260793 posted

    If you want to nest a ListView inside another scrollable view and calculate the exact height of it, better don't use a ListView at all. Instead use a StackLayout with templated items like the following: ` public class StackLayoutList : StackLayout {

        public static readonly BindableProperty ItemsSourceProperty = BindableProperty.Create("ItemsSource", typeof(IList), typeof(StackLayoutList), propertyChanged: OnItemsSourceChanged);
    
        public IList ItemsSource
        {
            get { return (IList)GetValue(ItemsSourceProperty); }
            set { SetValue(ItemsSourceProperty, value); }
        }
    
        public static readonly BindableProperty ItemTemplateProperty = BindableProperty.Create("ItemTemplate", typeof(DataTemplate), typeof(StackLayoutList), propertyChanged: OnItemTemplateChanged);
    
        public DataTemplate ItemTemplate
        {
            get { return (DataTemplate)GetValue(ItemTemplateProperty); }
            set { SetValue(ItemTemplateProperty, value); }
        }
    
        private static void OnItemTemplateChanged(BindableObject pObj, object pOldVal, object pNewVal)
        {
            var layout = pObj as StackLayoutList;
    
            if (layout != null && layout.ItemsSource != null)
                layout.BuildLayout();
        }
    
        private static void OnItemsSourceChanged(BindableObject pObj, object pOldVal, object pNewVal)
        {
            var layout = pObj as StackLayoutList;
    
            if (layout != null && layout.ItemTemplate != null)
                layout.BuildLayout();
        }
    
        private void BuildLayout()
        {
            Children.Clear();
    
            foreach (var item in ItemsSource)
            {
                var view = (View)ItemTemplate.CreateContent();
                view.BindingContext = item;
                Children.Add(view);
            }
        }
    }
    

    `

    Monday, April 10, 2017 8:55 PM
  • User40046 posted

    I've just spent the last hour debugging a listview scenario that I've used before without issue. I ended up patching up the issue by providing a height request based on the height of the rows (by adding up the grid row heighrequests) and the number of items. I know this is a very fragile "solution", but hopefully I will come back to this at a later date.

    Sunday, April 16, 2017 11:38 PM
  • User307736 posted

    You can check an example for xamarin evolve (https://github.com/xamarinhq/app-evolve) where they do exactly this, updating the heightrequest with a row quantity calculated height. Doesn't look fragile tbh. Wouldn't work for uneven rows tho.

    Monday, April 17, 2017 6:08 AM
  • User318708 posted

    Hey Guys nothing worked for me, eventually had success by setting MinimumHeightRequest property. See if works for you aswell.

    >     <ListView x:Name="list"   
    >       SeparatorColor="#DDD"   
    >       MinimumHeightRequest="180">
    
    Monday, May 1, 2017 11:13 AM
  • User265273 posted

    @maxx313, Excellent!

    I would added a check on null:

        private void BuildLayout()
        {
            Children.Clear();
    
                if(ItemsSource == null)
              return;
    
            foreach (var item in ItemsSource)
            {
                var view = (View)ItemTemplate.CreateContent();
                view.BindingContext = item;
                Children.Add(view);
            }
        }
    
    Friday, May 12, 2017 6:10 PM
  • User170628 posted

    I also faced to this issue, The solution is we have to set the Height of the list view according to the height of number of rows manually in code behind. Below link describes how I did fix it... https://xamarinsharp.com/2017/05/16/listview-height-issue-in-xamarin-forms-how-to-solve-it/

    Tuesday, May 16, 2017 7:14 PM
  • User170628 posted

    And also I have tried to calculate the height using MVVM when changing the Item source of the List View. It also became successful.

    And I wrote an article that how to do it. and the article consists of my code.

    https://xamarinsharp.com/2017/05/20/xamarin-forms-listview-height-change-dynamically-using-mvvm-and-also-solve-empty-space-issue/

    Sunday, May 21, 2017 2:13 PM
  • User203085 posted

    @maxx313 do we have to make a renderer in each platform to use it?

    Thursday, June 8, 2017 9:32 AM
  • User203085 posted

    @maxx313 I used the below code and it is blank?

    <controls:StackLayoutList ItemsSource="{Binding MyData}">
        <controls:StackLayoutList.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <Grid Padding="10">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>
                        <Label Text="{Binding Name}" FontAttributes="Bold" TextColor="Teal" FontSize="21" />
                        <Label Grid.Row="1" Text="{Binding Age}" TextColor="Teal" FontSize="15"/>
                    </Grid>
                </ViewCell>
            </DataTemplate>
        </controls:StackLayoutList.ItemTemplate>
    </controls:StackLayoutList>
    
    Thursday, June 8, 2017 9:43 AM
  • User260793 posted

    @MarkCouvaras said: @maxx313 do we have to make a renderer in each platform to use it?

    No, you don't need a custom renderer.

    @MarkCouvaras said: @maxx313 I used the below code and it is blank?

    <controls:StackLayoutList ItemsSource="{Binding MyData}">
        <controls:StackLayoutList.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <Grid Padding="10">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>
                        <Label Text="{Binding Name}" FontAttributes="Bold" TextColor="Teal" FontSize="21" />
                        <Label Grid.Row="1" Text="{Binding Age}" TextColor="Teal" FontSize="15"/>
                    </Grid>
                </ViewCell>
            </DataTemplate>
        </controls:StackLayoutList.ItemTemplate>
    </controls:StackLayoutList>
    

    Remove the ViewCell from the template, it has no use there and maybe is even the reason why the view stays blank. The code should work if the binding is set up properly, and the source contains data.

    Sunday, June 18, 2017 11:00 AM
  • User265685 posted

    Hi All,

    I have a nice and simple solution for that. An Absolute layout saves my day. You can select Relative layout as well.

    <AbsoluteLayout>
        <ScrollView AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All">
          <StackLayout VerticalOptions="Fill">
            <ListView x:Name="lvChapel" HasUnevenRows="True" IsPullToRefreshEnabled="True" Refreshing="lvChapelRefreshing">
                <!-- your code ; ItemTemplate etc... -->
            </ListView>
          </StackLayout>
        </ScrollView>
      </AbsoluteLayout>
    

    Hope that solution helps... :)

    Thursday, June 29, 2017 12:25 PM
  • User210409 posted

    @BuddhimaKudagama said: And also I have tried to calculate the height using MVVM when changing the Item source of the List View. It also became successful.

    And I wrote an article that how to do it. and the article consists of my code.

    https://xamarinsharp.com/2017/05/20/xamarin-forms-listview-height-change-dynamically-using-mvvm-and-also-solve-empty-space-issue/

    This works very well. Thanks for posting.

    Sunday, July 9, 2017 9:40 PM
  • User170628 posted

    @SethSharp said:

    @BuddhimaKudagama said: And also I have tried to calculate the height using MVVM when changing the Item source of the List View. It also became successful.

    And I wrote an article that how to do it. and the article consists of my code.

    https://xamarinsharp.com/2017/05/20/xamarin-forms-listview-height-change-dynamically-using-mvvm-and-also-solve-empty-space-issue/

    This works very well. Thanks for posting. Happy to hear that.

    Tuesday, July 11, 2017 5:39 AM
  • User203085 posted

    @maxx313 sorry it took me so long to reply. Just wanted to say thank you for your advice it worked perfectly

    Tuesday, August 1, 2017 9:42 AM
  • User302776 posted

    @maxx313 oh my Gosh, amazing solution. Thank u very much!

    Thursday, August 24, 2017 1:53 PM
  • User347354 posted

    @RobsonGilli said: listView.HasUnevenRows = true;

    It worked for me! Thx!

    Saturday, September 16, 2017 12:43 AM
  • User326004 posted

    @BuddhimaKudagama said: I also faced to this issue, The solution is we have to set the Height of the list view according to the height of number of rows manually in code behind. Below link describes how I did fix it... https://xamarinsharp.com/2017/05/16/listview-height-issue-in-xamarin-forms-how-to-solve-it/

    Thanks for sharing link. It works perfectly!!

    Wednesday, September 20, 2017 11:09 AM
  • User342273 posted

    @maxx313 StackLayout is not refreshes on add elements in Item source

    Wednesday, September 27, 2017 6:12 PM
  • User342273 posted

    @maxx313 StackLayout is not refreshing on adding elements in Observable list binded to Item source

    Wednesday, September 27, 2017 6:16 PM
  • User351585 posted

    if data set are overlapping simply change the listview height as : RowHeight="50"

    Friday, October 6, 2017 5:49 AM
  • User144470 posted

    HasUnevenRows="True"

    Monday, October 23, 2017 2:35 AM
  • User31568 posted

    i have the same problem. Listview is not taking the whole height as you can see in the attached (see marked with RED)

    Here is my XAML:

    <?xml version="1.0" encoding="UTF-8"?>
    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
        x:Class="Zeera.ZeeraCategory"
        ControlTemplate="{StaticResource MainPageTemplate}">
        <ContentPage.Content>
            <StackLayout VerticalOptions="FillAndExpand" Spacing="0" Padding="5">
              <ListView x:Name="listViewCategory" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" HasUnevenRows="true" ItemTapped="OnTapped" IsVisible="false">
                <ListView.ItemTemplate>
                  <DataTemplate>
                    <ViewCell>
                        <Image Margin="10" Aspect="AspectFill" HorizontalOptions="FillAndExpand" Source="{Binding item_image}" />
                    </ViewCell>
                  </DataTemplate>
                </ListView.ItemTemplate>
              </ListView>
              <ActivityIndicator x:Name="loadingCategory" VerticalOptions="Center" HorizontalOptions="Center" AbsoluteLayout.LayoutFlags="PositionProportional" AbsoluteLayout.LayoutBounds="0.5,0.5,-1,-1" Color="Blue" />
            </StackLayout>
        </ContentPage.Content>
    </ContentPage>
    

    Saturday, November 11, 2017 11:00 PM
  • User358490 posted

    Just download flowListView package in the last version and use the field called RowHeight. This Xamarin software is just a piece of sh**t without using packages .....

    Tuesday, November 14, 2017 10:57 AM
  • User347602 posted

    ScrollView is already supported in ListView. You don't need to add it more.

    When your data in ListView still have space enough to show on the page, ScrollView cannot move. But if your data in ListView is overloaded on page, ScrollView can move UP and Down.

    Goodluck! :)

    Friday, November 17, 2017 7:29 AM
  • User342918 posted

    Hey all,

    If your need is to just add a few elements to the bottom or top of your list so that it scrolls altogether, you can accomplish this using the footer and header properties. No need to measure out the heights. Data bindings work as well.

    Example below (done in code) where I have a list view made of many custom templates (using a template selector). That part of the code however is omitted:

    `

            aList= new ListView();
            aList.HasUnevenRows = true;
            aList.ItemTemplate = new ViewTemplating.aListViewTemplateSelector();
            aList.SeparatorColor = (Color)App.Current.Resources["BACKGROUND_COLOR"];
            aList.Margin = new Thickness(10, 0);
    
            aList.Footer = new StackLayout
            {
                VerticalOptions = LayoutOptions.FillAndExpand,
                Children = {
                    generalCommentsLabel,
                    generalComments,
                    new StackLayout
                    {
                        Margin = new Thickness(0,0,0,10),
                        Orientation = StackOrientation.Horizontal,
                        Children =
                        {
                            mileageSumLabel,
                            odometerMileageSum
                        },
                    },
                }
            };
          Content = aList;
    

    `

    Wednesday, December 27, 2017 8:47 PM
  • User333543 posted

    Hey all,

    I have tested different options in this thread now, and the following worked for me both in iOS and Android (I had issues in iOS with a weird bounce at the bottom of the page. The last few items simply were outside of the viewport of the screen) * ListView inside StackLayout inside AbsoluteLayout. * I did not need spacing 0 or setting setting manual heights. I have uneven rows. * I used an absolutelayout because I had a background image * I load data dynamically from an async method fired off in OnAppearing.

    XAML: ```

    ```

    Friday, March 30, 2018 7:52 AM
  • User365795 posted

    @maxx313 said: If you want to nest a ListView inside another scrollable view and calculate the exact height of it, better don't use a ListView at all. Instead use a StackLayout with templated items like the following: ` public class StackLayoutList : StackLayout {

        public static readonly BindableProperty ItemsSourceProperty = BindableProperty.Create("ItemsSource", typeof(IList), typeof(StackLayoutList), propertyChanged: OnItemsSourceChanged);
    
        public IList ItemsSource
        {
            get { return (IList)GetValue(ItemsSourceProperty); }
            set { SetValue(ItemsSourceProperty, value); }
        }
    
        public static readonly BindableProperty ItemTemplateProperty = BindableProperty.Create("ItemTemplate", typeof(DataTemplate), typeof(StackLayoutList), propertyChanged: OnItemTemplateChanged);
    
        public DataTemplate ItemTemplate
        {
            get { return (DataTemplate)GetValue(ItemTemplateProperty); }
            set { SetValue(ItemTemplateProperty, value); }
        }
    
        private static void OnItemTemplateChanged(BindableObject pObj, object pOldVal, object pNewVal)
        {
            var layout = pObj as StackLayoutList;
    
            if (layout != null && layout.ItemsSource != null)
                layout.BuildLayout();
        }
    
        private static void OnItemsSourceChanged(BindableObject pObj, object pOldVal, object pNewVal)
        {
            var layout = pObj as StackLayoutList;
    
            if (layout != null && layout.ItemTemplate != null)
                layout.BuildLayout();
        }
    
        private void BuildLayout()
        {
            Children.Clear();
    
            foreach (var item in ItemsSource)
            {
                var view = (View)ItemTemplate.CreateContent();
                view.BindingContext = item;
                Children.Add(view);
            }
        }
    }
    

    `

    I had to add a null check on foreach (var item in ItemsSource) or Prism Navigation would give me a hard time.

    Wednesday, August 15, 2018 6:20 PM
  • User380049 posted

    I Am see This in here

    https://blog.verslu.is/xamarin/xamarin-forms-xamarin/scrollbars-listview-scrollbarvisibility/

    Saturday, January 19, 2019 10:00 AM
  • User383888 posted

    For me this was the fast and clean solution:

    private void ListView_ItemAppearing(object sender, ItemVisibilityEventArgs e) { if ((sender as ListView).ItemsSource != null) (sender as ListView).HeightRequest = ((sender as ListView).ItemsSource as ObservableCollection).Count * (sender as ListView).RowHeight; }

    Wednesday, May 8, 2019 12:27 AM
  • User380224 posted

                            <RowDefinition Height="30"></RowDefinition>
    
                            <RowDefinition Height="30"></RowDefinition>
    
                            <RowDefinition Height="1"></RowDefinition>
    
                            <RowDefinition Height="40"></RowDefinition>
    
                        </Grid.RowDefinitions>
    

    you have to hard code like this, then the height will take as mentioned otherwise it will take default cell size. :o

    Friday, July 12, 2019 9:49 AM
  • User387725 posted

    @RobsonGilli said: listView.HasUnevenRows = true;

    Had the same problem. you solved it.

    Thank you so much !

    Wednesday, August 7, 2019 11:54 AM
  • User389090 posted

    I had the same problem now, solved with this <StackLayout x:Name="StackLayoutDetalhesTreino" HeightRequest="{Binding Path=Height, Source={x:Reference StackLayoutDetalhesTreino}}"

    I tried to force stacklayout height taking her own height, it worked for me

    Sunday, September 15, 2019 7:05 PM
  • User389137 posted

    Try to set listview out of the SL but set in grid. its work for me. < Grid x:Name="masterGrid" AbsoluteLayout.LayoutBounds="0, 0, 1, 1" AbsoluteLayout.LayoutFlags="All" ColumnSpacing="1" RowSpacing="1" > < Grid.RowDefinitions> < RowDefinition Height="50"/>< RowDefinition Height="*"/>< RowDefinition Height="auto"/> < /Grid.RowDefinitions>< StackLayout Grid.Row="0">[your extra code]< /stacklayout>< Listview Grid.Row="1" VerticalOptions="FillAndExpand" />< StackLayout Grid.Row="2"> [your extra code] < /stacklayout> < /grid> Try This one. i ts work for me

    Wednesday, September 18, 2019 1:59 PM
  • User390185 posted

    This solution worked for me only putting the listView inside a StackLayout (even without options)..

    @LuisMatos said: The solution for me was to calculate the total height of my rows by the amount of items from the source and binding this property. Example:

    string heightList;
    int heightRowsList = 90;
    
    public string HeightList 
    { 
      get 
      { 
          heightList = (Items.Count * heightRowsList).ToString(); 
          return heightList; 
      } 
    }
    

    And in my xaml looks like this:

        <ListView x:Name="ItemsList"  HasUnevenRows="True" 
              ItemsSource="{Binding Items}" 
              HeightRequest="{Binding HeightList}"></ListView>
    
    Friday, December 6, 2019 8:49 AM
  • User190593 posted

    Instead of using a ListView inside a StackView I ended up using a StackView inside another StackView. Could use templates using the BindableLayout.ItemsSource.

    See this answer which helped me.

    Code:

    <StackLayout BindableLayout.ItemsSource="{Binding list}">
        <BindableLayout.ItemTemplate>
            <DataTemplate>
                ...
            </DataTemplate>
        </BindableLayout.ItemTemplate>
    </StackLayout>
    
    Tuesday, January 14, 2020 2:54 PM
  • User396711 posted

    I know it is a old thread. But I had this issue and finally solved it after months. I am testing it on iPhone XR. Basically, the listview was not taking up the entire screen when i open the screen when the device is flat.(https://github.com/xamarin/Xamarin.Forms/issues/10541). I think it is pretty cool that someone noticed that the issue was the device being flat.

    This one worked for me. I am almost sure it should work for everyone.
    Make sure your Listview is direct child of Main StackLayout.

    Thursday, March 11, 2021 6:34 PM
  • User396711 posted

    This is how it should look:

    <ContentPage> <StackLayout> <ListView> </ListView> </StackLayout> </ContentPage>

    Thursday, March 11, 2021 7:58 PM