Binded ViewModel content to Stacklayout

Question

I am trying to bind content from my viewmodel to my view.

I am using a code snippet that creates a custom StackLayout where we can bind items to it.

However I am not making this work and i see no update on my UI. I am unsure what exactly to bind to the "Items". I am currently binding an observablecollection with buttons but it does not show.

This is the custom stacklayout:

using Xamarin.Forms;

using System.Collections.Specialized;
using System.ComponentModel;

class CustomStackLayout : StackLayout
{
    public static readonly BindableProperty ItemsProperty =
        BindableProperty.Create(nameof(Items), typeof(ObservableCollection<View>), typeof(CustomStackLayout), null,
            propertyChanged: (b, o, n) =>
            {
                (n as ObservableCollection<View>).CollectionChanged += (coll, arg) =>
                {
                    switch (arg.Action)
                    {
                        case NotifyCollectionChangedAction.Add:
                            foreach (var v in arg.NewItems)
                                (b as CustomStackLayout).Children.Add((View)v);
                            break;
                        case NotifyCollectionChangedAction.Remove:
                            foreach (var v in arg.NewItems)
                                (b as CustomStackLayout).Children.Remove((View)v);
                            break;
                        case NotifyCollectionChangedAction.Move:
                            //Do your stuff
                            break;
                        case NotifyCollectionChangedAction.Replace:
                            //Do your stuff
                            break;
                    }
                };
            });


    public ObservableCollection<View> Items
    {
        get { return (ObservableCollection<View>)GetValue(ItemsProperty); }
        set { SetValue(ItemsProperty, value); }
    }
}

And this is how i gather my content.

    public MainPageViewModel()
    {
       CategoryName = new ObservableCollection<Button>();
    }

    ObservableCollection<Button> _categoryName;
    public ObservableCollection<Button> CategoryName
    {
        get
        {
            return this._categoryName;
        }
        set
        {
            if (_categoryName != value)
            {
                this._categoryName = value;
                RaisePropertyChanged("CategoryName");
            }
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    public void RaisePropertyChanged(string propName)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propName));
        }
    }

Then i gather new data in a void:

private async void LoadCategories()
    {

        var GetCategories = await Data.Categories();
        CategoryName = new ObservableCollection<Button>();

        foreach (var Category in GetCategories["results"])
        {
            var CategoryButton = new Button();
            CategoryButton.Text = Category["CategoryName"].ToString().ToUpper();
            CategoryName.Add(CategoryButton);
        }
    }

The xaml:

     <ContentPage x:Name="ParentView">

     <ScrollView x:Name = "CategoriesScrollView">
          <controls:CustomStackLayout Orientation="Horizontal" Spacing="20" Items = "{Binding BindingContext.CategoryName, Source={x:Reference ParentView}}" />
     </ScrollView>

View:

public MainPage()
{
    InitializeComponent();
    BindingContext = new MainPageViewModel();
}

Answer 1

Few things,

This class should be public....

class BindableStackLayout : StackLayout
{..

to

public class BindableStackLayout : StackLayout
{..

And

 <ScrollView x:Name = "CategoriesScrollView">
      <controls:CustomStackLayout Orientation="Horizontal" Spacing="20" Items = "{Binding BindingContext.CategoryName, Source={x:Reference ParentView}}" />
 </ScrollView>

to

 <ScrollView x:Name = "CategoriesScrollView">
      <controls:BindableStackLayout  Orientation="Horizontal" Spacing="20" Items = "{Binding CategoryName}" />
 </ScrollView>

You defined your class as BindableStacklayout and you are referencing CustomStackLayout on Xaml.

You dont need to add x:refe since the bindingcontext of the page is set to the viewModel you want.

Hope this fixes it?