Binding property not found / some data displayed some not

Question

I am having issues with displaying data, I can see my data FieldValue and FieldDescriptor in the List property however I still see in output that:

Binding: 'Results' property not found on 'ViewModel.ResultPageViewModel', target property: 'Xamarin.Forms.ListView.ItemsSource'

I can't see any data FieldVisualData in the horizontal list view even thought I can see them in the view model adding to detail and the command also can't be found.

Binding: 'EditTextCommand' property not found on 'Model.DocumentData', target property: 'Xamarin.Forms.TapGestureRecognizer.Command'

Maybe you see something that I am missing?

public partial class ResultPage : ContentPage
{
    public ResultPage(IEnumerable data)
    {
      InitializeComponent();
      BindingContext = new ResultPageViewModel(data);

       //carouselView.ItemsSource = data;
       // list.ItemsSource = data;
     
    }
}

public class ResultPageViewModel : BaseViewModel
{
    public ObservableCollection Results { get; } = new ObservableCollection();
    public ICommand EditTextCommand { get; }
    object param = "";
    public ResultPageViewModel(IEnumerable data)
    {
        EditTextCommand = new Command(async () => await EditTextAsync(param));
        Load(data);
    }

    public void Load(IEnumerable data)
    {
        foreach (var result in data)
        {
            var detail = new DocumentData()
            {
                FieldVisualData = result.FieldVisualData,
                FieldDescriptor = result.FieldDescriptor,
                FieldValue = result.FieldValue,
            };
            Results.Add(detail);
          
        }
    }

    public async Task EditTextAsync(object param)
    {
        PromptResult pResult = await UserDialogs.Instance.PromptAsync(new PromptConfig
        {
            InputType = InputType.Password,
            Text = param.ToString(),
            Title = Resources.AppResources.Password_lbl,
        });
    }
}

public static readonly BindableProperty ItemTemplateProperty = BindableProperty.Create( "ItemTemplate", typeof(DataTemplate), typeof(HorizontalScrollList), null, propertyChanged: (bindable, value, newValue) => ((HorizontalScrollList)bindable).Populate());

    public static readonly BindableProperty ItemsSourceProperty = BindableProperty.Create(
        "ItemsSource",
        typeof(IEnumerable),
        typeof(HorizontalScrollList),
        null,
        BindingMode.OneWay,
        propertyChanged: (bindable, value, newValue) =>
        {
            var obs = value as INotifyCollectionChanged;
            var self = (HorizontalScrollList)bindable;
            if (obs != null)
                obs.CollectionChanged -= self.HandleItemChanged;

            self.Populate();

            obs = newValue as INotifyCollectionChanged;
            if (obs != null)
                obs.CollectionChanged += self.HandleItemChanged;
        });

    public IEnumerable ItemsSource
    {
        get => (IEnumerable)this.GetValue(ItemsSourceProperty);
        set => this.SetValue(ItemsSourceProperty, value);
    }

    public DataTemplate ItemTemplate
    {
        get => (DataTemplate)this.GetValue(ItemTemplateProperty);
        set => this.SetValue(ItemTemplateProperty, value);
    }

    private bool willUpdate = true;
    private void HandleItemChanged(object sender, NotifyCollectionChangedEventArgs eventArgs)
    {
        if (!willUpdate)
        {
            willUpdate = true;
            Device.BeginInvokeOnMainThread(Populate);
        }
    }

    public HorizontalScrollList()
    {
        this.Orientation = ScrollOrientation.Horizontal;
    }

    private void Populate()
    {
        willUpdate = false;

        Content = null;

        if (ItemsSource == null || ItemTemplate == null)
        {
            return;
        }

        var list = new StackLayout { Orientation = StackOrientation.Horizontal };

        foreach (var viewModel in ItemsSource)
        {
            var content = ItemTemplate.CreateContent();
            if (!(content is View) && !(content is ViewCell))
            {
                throw new Exception($"Invalid visual object {nameof(content)}");
            }

            var view = content is View ? content as View : ((ViewCell)content).View;
            view.BindingContext = viewModel;

            list.Children.Add(view);
        }

        if (list.Children.Count == 0)
        {
            list.Padding = 20;
            list.Children.Add(new Label
            {
                WidthRequest = (list as VisualElement).Width - 30,
                HorizontalOptions = new LayoutOptions(LayoutAlignment.Fill, true),
                VerticalOptions = new LayoutOptions(LayoutAlignment.Fill, true),
                HorizontalTextAlignment = TextAlignment.Center,
                VerticalTextAlignment = TextAlignment.Center,
                FontSize = 15,
               
            });
        }

        Content = list;
    }

Leon Lu · Accepted Answer

Do you want to acheve the result like following GIF?

I do not which style or backgroundcolor that you setted, I set it with static background color.

Here is my editted layout.controls:HorizontalScrollList is a picture, so I comment it.

I change the Command in the TapGestureRecognizer

Here is layout background code. I add three data to make a test.

 public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
            IEnumerable data = new DocumentData[] { new DocumentData() { FieldDescriptor="test 1", FieldValue=1, FieldVisualData=1 } };
            data = data.Append(new DocumentData() { FieldDescriptor = "test 2", FieldValue = 2, FieldVisualData = 2 });
            data = data.Append(new DocumentData() { FieldDescriptor = "test 3", FieldValue = 3, FieldVisualData = 3 });

            this.BindingContext = new ResultPageViewModel(data);
        }
    }

Here is ResultPageViewModels code.

using Acr.UserDialogs;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Input;
using Xamarin.Forms;

namespace XFormsListviewMvvm
{
    public class ResultPageViewModel : BaseViewModel
    {
        public ObservableCollection Results { get; } = new ObservableCollection();
        public ICommand EditTextCommand { get; }
        object param = "";
        public ResultPageViewModel(IEnumerable data)
        {
            EditTextCommand = new Command(async (key) => await EditTextAsync(key));
            Load(data);
        }

        public void Load(IEnumerable data)
        {
            foreach (var result in data)
            {
                var detail = new DocumentData()
                {
                    FieldVisualData = result.FieldVisualData,
                    FieldDescriptor = result.FieldDescriptor,
                    FieldValue = result.FieldValue,
                };
                Results.Add(detail);

            }
        }

        public async Task EditTextAsync(DocumentData param)
        {
            PromptResult pResult = await UserDialogs.Instance.PromptAsync(new PromptConfig
            {
                InputType = InputType.Password,
                Text = param.FieldValue.ToString(),
                Title = "Insert your Password",
            });
            if (pResult.Ok)
            {
                param.FieldValue = pResult.Text;
            }
          
        }
    }
}

If you need to change the value, then layout will display it. you need to implement the BaseViewModel in the DocumentData.

namespace XFormsListviewMvvm
{
    public class DocumentData:BaseViewModel
    {
    

        private object fieldVisualData = "Hello world";
        public object FieldVisualData
        {
            get => fieldVisualData;
            set => SetValue(ref fieldVisualData, value);
        }

        private object fieldValue = "Hello world";
        public object FieldValue
        {
            get => fieldValue;
            set => SetValue(ref fieldValue, value);
        }
        public object FieldDescriptor { get; internal set; }
    
    }
}

=============Update===================

I add your controls:HorizontalScrollList code. And I change the from to

Here is running gif.Image could be seen normally.

Here is editted layout.

Here is layout background code.

   public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
            IEnumerable data = new DocumentData[] { new DocumentData() { FieldDescriptor="test 1", FieldValue=1, FieldVisualData= "https://aka.ms/campus.jpg" } };
            data = data.Append(new DocumentData() { FieldDescriptor = "test 2", FieldValue = 2, FieldVisualData = "https://aka.ms/campus.jpg" });
            data = data.Append(new DocumentData() { FieldDescriptor = "test 3", FieldValue = 3, FieldVisualData = "https://aka.ms/campus.jpg" });

            this.BindingContext = new ResultPageViewModel(data);
        }
    }

Binding property not found / some data displayed some not

Answers (1)

Related Questions