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

Created on 15 May 2018 · 3Comments · Source: xamarin/Xamarin.Forms

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

Open VS 2017 and create a new Xamarin Forms blank project (standard)
In MainPage.xaml Place a StackLayout with a button and a Listview
Set Listview's DataTemplate to ViewCell containing one Label and one ContentView(we will create it below). Bind the Text property to ObservableCollection items.
In MainPage.xaml.cs create an Observalbe property
In the constructor initialize the Observable collection with some random values and set the binding context tot this.
Subscribe to button click and assign some random values to the Observable Collection everytime the button is hit.
Create a new ContentView(xaml) used above, and place a label inside it binded to Text property
In xaml.cs create a Bindable Property Text.
Or you can simply unzip and open the attached solution in VS 2017(15.7.1)
TestSample.zip
Run in Android, and click on generate button.
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

question

Source

AppGrate

Most helpful comment

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>

StephaneDelcroix on 16 May 2018

👍2

All 3 comments

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

AppGrate on 15 May 2018

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>

StephaneDelcroix on 16 May 2018

👍2

Thanks @StephaneDelcroix, it worked :)

AppGrate on 17 May 2018

Was this page helpful?

0 / 5 - 0 ratings