Refresh command not working in Listview which is inside a Tabbed page in Xamarin.Forms

Question

I have a tabbed page who's ItemSource has a binding with viewmodel to generate tabs dynamically. Below is the code snippet of xaml

<pages:ScrollableTabbedPage
x:Class="Client_to_Kitchen.CategorizedMenuPage"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:Client_to_Kitchen"
xmlns:pages="clr-namespace:Client_to_Kitchen.Views;assembly=Client_to_Kitchen"
Title="Menu"
ItemsSource="{Binding Menu}">

<TabbedPage.BindingContext>
    <local:CategorizedMenuViewModel />
</TabbedPage.BindingContext>

<TabbedPage.ItemTemplate>
    <DataTemplate>
        <ContentPage Title="{Binding GroupName}" BackgroundColor="{StaticResource SecondaryColor}">
            <ListView
                x:Name="MyListView"
                CachingStrategy="RecycleElement"
                HasUnevenRows="True"
                IsPullToRefreshEnabled="True"
                IsRefreshing="{Binding IsLoading}"
                ItemTapped="Handle_ItemTapped"
                ItemsSource="{Binding MenuItems}"
                RefreshCommand="{Binding FoodMenuListCommand}"
                SeparatorColor="{StaticResource SecondaryLightColor}"
                SeparatorVisibility="None">

The tabs get generated and even the listview populates as expected. Only the binding with IsRefreshing and RefreshCommand is not working. What am I doing wrong?

Screenshot of page with dynamic tabs:

Below is the snippet of viewmodel code

public class CategorizedMenuViewModel : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;
    private void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

    private bool _isLoading;
    public bool IsLoading
    {
        get { return _isLoading; }
        set
        {
            _isLoading = value;
            OnPropertyChanged(nameof(IsLoading));
        }
    }

    private ObservableCollection<MenuListResponse> _menu;
    public ObservableCollection<MenuListResponse> Menu
    {
        get { return _menu; }
        set
        {
            _menu = value;
            OnPropertyChanged(nameof(Menu));
        }
    }

    public CategorizedMenuViewModel()
    {
        FoodMenuListCommand.Execute(null);
    }

    private ICommand _foodMenuListCommand;
    public ICommand FoodMenuListCommand => _foodMenuListCommand ?? (_foodMenuListCommand = new Command(async () => await GetMenuList()));
    public async Task GetMenuList()
    {
        IsLoading = true;
        int counter = 0;

        string[] listImages = new string[4];
        listImages[0] = "https://www.shareicon.net/data/512x512/2016/04/11/747949_animal_512x512.png";
        listImages[1] = "https://www.shareicon.net/data/512x512/2016/08/01/805257_cinema_512x512.png";
        listImages[2] = "https://www.shareicon.net/data/512x512/2016/08/19/817540_food_512x512.png";
        listImages[3] = "https://www.shareicon.net/data/512x512/2016/08/01/805240_food_512x512.png";
        try
        {
            MenuListStore _menuStoreObject = new MenuListStore();
            List<MenuListResponse> response = await _menuStoreObject.GetFoodMenuList();

            foreach (var items in response)
            {
                foreach (var item in items.MenuItems)
                {
                    if (counter > 3)
                        counter = 0;
                    item.Image = listImages[counter];
                    counter++;
                }
            }

            Menu = new ObservableCollection<MenuListResponse>(response);
        }
        catch (Exception ex)
        {
            await Application.Current.MainPage.DisplayAlert("Alert!", $"No internet", "Ok");
            IsLoading = false;
            return;
        }
        IsLoading = false;
    }

Please note:- In a separate tabbed page where I am not binding ItemSource of tabbed page and ContentPage Title to a viewmodel to generate dynamic tabs but instead have 2 static content pages with listview the RefreshCommand binding works properly.

Please post the code of `GetMenuList` method. I suspect it returns the list and you are not setting it anywhere which causes the list not to be updated. — Martin Zikmund, May 20 '18 at 14:30
Thankyou @MartinZikmund for your consideration. I have added code of GetMenuList method. I believe the problem is not here as the list is being populated once when called from the constructor. I have also debugged the code and its not landing here which means I have not defined binding for the refresh command properly. — Taha Ali, May 20 '18 at 19:22
No, I didn't. Changed my flow's dependency on refreshing the page :P — Taha Ali, May 18 '19 at 10:25

score 2 · Answer 1 · answered Jul 20 '19 at 12:05

2

I had similar issue turned out the List was in a ScrollView which (I assume) was consuming the pull down event before it reached the List. Removing the ScrollView sorted it - didn't need it anyway. Your parent control is a ScrollableTabbedPage which sounds like it would suffer from a similar issue.

answered Jul 20 '19 at 12:05

Rocklands.Cave

231
2
6

Thanks for the answer. It may help other users. I am done with the project since months and don't want to delve into it again. – Taha Ali Jul 20 '19 at 12:30

Refresh command not working in Listview which is inside a Tabbed page in Xamarin.Forms

1 Answers1