Mvvmcross RecyclerView Binding

Question

I'm trying to binding some data with mvvmcross recyclerView but i'm facing on an issue...Recyclerview always empty.This is my code. I'm pretty sur taht all stup file is correct

HomeView(xml file) :

     <!-- language: xml -->
     <ScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

        <MvvmCross.Droid.Support.V7.RecyclerView.MvxRecyclerView
            android:id="@+id/product_recycler"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:clipToPadding="false"
            android:scrollbars="vertical"
            app:MvxItemTemplate="@layout/product_item_row"
            app:MvxBind="ItemsSource Products"/>

      </ScrollView>

product_item_row:

    <!-- language: xml -->
    <LinearLayout 
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.v7.widget.CardView
            android:id="@+id/card_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="center"
            android:layout_margin="@dimen/card_margin"
            android:clickable="true"
            android:elevation="3dp"
            android:foreground="?attr/selectableItemBackground">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

        <ImageView
            android:id="@+id/thumbnail"
            android:layout_width="match_parent"
            android:layout_height="@dimen/card_cover_height"
            android:background="?attr/selectableItemBackgroundBorderless"
            android:clickable="true"
    android:src="@drawable/ic_store_24"
            android:scaleType="fitXY" />

         <TextView
            android:id="@+id/name"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/thumbnail"
            android:lines="2"
            android:paddingLeft="@dimen/card_name_padding"
            android:paddingRight="@dimen/card_name_padding"
            android:paddingTop="@dimen/card_name_padding"
            android:textColor="#111"
            android:textSize="11dp" 
        android:text="Name"
       app:MvxBind="Text Name"/>

        <TextView
            android:id="@+id/price"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/name"
            android:layout_marginRight="10dp"
            android:gravity="right"
            android:paddingBottom="@dimen/card_price_padding_bottom"
            android:textColor="@color/colorAccent"
            android:textSize="11dp"
    android:text="Price"
    app:MvxBind="Text Price"/>

        </RelativeLayout>

        </android.support.v7.widget.CardView>

     </LinearLayout>

Ma viewModel(HomeViewModel):

<!-- language: c# -->
public class HomeViewModel : MvxViewModel
{
     private readonly ICarouselService _carouselService;
     private readonly IProductDataService _productDataService;
     private MvxObservableCollection<Carousel> _carousels;
     private MvxObservableCollection<Product> _products;

    public MvxObservableCollection<Carousel> Carousels
    {
        get { return _carousels; }
        set
        {
            _carousels = value;
            RaisePropertyChanged(() => Carousels);
        }
    }

    public MvxObservableCollection<Product> Products
    {
        get { return _products; }
        set
        {
            _products = value;
            RaisePropertyChanged(() => Products);
        }
    }

    public HomeViewModel(ICarouselService carouselService, IProductDataService productDataService)
    {
        _carouselService = carouselService;
        _productDataService = productDataService;
    }

    public override async Task Initialize()
    {
        Products = new MvxObservableCollection<Product>(await _productDataService.GetProducts());
        Carousels = new MvxObservableCollection<Carousel>(await _carouselService.GetImages());
    }
}

My fragment:

<!-- language: c# -->
[MvxFragmentPresentation(typeof(MainViewModel), Resource.Id.content_frame, false)]
public class HomeView : BaseFragment<HomeViewModel>, IImageListener
{
    protected override int FragmentId => Resource.Layout.HomeView;
    CarouselView _carouselView;

    public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
    {
        var view = inflater.Inflate(Resource.Layout.HomeView, container, false);
        //var view = this.BindingInflate(Resource.Layout.HomeView, container, false);

        _carouselView = view.FindViewById<CarouselView>(Resource.Id.carouselView);
        var recyclerView = view.FindViewById<MvxRecyclerView>(Resource.Id.product_recycler);


        _carouselView.PageCount = ViewModel.Carousels.Count;
        _carouselView.SetImageListener(this);

        if (recyclerView != null)
        {
            recyclerView.HasFixedSize = true;
            var layoutManager = new GridLayoutManager(Activity, 2, LinearLayoutManager.Vertical, false);
            recyclerView.SetLayoutManager(layoutManager);

        }

        return view;
    }

    public void SetImageForPosition(int position, ImageView imageView)
    {

        Picasso.With(Context).Load(ViewModel.Carousels[position].Image)
            //.Placeholder(Resource.Mipmap.ic_launcher)
            //.Error(Resource.Mipmap.ic_launcher)
            //.Resize(500, 300)
            .Fit()
            .Into(imageView);
    }
}

Did i misse something? Any help would be very much appreciated.

Answer 1

In your HomeView fragment the following line is commented out:

 var view = this.BindingInflate(Resource.Layout.HomeView, container, false);

And it appears to be using the system provided LayoutInflater.

In order for MvvmCross to recognize the bindings you defined in the axml layout files, you need to use the MvxLayoutInflater via the this.BindingInflate extension method.

Try modifying your code as such:

public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
{
    base.OnCreateView(inflater, container, savedInstanceState);
    var view = this.BindingInflate(Resource.Layout.HomeView, null);

    _carouselView = view.FindViewById<CarouselView>(Resource.Id.carouselView);
    var recyclerView = view.FindViewById<MvxRecyclerView>(Resource.Id.product_recycler);


    _carouselView.PageCount = ViewModel.Carousels.Count;
    _carouselView.SetImageListener(this);

    if (recyclerView != null)
    {
        recyclerView.HasFixedSize = true;
        var layoutManager = new GridLayoutManager(Activity, 2, LinearLayoutManager.Vertical, false);
        recyclerView.SetLayoutManager(layoutManager);

    }

    return view;
}

More context: https://stackoverflow.com/a/53894136/2754727