How to bind Command to ios table section header click? - ios

Question

How can I bind Command to recieve taps on sections of my Table? I am using MvxViewController with custom TableSource, but it seems that I cant add bindings to my VM when creating UIView for sections.
Here is my ViewModel:
public class TestViewModel : MvxViewModel
{
private ObservableCollection<string> _sections;
public ObservableCollection<string> Sections
{
get { return _sections; }
set { _sections = value; RaisePropertyChanged(() => Sections); }
}
private MvxCommand _sectionTappedCommand;
public ICommand SectionTappedCommand
{
get
{
_sectionTappedCommand = _sectionTappedCommand ?? new MvxCommand(DoSectionTappedCommand);
return _sectionTappedCommand;
}
}
private void DoSectionTappedCommand()
{
//I want this command somehow to be called when user taps section header
Debug.WriteLine("Section tapped!");
}
}
My view:
[Register("TestView")]
public class OrderView : MvxViewController
{
public override void ViewDidLoad()
{
View = new UIView() { BackgroundColor = UIColor.White };
base.ViewDidLoad();
var table = new UITableView(new RectangleF(0, 20, 320, 660));
Add(table);
var source = new TestTableSource(table);
table.Source = source;
var set = this.CreateBindingSet<OrderView, OrderViewModel>();
// I think here I need to write something like:
// set.Bind(source).For(s => s.Section.TapAction).To(vm => vm.SectionTappedCommand);**
set.Bind(source).For(s => s.ItemsSource).To(vm => vm.Sections).OneWay();
set.Apply();
}
}
Table source:
public class TestTableSource : MvxBaseTableViewSource
{
// all needed overrides implemented
private IList<OrderGuest> _sections;
public IList<OrderGuest> ItemsSource
{
get
{
return _sections;
}
set
{
_sections = value;
ReloadTableData();
}
}
public override UIView GetViewForHeader(UITableView tableView, int section)
{
// Do I need to add bindings here?
var view = new OrderGuestSectionHeader(OrderGuestSectionHeader(tableView, section), () => {
Debug.WriteLine("selected " + section.ToString());
});
return view;
}
public override int NumberOfSections(UITableView tableView)
{
if (_sections == null)
return 0;
return _sections.Count;
}
public override string[] SectionIndexTitles(UITableView tableView)
{
if (_sections == null)
return null;
return _sections.Select(x => x.Name).ToArray();
}
}
Subclassed UIView for section header:
public sealed class OrderGuestSectionHeader : UIView
{
private UIButton SectionButton;
public Action TapAction;
public OrderGuestSectionHeader(string header, Action tapped)
{
Frame = new RectangleF(0, 0, 320, 20);
BackgroundColor = UIColor.Blue;
SectionButton = new UIButton(this.Frame);
SectionButton.TouchUpInside += SectionButton_TouchUpInside;
SectionButton.Title(header);
TapAction = tapped;
Add(SectionButton);
}
private void SectionButton_TouchUpInside(object sender, EventArgs e)
{
TapAction();
}
}

Answer 1

There are a few ways you could achieve this effect.
For just your current requirements, the easiest way to achieve it would be to add just a single command to the TestTableSource and to have that command passed on to your section header inside the Action handler.
public class TestTableSource : MvxBaseTableViewSource
{
public ICommand FooCommand { get; set; }
// existing code
public override UIView GetViewForHeader(UITableView tableView, int section)
{
var view = new OrderGuestSectionHeader(OrderGuestSectionHeader(tableView, section), () => {
Debug.WriteLine("selected " + section.ToString());
if (FooCommand != null) FooCommand.Execute(null);
});
return view;
}
}
This Command can then be bound to the ViewModel by adding the OrderView binding:
set.Bind(source)
.For(s => s.FooCommand)
.To(vm => vm.SectionTappedCommand)
.OneWay();
If you wanted to go further - if you wanted to do a more complicated binding - then you could actually set up a full binding DataContext for the Header View. The easiest way to do this would be to inherit from MvxView. I won't go into the full detail of this here - instead for an introduction to MvxView, see the N+1 video - http://slodge.blogspot.co.uk/2013/06/n32-truth-about-viewmodels-starring.html with sample source code in https://github.com/slodge/NPlus1DaysOfMvvmCross/tree/master/N-32-ViewModels