How can I get a custom TableSection footer to respond to dynamic changes?

Question

I am using this code:

public class ExtFooterTableViewRenderer : TableViewRenderer
{


    protected override void OnElementChanged(ElementChangedEventArgs<TableView> e)
    {
        base.OnElementChanged(e);
        if (Control == null)
            return;

        var tableView = Control as UITableView;
        var formsTableView = Element as TableView;
        tableView.WeakDelegate = new CustomFooterTableViewModelRenderer(formsTableView);
    }

    private class CustomFooterTableViewModelRenderer : TableViewModelRenderer
    {
        public CustomFooterTableViewModelRenderer(TableView model) : base(model)
        {
        }

        public override UIView GetViewForFooter(UITableView tableView, nint section)
        {
            var txtView = new UITextView
            {
                //Text = "Select or deselect cards from the list above and they will added or removed from the card deck,",
                Text = TitleForFooter(tableView, section),
                TextColor = UIColor.Gray,
                TextAlignment = UITextAlignment.Justified,
                TextContainerInset = new UIEdgeInsets(top: 10, left: 15, bottom: 5, right: 15),
                BackgroundColor = Color.Transparent.ToUIColor()
            };

            txtView.TextContainer.LineBreakMode = UILineBreakMode.WordWrap;
            return txtView;
        }

        //Retrieves the footer text for corresponding section through the attached property
        public override string TitleForFooter(UITableView tableView, nint section)
        {
            var tblSection = View.Root[(int)section];
            return ExtFooterTableView.GetFooterText(tblSection);
        }
    }
}

It works fine for changing the footer when in the XAML like this:

<TableSection Title="Cards" local:ExtFooterTableView.FooterText="ABC">

but when I try to do this with binding like this:

<TableSection Title="Cards" local:ExtFooterTableView.FooterText="{Binding CardsFooter}">

Then it does not seem to respond to changes in the value of CardsFooter that are made in my code back end C#.

Is there a way that I can make this respond to dynamic changes in the binding's value so that it makes a change appear?

Answer 1

Even in case of attached properties - the PropertyChanged event is invoked in corresponding bindable object.

In order to listen to these changes - you can subscribe to them, and accordingly update/reload it's native counterpart (section):

private class CustomFooterTableViewModelRenderer : TableViewModelRenderer
{
    public CustomFooterTableViewModelRenderer(TableView model) : base(model)
    {
    }

    public override UIView GetViewForFooter(UITableView tableView, nint section)
    {
        ....
    }

    //Retrieves the footer text for corresponding section through the attached property
    public override string TitleForFooter(UITableView tableView, nint section)
    {
        var tblSection = View.Root[(int)section];

        Table = tableView;
        tblSection.PropertyChanged -= OnSectionPropertyChanged;
        tblSection.PropertyChanged += OnSectionPropertyChanged;

        return ExtFooterTableView.GetFooterText(tblSection);
    }

    void OnSectionPropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
    {
        if (ExtFooterTableView.FooterTextProperty.PropertyName.Equals(e.PropertyName))
        {
            if (sender is TableSection section)
            {
                var index = View.Root.IndexOf(section);
                var indexSet = Foundation.NSIndexSet.FromIndex(index);
                Table.ReloadSections(indexSet, UITableViewRowAnimation.None);
            }
        }
    }

    //Also ensure unsubscribe during dispose, or unload
    protected override void Dispose(bool disposing)
    {
        base.Dispose(disposing);

        foreach(var section in View?.Root)
            section.PropertyChanged -= OnSectionPropertyChanged;
    }
}

---

Also, would recommend that you add a null check for Element in OnElementChanged in table-view renderer:

protected override void OnElementChanged(ElementChangedEventArgs<TableView> e)
{
    base.OnElementChanged(e);
    if (Control == null || Element == null)
        return;