Cannot display data in ListView Xamarin Forms

Question

I am trying to display data inside a ListView in my XamarinApp, my issue is that I cannot show the data. I made all bindings and I do not think I made mistakes in binding the listview..

Can someone help?

Here is how my UrlBindingModel looks like:

 public class UrlBindingModel 
{
    public IList<Urls> UrlsList { get; set; }

    public UrlBindingModel() // In this constructor we add a few items
    {
        try
        {
            UrlsList = new List<Urls>
            {
                new Urls() { Name = "TestName", Url = "localhost" },
                new Urls() { Name = "TestName", Url = "localhost" },
                new Urls() { Name = "Test", Url = "Test" },
                new Urls() { Name = "Sas", Url = "Sas" }
            };
        }

        catch (Exception ex)
        {

        }

    }

    public class Urls
    {

        public string Name { get; set; }
        public string Url { get; set; }

    }


}

And here is how my Page.Xaml looks like:

    <?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:models="clr-namespace:TestFormApp.Models;assembly=TestFormApp"
             xmlns:views="clr-namespace:TestFormApp.Views;assembly=TestFormApp"
             x:Class="TestFormApp.Pages.SettingsPage"
             Title="Settings">

    <ContentPage.BindingContext>
        <views:UrlBindingModel></views:UrlBindingModel>
    </ContentPage.BindingContext>

    <ContentPage.Content>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="40" />
                <RowDefinition Height="40" />
                <RowDefinition Height="40" />
                <RowDefinition Height="10" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <Label Text="Urls" Grid.Row="0" FontAttributes="Bold" FontSize="Large" HorizontalOptions="CenterAndExpand"></Label>
            <StackLayout Grid.Row="1">
                <Button x:Name="btnUrlPopUp" Text="Add Url" Clicked="BtnUrlPopUp_OnClicked"></Button>
            </StackLayout>
            <Grid Grid.Row="2" VerticalOptions="CenterAndExpand" Margin="10" Padding="10">
                <Grid.RowDefinitions>
                    <RowDefinition Height="30" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="3*" />
                    <ColumnDefinition Width="2*" />
                    <ColumnDefinition Width="2.5*" />
                    <ColumnDefinition Width="1*" />
                    <ColumnDefinition Width="1.5*" />
                </Grid.ColumnDefinitions>
                <Label Text="Name" Grid.Column="0" Grid.Row="0" Style="{DynamicResource headerTablet}" />
                <Label Text=" Host Url" Grid.Column="1" Grid.Row="0" Style="{DynamicResource headerTablet}" />
                <Label Text="Edit" Grid.Column="2" Grid.Row="0" Style="{DynamicResource headerTablet}" />
                <Label Text="Delete" Grid.Column="3" Grid.Row="0" Style="{DynamicResource headerTablet}" />
                <!--The box view creates a line under labels-->
                <BoxView Grid.Row="3" HorizontalOptions="FillAndExpand"
                         VerticalOptions="Center" HeightRequest="2" BackgroundColor="DarkGray"></BoxView>
                <ListView IsPullToRefreshEnabled="True" x:Name="lstUrlList" Grid.Row="4" ItemsSource="{Binding UrlsList}" Margin="4">
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <ViewCell>
                                <Grid VerticalOptions="CenterAndExpand" BackgroundColor="White" ColumnSpacing="0">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="40" />
                                    </Grid.RowDefinitions>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="3*" />
                                        <ColumnDefinition Width="2*" />
                                        <ColumnDefinition Width="3*" />
                                        <ColumnDefinition Width="1*" />
                                        <ColumnDefinition Width="1*" />
                                    </Grid.ColumnDefinitions>

                                    <Label Text="{Binding Name, Mode=TwoWay}" Grid.Column="0" Grid.Row="0" Style="{DynamicResource detailTablet}" />

                                    <Label Text="{Binding Url, Mode=TwoWay}" Grid.Column="1" Grid.Row="0" Style="{DynamicResource detailTablet}" />

                                </Grid>
                            </ViewCell>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
            </Grid>
        </Grid>
    </ContentPage.Content>
</ContentPage>

What do I miss??

Thanks in advance!

Answer 1

At first look your viewmodel doesn't implement INotifyPropertyChanged, thus cannot notify your xaml that any property, including one for itemssource, changed.

1 inherit your viewmodel from BindableObject

public class UrlBindingModel : BindableObject

2 change your prop to

        private IList<Urls> _urlsList;
        public IList<Urls> UrlsList
        {
            get { return _urlsList; }
            set
            {
                if (_IsProperty != value)
                {
                    _IsProperty = value;
                    OnPropertyChanged();
                }
            }
        }

Be aware that any property that will change at runtime and doesn't call OnPropertyChanged(); when it changes just will not notify its changes to your UI.