将数据绑定到 Xamarin 表单中的 Scrollview Stacklayout

Question

我看到一篇关于 xamarin 表单的文章，其中包含一些“可绑定的爱”https://blog.xamarin.com/xamarin-forms-3-5-a-little-bindable-love/。

我想尝试一下并创建一个滚动列表，但由于某种原因，我绑定的数据似乎没有出现在视图中。绑定应该可以正常工作，因为在我的 XAML 中我绑定了很多其他东西并且它可以成功运行，但是由于某种原因，这个特定的绑定不起作用。

XAML：

<ScrollView>
   <StackLayout BackgroundColor="Transparent" BindableLayout.ItemsSource="{Binding CategoriesList}"  >
                <BindableLayout.ItemTemplate>
                        <DataTemplate>         
                           <StackLayout Orientation = "Horizontal" HeightRequest="150" WidthRequest="80">

                                <Button Text="{Binding Name}" />

                         </StackLayout>
                       </DataTemplate>
                </BindableLayout.ItemTemplate>          
             </StackLayout>
        </ScrollView>

这是我的列表在 VM 中的外观：

private ObservableCollection<Categories> _Categories;
    public ObservableCollection<Categories> CategoriesList
    {
        get
        {
            return this._Categories;
        }
        set
        {
            if (_Categories != value)
            {
                this._Categories = value;
                RaisePropertyChanged("CategoriesList");
            }
        }
    }

当我为它创建数据时：

        CategoriesList = new ObservableCollection<Categories>();

        CategoriesList.Add(new Categories() { Name = "Data 1", ID = "1" });
        CategoriesList.Add(new Categories() { Name = "Data 2", ID = "2" });
        CategoriesList.Add(new Categories() { Name = "Data 3", ID = "3" });

Answer 1

我猜你的 getter 和 setter 有问题。一旦更改，它就不会正确更新值。我已经使用INotifyPropertyChanged 完成了，它工作正常。

MainPage.xaml：

    <?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:App"
    x:Class="App.MainPage">
    <ContentPage.Content>
        <ScrollView HorizontalOptions="FillAndExpand">
            <StackLayout
                HorizontalOptions="FillAndExpand"
                BackgroundColor="Transparent"
                BindableLayout.ItemsSource="{Binding CategoriesList}">
                <BindableLayout.ItemTemplate>
                    <DataTemplate>
                        <StackLayout
                            Orientation="Horizontal"
                            HeightRequest="150"
                            HorizontalOptions="FillAndExpand">
                            <Button
                                Text="{Binding Name}" />
                        </StackLayout>
                    </DataTemplate>
                </BindableLayout.ItemTemplate>
            </StackLayout>
        </ScrollView>
    </ContentPage.Content>
</ContentPage>

MainPage.xaml.cs：

  namespace App
  {
    public partial class MainPage : ContentPage
    {

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

    }
}

MainPageViewModel：

 public class MainPageViewModel : BaseViewModel
{
    private ObservableCollection<CategoriesModel> _Categories;
    public ObservableCollection<CategoriesModel> CategoriesList
    {
        get
        {
            return this._Categories;
        }
        set
        {
            if (_Categories != value)
            {
                this._Categories = value;
                SetPropertyValue(ref _Categories, value);

            }
        }
    }

    public MainPageViewModel()
    {

        CategoriesList = new ObservableCollection<CategoriesModel>
        {
            new CategoriesModel() { Name = "Data 1", ID = "1" },
            new CategoriesModel() { Name = "Data 2", ID = "2" },
            new CategoriesModel() { Name = "Data 3", ID = "3" },
            new CategoriesModel() { Name = "Data 4", ID = "4" },
            new CategoriesModel() { Name = "Data 5", ID = "5" },
            new CategoriesModel() { Name = "Data 6", ID = "6" },
            new CategoriesModel() { Name = "Data 7", ID = "7" }
        };
    }
}

我的 BaseViewModel 扩展了 INotifyPropertyChanged：

public class BaseViewModel : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    protected void OnPropertyChanges([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

    protected void SetPropertyValue<T>(ref T bakingFiled, T value, [CallerMemberName] string proertyName = null)
    {
        bakingFiled = value;
        OnPropertyChanges(proertyName);

    }

}

所有视图模型类都扩展了 BaseViewModel 以便访问SetPropertyValue() 方法。

输出：