Xamarin Forms : ListView Height Change Dynamically, using MVVM and also, Solve Empty Space issue

In my previous article, I have explained how to remove the empty space of a List view in Xamarin forms.

To Read the article, Please click the below link.. 🙂


In this article, I’ll describe how to dynamically change the List view height using MVVM bindings.


As a example I have taken a List of “Friends” and when Click the “Add Friend” button, The List view height will change automatically according to the item count. 


When using Observable Collection, It automatically update the properties of the control that the Items has bind. So, when there are many items in a list, no need to change the height using MVVM and it automatically change the size. This method is useful when there are few items in a List View such as 1-5 items.


Application structure

Here I have created a View (XAML UI and code behind), Model and a ViewModel.

a app

The Friend Model

public class FriendModel
public string Name { get; set; }
public string Email { get; set; }
public int ID { get; set; }


The ViewModel, “MainPageViewModel ” 

Here you can see a command “ChangeListViewSizeCommand” in the view Model and ChangeListViewSize() method has bind to the command.

I have bind it to The “Add New Friend” button in the MainPage view.  When user click the button, it will add a new record to the Friend collection wich is a Observable Collection and then, calculates the height according to the number of items in the collection and Set the value to the “Height” property.

In the setter of the “Height” property, I have called the OnPropertyChanged event. Then the changes of the values will apply to the UI automatically.

Don’t forget to add below namespaces to the View Model.

using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Runtime.CompilerServices;

public class MainPageViewModel : INotifyPropertyChanged

public MainPageViewModel()
ChangeListViewSizeCommand = new Command(ChangeListViewSize);

int count;
int height;
ObservableCollection<FriendModel> friends;

public int Height
return height;
height = value;

public ObservableCollection<FriendModel> Friends
return friends;
friends = value;
Height = (friends.Count * 40) + (friends.Count * 10);

public ICommand ChangeListViewSizeCommand { get; }

void ChangeListViewSize()
count = friends.Count + 1;
friends.Add(new FriendModel() { ID = count, Name = string.Format("Friend {0}", count), Email = string.Format("friend{0}@sample.com", count) });
Height = (friends.Count * 40) + (friends.Count * 10);

public event PropertyChangedEventHandler PropertyChanged;
void OnPropertyChanged([CallerMemberName]string propertyName = "") =>
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));

The MainPage View XAML code

Here you can see HeightRequest property has bond by Height property of the View model. And the Height of the list view will adjust according to the value of the Height property in the view model.

2 height binding

And to the “Add New Friend” button…

I have Bond the command (“ChangeListViewSizeCommand“).

4 command

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"              xmlns:local="clr-namespace:ListViewApp"              x:Class="ListViewApp.MainPage">

            <BoxView HeightRequest="10" HorizontalOptions="FillAndExpand"/>
            <Image Grid.Row="0" Grid.Column="1" HorizontalOptions="Center" VerticalOptions="Center" 		        	 HeightRequest="100" WidthRequest="100" Source = "User.png">
            <Label Text="  Friends " HorizontalOptions="FillAndExpand" BackgroundColor="#C7FCE1" FontSize="Large"/>
            <ListView x:Name="listViewFriends" ItemsSource="{Binding Friends}"  HasUnevenRows="true" SeparatorVisibility="Default"                        VerticalOptions="Fill" MinimumHeightRequest="50" HeightRequest="{Binding Height}">
                                        <RowDefinition Height="Auto"/>
                                        <RowDefinition Height="Auto"/>
                                        <ColumnDefinition Width="20"/>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="*"/>
                                        <ColumnDefinition Width="20"/>
                                    <Image Grid.Row="0" Grid.Column="1" Grid.RowSpan="2"                                        WidthRequest="40" HeightRequest="40" Source = "Friend.png">
                                    <Label Grid.Row="0" Grid.Column="2" Text="{Binding Name}" FontSize="Medium" TextColor="#065C2B"/>
                                    <Label Grid.Row="1" Grid.Column="2" Text="{Binding Email}" FontSize="Small" TextColor="#6FCF97"/>
            <Button Text="Add New Friend" Command="{Binding ChangeListViewSizeCommand}" TextColor="White" BackgroundColor="#01148E" FontAttributes="Bold" HorizontalOptions="FillAndExpand"/>
            <Button Text="Delete Friend" TextColor="White" BackgroundColor="#B61515" FontAttributes="Bold" HorizontalOptions="FillAndExpand"/>


Code behind of the View “MainPage “

Here I have bond two friends to the Friends Collection as default values in the GetFriends() method.

In the MainPage constructor, I have bond the MainPageViewModel to the BindingContext of the MainPage and The Friends collection has assigned to the Friends property  of the view model.

3 data binding

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Linq;
using System.Runtime.CompilerServices;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Input;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace ListViewApp
public partial class MainPage : ContentPage
MainPageViewModel vm = new MainPageViewModel();
public MainPage()
vm.Friends = GetFriends();
BindingContext = vm;

/// <summary>
/// Get Messages to Message List
/// </summary>
/// <returns></returns>
private ObservableCollection<FriendModel> GetFriends()
ObservableCollection<FriendModel> collection = new ObservableCollection<FriendModel>();
collection.Add(new FriendModel() { ID = 1, Name = "Friend 1", Email = "friend1@sample.com" });
collection.Add(new FriendModel() { ID = 1, Name = "Friend 1", Email = "friend1@sample.com" });
catch (Exception)
return collection;

🙂 Then Try it !

Thanks !

8 thoughts on “Xamarin Forms : ListView Height Change Dynamically, using MVVM and also, Solve Empty Space issue

  1. Pingback: ListView Height Issue in Xamarin Forms – How to Solve it ? | Xamarin Sharp – Codez with Buddhima

  2. Very nice, exactly what I was looking for!
    Could you explain your equation a bit?
    Height = (friends.Count * 40) + (friends.Count * 10);
    When I tried this on my code, it did extend the list view but not completely. There is always some offset hiding the last added element.

    Liked by 1 person

    • 40 is the height of one row. Its depending on the controls which are in a specific row(data template).
      If you have set the row height in row definitions, the use that value. Else, get the height of the controls which are in the data template.
      In my example, i have added a gridview in the view cell of data template. The grid has two rows and there is a image with rowspan=2. So the height of the data template is the height of the image in the gridview.


Leave a Reply to Buddhima Kudagama Cancel reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s