Xamarin Forms Binding not showing on ListView

Question

I'm new to Xamarin and I'm trying to bind my ViewModel to the View but I couldn't do it yet.

Here's the code.

(Model)

namespace CadastroProdutos
{
    public class Produto
    {
        public string Codigo { get; set; }
        public string Identificacao { get; set; }
        public string Tipo { get; set; }
    }
}

(Observable Model)

namespace CadastroProdutos
{
    public class ObservableProduto : INotifyPropertyChanged
    {
        Produto produto;
        public ObservableProduto()
        {
            produto = new Produto()
            {
                Identificacao = "Primeiro",
                Codigo = "123456"

            };
            produto = new Produto()
            {
                Identificacao = "Segundo",
                Codigo = "123456"

            };
            produto = new Produto()
            {
                Identificacao = "Terceiro",
                Codigo = "123456"

            };
        }

        public event PropertyChangedEventHandler PropertyChanged;

        public string Codigo
        {               
            set
            {
                if (!value.Equals(produto.Codigo, StringComparison.Ordinal))
                {
                    produto.Codigo = value;
                    OnPropertyChanged("Codigo");
                }
            }
            get
            {
                return produto.Codigo;
            }
        }

        public string Identificacao
        {
            set
            {
                if (!value.Equals(produto.Identificacao, StringComparison.Ordinal)) 
                {
                    produto.Identificacao = value;
                    OnPropertyChanged("Identificacao");
                }
            }
            get
            {
                return produto.Identificacao;
            }
        }

        public string Tipo
        {
            set
            {
                if (!value.Equals(produto.Tipo, StringComparison.Ordinal)) 
                {
                    produto.Tipo = value;
                    OnPropertyChanged("Tipo");
                }
            }
            get
            {
                return produto.Tipo;
            }
        }

        void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            var handler = PropertyChanged;
            if (handler == null)
            {
                handler(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    }
}

(ViewModel)

namespace CadastroProdutos
{
    public class ListProdutoViewModel
    {
        ObservableCollection<ObservableProduto> produtos;

        public ListProdutoViewModel()
        {
            produtos = new ObservableCollection<ObservableProduto>();
        }

        public ObservableCollection<ObservableProduto> Produtos
        {
            set
            {
                if (value != produtos)
                {
                    produtos = value;
                }
            }
            get
            {
                return produtos;
            }
        }
    }
}

(View)

<?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:CadastroProdutos;"
    x:Class="CadastroProdutos.ListProduto"
    Title="Listagem de Produtos">
    <ContentPage.Content>
        <ListView x:Name="listView" Margin="20,40,20,20" ItemsSource="{Binding Produtos}">
            <ListView.BindingContext>
                <local:ListProdutoViewModel />
            </ListView.BindingContext>
            <ListView.Header>
                <StackLayout Orientation="Vertical" >
                        <Label Text="Produtos" HorizontalOptions="Center"/>
                </StackLayout>
            </ListView.Header>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <StackLayout Orientation="Horizontal" >
                        <TextCell Text="{Binding Identificacao}"/>
                    </StackLayout>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </ContentPage.Content>
</ContentPage>

It not worked, It didn't show those elements on the list. Can someone help me?

Thanks in advance.

Answer 1

You're not quite understanding the MVVM approach, but you're almost there. You don't need to have the ObservableProduto class. You can make your Produto class your model.

This is your Produto model. I went ahead and changed it up for you.

namespace CadastroProdutos
{
    public class Produto : INotifyPropertyChanged
    {
        private string codigo;
        public string Codigo 
        { 
            get {return codigo;} 
            set {codigo=value; OnPropertyChanged(); }
        }

        private string identificacao;
        public string Identificacao 
        { 
            get {return identificacao;} 
            set {identificacao=value; OnPropertyChanged(); }
        }

        private string tipo ;
        public string Tipo 
        { 
            get {return tipo;} 
            set {tipo=value; OnPropertyChanged(); }
        }

        public event PropertyChangedEventHandler PropertyChanged;

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

You should contain an ObservableCollection of your Produtos in a viewmodel. I see you've done that. I've edited it a bit. You may need to be careful about totally resetting your ObservableCollection on a set.

namespace CadastroProdutos
{
    public class ListProdutoViewModel
    {
        ObservableCollection<Produto> produtos;

        public ListProdutoViewModel()
        {
            produtos = new ObservableCollection<Produto>();
        }

        public ObservableCollection<Produto> Produtos
        {
            set
            {
                if (value != produtos)
                {
                    produtos = value;
                }
            }
            get
            {
                return produtos;
            }
        }
    }
}

Note: you will need to add items to your ObservableColleciton still.