Xamarin.forms: Xamarin Forms Content View(User Control) not binding inside ListView

[AppGrate]

Description

There is a ListView binded to a ObservableCollection of string. Listview has one label and one ContentView(containing nothing but a label). Both are binded to the same collection.

Also, there is a button which generate some random data for the collection.

Problem is when I run the app and click on Generate Data button the label gets updated but not the ContentView.

Steps to Reproduce

1. Open VS 2017 and create a new Xamarin Forms blank project (standard)
2. In MainPage.xaml Place a StackLayout with a button and a Listview
3. Set Listview's DataTemplate to ViewCell containing one Label and one ContentView(we will create it below). Bind the Text property to ObservableCollection items.
4. In MainPage.xaml.cs create an Observalbe property
5. In the constructor initialize the Observable collection with some random values and set the binding context tot this.
6. Subscribe to button click and assign some random values to the Observable Collection everytime the button is hit.
7. Create a new ContentView(xaml) used above, and place a label inside it binded to Text property
8. In xaml.cs create a Bindable Property Text.
9. Or you can simply unzip and open the attached solution in VS 2017(15.7.1)
   TestSample.zip
10. Run in Android, and click on generate button.
11. Notice the text binded to label is changing, however text binded to ContentView do not change.

Expected Behavior

Label inside the Content View should also change.

Actual Behavior

Label inside the Content View remains same

Basic Information

• Version with issue: 4.10.0.442
• Last known good version:
• IDE: VS 2017 (15.7.1)
• Platform Target Frameworks:
  
  
  
  • iOS:
  
  
  • Android: 8.3.0.19
  
  
  • UWP:
  
  
• Android Support Library Version:

• Nuget Packages:
  Xamarin.Forms
  NETStandard.Library

• Affected Devices:

Screenshots

Reproduction Link

https://github.com/AppGrate/ListViewBindingIssue

[AppGrate]

Asked on stackoverflow a week back - https://stackoverflow.com/questions/50211197/xamarin-forms-user-control-binding-inside-listview

[StephaneDelcroix]

doing

this.BindingContext = this;

in MagicBox.xaml.cs forces the BindingContext to the current object. It also means that the BindingContext from the parent is no longer inherited.

in order to make it work, change your code behind to

    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class MagicBox : ContentView
    {

        public static readonly BindableProperty TextProperty =
            BindableProperty.Create("Text", typeof(string), typeof(MagicBox), default(string));

        public string Text
        {
            get { return (string)GetValue(TextProperty); }
            set { SetValue(TextProperty, value); }
        }

        public MagicBox ()
        {
            InitializeComponent ();
        }
    }

and your xaml to

<?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="TestSample.Controls.MagicBox"
             x:Name="box">
  <ContentView.Content>
      <Grid>
          <Label Text="{Binding Text, Source={x:Reference box}}" />
      </Grid>
  </ContentView.Content>
</ContentView>

[AppGrate]

Thanks @StephaneDelcroix, it worked :)