Vfrdtyky

I have a PIN field on a page. The PIN field is implemented with a custom class derived from stack layout, which adds item-source binding capabilities. Its item source is bound to an ObservableCollection of characters in my view-model. The issue I'm experiencing is as the title states, the pin field doesn't update upon adding, deleting from the ObservableCollection.

I've read posts with similar issues to mine. All of their solutions state to ensure that the ObservableCollection property notifies its property changed through the INotifyPropertyChanged interface call. I did this and it still isn't updating the GUI. Please help!

Here is the code:

The xaml for the PIN field

<utility:BindableStackLayout HeightRequest="40"

                             Orientation="Horizontal"

                             HorizontalOptions="Center"

                             ItemsSource="{Binding Pin}">

    <utility:BindableStackLayout.ItemDataTemplate>

        <DataTemplate>

            <skia:SKCanvasView PaintSurface="OnPaintSurfacePinDigit"/>

        </DataTemplate>

    </utility:BindableStackLayout.ItemDataTemplate>

</utility:BindableStackLayout>

SignInPage.xaml.cs

using System;

using MNPOS.ViewModel;

using Xamarin.Forms;

using SkiaSharp.Views.Forms;

using SkiaSharp;



namespace MNPOS.View

{

    public partial class SignInPage : CustomNavigationDetailPage

    {

        public SignInPage()

        {

            BindingContext = _viewModel;

            InitializeComponent();

        }



        public void OnPaintSurfacePinDigit(object sender, SKPaintSurfaceEventArgs e)

        {

            ...

        }



        private SignInViewModel _viewModel = new SignInViewModel();

    }

}

SignInViewModel

using System;

using System.Text;

using System.Collections;

using MNPOS.Configuration;

using Xamarin.Forms;

using System.Collections.Generic;

using System.Collections.ObjectModel;

using System.ComponentModel;



namespace MNPOS.ViewModel

{

    public class SignInViewModel : ViewModel

    {

        public SignInViewModel()

        {

            _appendDigitCommand = new Command<string>(AppendDigit);

            _clearDigitCommand = new Command(ClearDigit);

            _signInCommand = new Command(SignIn);

        }



        public void AppendDigit(string entry)

        {

            if (_pin.Count < Constants.MaximumPinLength)

            {

                _pin.Add(entry[0]);

            }

        }



        public void ClearDigit()

        {

            if (_pin.Count > 0)

            {

                _pin.RemoveAt(Pin.Count - 1);

            }

        }



        public void SignIn()

        {



        }



        public Command AppendDigitCommand => _appendDigitCommand;

        public Command ClearDigitCommand => _clearDigitCommand;

        public Command SignInCommand => _signInCommand;

        public ObservableCollection<char> Pin 

        {

            get { return _pin; } 

            set 

            {

                SetProperty<ObservableCollection<char>>(ref _pin, value, nameof(Pin));

            } 

        }



        private readonly Command _appendDigitCommand;

        private readonly Command _clearDigitCommand;

        private readonly Command _signInCommand;

        private ObservableCollection<char> _pin = new ObservableCollection<char>();

    }

}

ViewModel

using System.Collections.Generic;

using System.ComponentModel;

using System.Runtime.CompilerServices;



namespace MNPOS.ViewModel

{

    public abstract class ViewModel : INotifyPropertyChanged

    {

        public event PropertyChangedEventHandler PropertyChanged;



        protected virtual void OnPropertyChanged([CallerMemberName]string propertyName = null)

        {

            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs((propertyName)));

        }



        protected bool SetProperty<T>(ref T storage, T value, [CallerMemberName]string propertyName = null)

        {

            if (EqualityComparer<T>.Default.Equals(storage, value))

            {

                return false;

            }

            storage = value;

            OnPropertyChanged(propertyName);



            return true;

       }

   }

}

BindableStackLayout

using System.Collections;

using Xamarin.Forms;



namespace MNPOS.View.Utility

{

    public class BindableStackLayout : StackLayout

    {

        public IEnumerable ItemsSource

        {

            get { return (IEnumerable)GetValue(ItemsSourceProperty); }

            set { SetValue(ItemsSourceProperty, value); }

        }

        public static readonly BindableProperty ItemsSourceProperty =

            BindableProperty.Create(nameof(ItemsSource), typeof(IEnumerable), typeof(BindableStackLayout),

                                    propertyChanged: (bindable, oldValue, newValue) => ((BindableStackLayout)bindable).PopulateItems());



        public DataTemplate ItemDataTemplate

        {

            get { return (DataTemplate)GetValue(ItemDataTemplateProperty); }

            set { SetValue(ItemDataTemplateProperty, value); }

        }

        public static readonly BindableProperty ItemDataTemplateProperty =

            BindableProperty.Create(nameof(ItemDataTemplate), typeof(DataTemplate), typeof(BindableStackLayout));



        void PopulateItems()

        {

            if (ItemsSource == null) return;

            foreach (var item in ItemsSource)

            {

                var itemTemplate = ItemDataTemplate.CreateContent() as Xamarin.Forms.View;

                itemTemplate.BindingContext = item;

                Children.Add(itemTemplate);

            }

        }

    }

}

You will need to subscribe to Collection Change Events in your PropertyChanged event handler.

So in you BindableStackLayout Class change

public static readonly BindableProperty ItemsSourceProperty =

        BindableProperty.Create(nameof(ItemsSource), typeof(IEnumerable), typeof(BindableStackLayout),

                                propertyChanged: (bindable, oldValue, newValue) => ((BindableStackLayout)bindable).PopulateItems());

to this:

public static readonly BindableProperty ItemsSourceProperty =

        BindableProperty.Create(nameof(ItemsSource), typeof(IEnumerable), typeof(BindableStackLayout),

                                propertyChanged: (bindable, oldValue, newValue) => ((BindableStackLayout)bindable).PopulateItems(oldValue, newValue));

Then change your PopulateItems to this:

void PopulateItems(IEnumerable oldValue, IEnumerable newValue)

    {



        if(oldItem != null)

            ((ObservableCollection<char>)oldItem).CollectionChanged -= CollectionChanged;



        if (newValue == null)

        {

            Children.Clear();

            return;

        }



        ((ObservableCollection<char>)newItem).CollectionChanged -= CollectionChanged;





        foreach (var item in newItem)

        {

            var itemTemplate = ItemDataTemplate.CreateContent() as Xamarin.Forms.View;

            itemTemplate.BindingContext = item;

            Children.Add(itemTemplate);

        }

    }

Then the CollectionChanged method would look something like this:

        private void CollectionChanged(object sender, NotifyCollectionChangedEventArgs e)

    {

        switch (e.Action)

        {

            case NotifyCollectionChangedAction.Add:

                {

                    int index = e.NewStartingIndex;

                    foreach (var item in e.NewItems)

                        Children.Insert(index++, GetItemView(item));

                }

                break;

            case NotifyCollectionChangedAction.Move:

                {

                    var item = ObservableSource[e.OldStartingIndex];

                    Children.RemoveAt(e.OldStartingIndex);

                    Children.Insert(e.NewStartingIndex, GetItemView(item));

                }

                break;

            case NotifyCollectionChangedAction.Remove:

                {

                    Children.RemoveAt(e.OldStartingIndex);

                }

                break;

            case NotifyCollectionChangedAction.Replace:

                {

                    Children.RemoveAt(e.OldStartingIndex);

                    Children.Insert(e.NewStartingIndex, GetItemView(ObservableSource[e.NewStartingIndex]));

                }

                break;

            case NotifyCollectionChangedAction.Reset:

                Children.Clear();

                foreach (var item in ItemsSource)

                    Children.Add(GetItemView(item));

                break;

        }

    }

Please note that this was mostly typed in the browser, so there might be some typos but it should lead you in the right direction.

Good Luck