title: Xamarin.Forms Binding Collection in Custom Control
body: <p>I'm trying to create a custom control that has a ListView inside it and is populated in parent control. Here is the code:</p>
  
  <p>Model used for testing (TestModel.cs):</p>
  
  <pre class="lang-cs prettyprint-override"><code>public class TestModel
  {
      public string TestText { get; set; }
  
      public TestModel(string text)
      {
          TestText = text;
      }
  }
  </code></pre>
  
  <p>Custom control code (TestControl.xaml.cs):</p>
  
  <pre class="lang-cs prettyprint-override"><code>public partial class TestControl : ContentView
  {
      public static readonly BindableProperty TestItemsProperty =
              BindableProperty.Create(nameof(TestItems), typeof(ObservableCollection&lt;TestModel&gt;), typeof(TestControl), default);
      public ObservableCollection&lt;TestModel&gt; TestItems
      {
          get =&gt; (ObservableCollection&lt;TestModel&gt;)GetValue(TestItemsProperty);
          set =&gt; SetValue(TestItemsProperty, value);
      }
  
      public TestControl()
      {
          InitializeComponent();
          BindingContext = this;
      }
  }
  </code></pre>
  
  <p>Custom control XAML (TestControl.xaml):</p>
  
  <pre class="lang-xml prettyprint-override"><code>&lt;ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
               xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
               xmlns:d="http://xamarin.com/schemas/2014/forms/design"
               xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
               mc:Ignorable="d"
               x:Class="SalesNet.Mobile.Controls.TestControl"&gt;
      &lt;StackLayout&gt;
          &lt;ListView ItemsSource="{Binding TestItems}"
                    x:Name="lv"&gt;
              &lt;ListView.ItemTemplate&gt;
                  &lt;DataTemplate&gt;
                      &lt;ViewCell&gt;
                          &lt;Label Text="{Binding TestText}"/&gt;
                      &lt;/ViewCell&gt;
                  &lt;/DataTemplate&gt;
              &lt;/ListView.ItemTemplate&gt;
          &lt;/ListView&gt;
      &lt;/StackLayout&gt;
  &lt;/ContentView&gt;
  </code></pre>
  
  <p>View model for the page containing the control (TestViewModel.cs):</p>
  
  <pre class="lang-cs prettyprint-override"><code>public class TestViewModel : BaseViewModel
  {
      private ObservableCollection&lt;TestModel&gt; testModels;
      public ObservableCollection&lt;TestModel&gt; TestModels
      {
         get { return testModels; }
         set { SetProperty(ref testModels, value); }
      }
  
      public Command LoadTestModels { get; set; }
  
      public TestViewModel()
      {
          var models = new List&lt;TestModel&gt;()
          {
              new TestModel("a"),
              new TestModel("b")
          };
  
          TestModels = new ObservableCollection&lt;TestModel&gt;(models);
          LoadTestModels = new Command(async () =&gt; await ExecuteLoadTestModels());
      }
  
      private async Task ExecuteLoadTestModels()
      {
          IsBusy = true;
          await Task.Delay(2000);
  
          var models = new List&lt;TestModel&gt;()
          {
              new TestModel("a"),
              new TestModel("b"),
              new TestModel("c")
          };
  
          // I have tried this
          TestModels.Clear();
          foreach (var model in models)
             TestModels.Add(model);
  
          // And this
          TestModels = new ObservableCollection&lt;TestModel&gt;(models);
  
          IsBusy = false;
      }
  }
  </code></pre>
  
  <p>Page containing the control, code (TestPage.xaml.cs):</p>
  
  <pre class="lang-cs prettyprint-override"><code>public partial class TestPage : ContentPage
  {
      private TestViewModel viewModel;
  
      public TestPage()
      {
          InitializeComponent();
  
          BindingContext = viewModel = new TestViewModel();
      }
  
      protected override void OnAppearing()
      {
          base.OnAppearing();
  
          viewModel.LoadTestModels.Execute(null);
      }
  }
  </code></pre>
  
  <p>Page that contains the control, XAML (TestPage.xaml):</p>
  
  <pre class="lang-xml prettyprint-override"><code>&lt;ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
               xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
               xmlns:d="http://xamarin.com/schemas/2014/forms/design"
               xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
               xmlns:controls="clr-namespace:SalesNet.Mobile.Controls"
               mc:Ignorable="d"
               x:Class="SalesNet.Mobile.Views.TestPage"&gt;
      &lt;ContentPage.Content&gt;
          &lt;controls:TestControl TestItems="{Binding TestModels}"/&gt;
      &lt;/ContentPage.Content&gt;
  &lt;/ContentPage&gt;
  </code></pre>
  
  <p>The problem I'm having is that the collection is not propagated from parent to custom control. I have tried both re-declaring and re-populating the collection. This only happens with collections. I've also tried writing OnPropertyChanged event in the custom control (TestControl.xaml.cs), but it's not firing.</p>