Xamarin Forms User Control Binding inside ListView

Question

Scenario - There is a ListView binded to a ObservableCollection of string. Listview has one label and one UserControl (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 UserControl.

Below is the sample code.

MainPage.xaml

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         xmlns:local="clr-namespace:TestSample"
         xmlns:controls="clr-namespace:TestSample.Controls"
         x:Class="TestSample.MainPage">

<StackLayout>
    <Button Text="Generate Data" Clicked="Button_Clicked"/>

    <ListView Grid.Row="1" HorizontalOptions="Center" ItemsSource="{Binding Collection}" SeparatorVisibility="None">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <StackLayout Orientation="Horizontal" HorizontalOptions="Center">
                        <Label Text="{Binding}"/>
                        <Label Text=" - "/>
                        <controls:MagicBox Text="{Binding}"/>
                    </StackLayout>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</StackLayout>

MainPage.xaml.cs

 public partial class MainPage : ContentPage
{
    public ObservableCollection<string> Collection { get; set; }

    public MainPage()
    {
        InitializeComponent();
        Collection = new ObservableCollection<string>
        {
            "XX",
            "XX",
            "XX"
        };

        this.BindingContext = this;
    }

    public void Button_Clicked(object sender, EventArgs e)
    {
        var rand = new Random();
        for (int i = 0; i < 3; i++)
        {
            Collection[i] = rand.Next(10, 100).ToString();
        }
    }
}

UserControl

  <ContentView.Content>
  <Grid>
      <Label Text="{Binding Text}" />
  </Grid>

public partial class MagicBox : ContentView
{

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

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

    public MagicBox ()
    {
        InitializeComponent ();
        this.BindingContext = this;
    }
}

I also tried with ObservableCollection of a POCO class instead of string after implementing INotifyPropertyChanged, didn't worked. If I bind the MagicBox Text to a string directly it works but not if I bind it to some property.

Can anyone please help me fix this problem?

Gaurav Mathur
– Gaurav Mathur

2018-05-11 09:02:51 +00:00
Commented May 11, 2018 at 9:02 — Gaurav Mathur
– Gaurav Mathur, Commented May 11, 2018 at 9:02

Stephane Delcroix · Accepted Answer · 2018-05-16 07:23:13Z

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>

I tested it. it works.

HeikkiDev · Accepted Answer · 2018-05-07 12:54:37Z

0

I think the problem is the line "this.BindingContext = this;" in your custom control.

You should Bind like this: Text="{Binding Path=BindingContext, Source={x:Reference ListViewName}}"

Make sure add x:Name to your Listview. No tested, but hope it help you.

answered May 7, 2018 at 12:54

HeikkiDev

1064 bronze badges

Comments

Djooleean · Accepted Answer · 2018-05-07 16:31:17Z

0

First, update your custom control:

Change your "Text" dependency property definition => Set the binding mode to "OneWay" and add propertyChanged event handler like this:

public partial class MagicBox : ContentView
{

public static readonly BindableProperty TextProperty =
  BindableProperty.Create("Text", typeof(TextVM), typeof(MagicBox), "XX", BindingMode.OneWay, null, new BindableProperty.BindingPropertyChangedDelegate(TextPropertyChanged));

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

Then add the 'Text' propertyChanged method into your custom control like this:

private static void TextPropertyChanged(BindableObject sender, object oldValue, object newValue )
{
    Label updatedLabel = sender as Label;
    if(updatedLabel == null) return;

    updatedLabel.Text = (newValue as TextVM)?.MyText;
}

Make an Observable object that embed the text property, in order to throw the 'PropertyChanged' event:

public class TextVM : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    private string _myText;
    public string MyText
    {
        get => _myText;
        set
        {
            _myText = value;
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("MyText"));
        }
    }
}

Then in your XAML, update the text binding:

<controls:MagicBox Text="{Binding MyText}"/>

Don't forget to update your collection type and the random number generation process...

It should be good !

edited May 7, 2018 at 16:31

answered May 7, 2018 at 14:17

Djooleean

5303 silver badges11 bronze badges

5 Comments

Gaurav Mathur Over a year ago

Didn't work. If I remove this.BindingContext = this; nothing shows up at all On adding it back the output didn't changed.

Gaurav Mathur Over a year ago

Property Changed event handler is not getting called at all.

Djooleean Over a year ago

you are right sorry, let 'BindingContext = this' in the constructor. Why 'TextPropertyChanged' is not call ? I presume this is because your data source is a list of string objects. String type doesn't implement INotifyPropertyChanged... So try to make a 'ViewModel' object containing the Text property (get; set;) and that use NotifyPropertyChanged, I update the answer...

Gaurav Mathur Over a year ago

Actually this is my original problem, this doesn't work. I replaced the TextVM class with string for posting it on SF :)

Gaurav Mathur Over a year ago

I believe I am missing something in the UserControl, something very basic. If label can update then binding is working for sure. It's the UserControl which is not able to pick the changed values. Updating the question.

Collectives™ on Stack Overflow

Xamarin Forms User Control Binding inside ListView

3 Answers 3

Comments

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related