XamarinForms ContentView binding using CommunityToolkit.Mvvm

I have MainPage which contains ContentView Recommendations. MainPage has its own ViewModel, the same as the Recommendations view. In the OnAppearing event of MainPage, I need to call InitializeAsync() method from RecommendationViewModel in order to populate Recommendations ObservableColllection data. Everything is okay so far, except my data is not shown in the ListView.

I'm using CommunityToolkit.Mvvm.

Here is my code:

-- MainPage.xaml.cs

<ContentPage
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:vm="clr-namespace:ApeOdds.ViewModels"
    xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
    ios:Page.UseSafeArea="True"
    x:Name="Main"
    x:Class="ApeOdds.Views.MainPage">

    <ContentPage.BindingContext>
        <vm:MainViewModel />
    </ContentPage.BindingContext>

    <ContentPage.Content>
    	<controls:RecommendationsView />
    </ContentPage.Content>
</ContentPage>

-- MainPage.xaml.cs

public partial class MainPage : ContentPage
{
    public MainViewModel ViewModel => (MainViewModel)BindingContext;

    public MainPage()
    {
        InitializeComponent();
        BindingContext = Ioc.Default.GetRequiredService<MainViewModel>();
    }

    protected override async void OnAppearing()
    {
        var recomendationVm = Ioc.Default.GetRequiredService<RecommendationViewModel>();
        await recomendationVm.InitializeAsync(); 
        //var recomendations = recomendationVm.Recommendations; -- I have recommendations data here, but they are not displayed
        base.OnAppearing();
    }
}

-- MainViewModel.cs

public partial class MainViewModel : ObservableObject
{
    public MainViewModel()
    {
    }
}

—- Recommendations.xaml

<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:vm="clr-namespace:ApeOdds.ViewModels"
             x:Class="ApeOdds.Controls.RecommendationsView"
             x:Name="rootView">

    <ContentView.BindingContext>
        <vm:RecommendationViewModel />
    </ContentView.BindingContext>
    <ListView ItemsSource="{Binding Recommendations}">
        <ListView.ItemTemplate>
            <DataTemplate>
                <Label Text="{Binding Id}"/>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</ContentView>

—- Recommendations.xaml.cs

public partial class RecommendationsView : ContentView
{
    public RecommendationViewModel ViewModel => (RecommendationViewModel)BindingContext;

     public RecommendationsView()
     {
         InitializeComponent();
         BindingContext = Ioc.Default.GetRequiredService<RecommendationViewModel>();
     }
}

-- RecommendationViewModel.cs

public partial class RecommendationViewModel : ObservableObject
{
    public ObservableCollection<Recommendation> Recommendations { get; set; }

	public RecommendationViewModel()
    {
    }

    public async Task InitializeAsync()
    {
	    var recommendations = DummyData.CreateDummyRecommendations();
        Recommendations = new ObservableCollection<Recommendation>(recommendations);
        OnPropertyChanged(nameof(Recommendations));
    }
}

-- App.xaml.cs

public partial class App : Application
{

    public App ()
    {
        InitializeComponent();

        Ioc.Default.ConfigureServices(
            new ServiceCollection()
            .AddTransient<BaseViewModel>()
            .AddTransient<MainViewModel>()
            .AddTransient<RecommendationViewModel>()
            .RegisterRefitService()
            .BuildServiceProvider());


        MainPage = new AppShell();
    }

     protected override void OnStart ()
     {
     }

     protected override void OnSleep ()
     {
     }

     protected override void OnResume ()
     {
     }
}

You can use BindableProperty to achieve this.

Based on your code, I created a demo to achieve this function.We need to add a Bindable Property to the ContentView (RecommendationsView.xaml.cs).

You can refer to the following code:

RecommendationsView.xaml.cs

 public partial class RecommendationsView : ContentView 
  {
    public RecommendationsView()
    {
        InitializeComponent();
    }

    public static readonly BindableProperty myViewModelProperty =
BindableProperty.Create(
    nameof(myViewModel),
    typeof(MainViewModel),
    typeof(RecommendationsView),
    null);

    public MainViewModel myViewModel
    {
        set { SetValue(myViewModelProperty, value); }
        get { return (MainViewModel)GetValue(myViewModelProperty); }
    }
}

RecommendationsView.xaml

<?xml version="1.0" encoding="UTF-8"?> 
<ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="FormContentViewApp.RecommendationsView"
             x:Name="myControlView"
             >
  <ContentView.Content>
        <ListView ItemsSource="{Binding Source={x:Reference myControlView}, Path=myViewModel.Items }">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                      <Label Text="{Binding Id}"/>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </ContentView.Content>
</ContentView>

MainViewModel.cs

public class MainViewModel 
{
    public ObservableCollection<Item> Items { get; set; }

    public MainViewModel() {
        Items= new ObservableCollection<Item>();

        Items.Add(new Item { Id = 1});
        Items.Add(new Item { Id = 2});
        Items.Add(new Item { Id = 3});
    }
}

public class Item 
{
    public int Id { get; set; }
}

Usage example:

<?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:FormContentViewApp"
             x:Class="FormContentViewApp.MainPage"
             x:Name="mainpage"
             >

    <ContentPage.BindingContext>
        <local:MainViewModel></local:MainViewModel>
    </ContentPage.BindingContext>

    <StackLayout Orientation="Vertical">
        <local:RecommendationsView  myViewModel="{Binding Path=BindingContext, Source={x:Reference mainpage}}">
        </local:RecommendationsView>
    </StackLayout>
</ContentPage>

Note:

Do not forget to add <ViewCell> inside of element DataTemplate for your ListView. Otherwise, the code will throw an error.