MvvmCross iOS SelectedCommand for a custom TableViewCell

Question

I'm working on this MvvmCross app for iOS in which I need to use a custom TableViewCell. I would like to know how to implement the SelectedCommand event on the MvxSimpleTableViewSource. I got it to work the MvxStandardTableViewSource and I found this solution on youtube. The problem with that solution is that Stuart uses a MvxStandardTableViewSource. An other problem is that the model I want to bind the SelectedChangedCommand to is not the same model as I bind the source to.

I have been searching the internet for a while now to find an answer for this problem, so I hope somebody can help me with this. Thanks in advance.

Here's my code:

MainViewModel.cs

namespace MyApp.Core.ViewModels
{
    public class MainViewModel : BaseViewModel
    {
        private NavigationListViewModel _navigationMenu;
        public NavigationListViewModel NavigationMenu
    {
        get { return _navigationMenu; }
        set { _navigationMenu = value; RaisePropertyChanged(() => NavigationMenu); }
    }

    public void Init()
    {
        NavigationMenu = new NavigationListViewModel();
        NavigationMenu.Init();
    }
}

NavigationListViewModel.cs

namespace MyApp.Core.ViewModels.NavigationViewModels
{
public class NavigationListViewModel : BaseViewModel, IPageSelectedService
{
    private List<NavigationItemViewModel> _navigationList;
    public List<NavigationItemViewModel> NavigationList { 
        get { return _navigationList; } 
        set { _navigationList = value; RaisePropertyChanged(() => NavigationList); } 
    }

    public void Init() {
        NavigationList = new List<NavigationItemViewModel> {
            new NavigationItemViewModel { DisplayName = "Assortment", ActionLink = NavigateToCategories },
            new NavigationItemViewModel { DisplayName = "Shops", ActionLink = NavigateToShops }
        };
    }

    public  ICommand NavigateToCategories 
    {
        get { return new MvxCommand(() => ShowViewModel<CategoryListViewModel>()); }
    }
    public ICommand NavigateToShops
    {
        get { return new MvxCommand(() => ShowViewModel<StoreListViewModel>()); }
    }
}

NavigationItemViewModel.cs

namespace MyApp.Core.ViewModels.NavigationViewModels
{
    public class NavigationItemViewModel : MvxViewModel
    {   
        private string _displayName;
        public string DisplayName
        { 
            get { return _displayName; }
            set { _displayName = value; RaisePropertyChanged(() => DisplayName); }
        }

        private ICommand _actionLink;
        public ICommand ActionLink { 
            get { return _actionLink; } 
            set { _actionLink = value; RaisePropertyChanged(() => ActionLink); }
        }
    }
}

MainView.cs

namespace MyApp.iOS.Views 
{
    public partial class MainView : MvxViewController 
    {
        public new MainViewModel ViewModel {
            get { return (MainViewModel)base.ViewModel; }
            set { base.ViewModel = value; }
        }

        public MainView() : base ("MainView", null) 
        {
        }

        public override void ViewDidLoad() {
            base.ViewDidLoad();

            var set = this.CreateBindingSet<MainView, MainViewModel>();
            var source = new MvxSimpleTableViewSource(menuTableView, MainTableCell.Key, MainTableCell.Key);

            menuTableView.Source = source;
            set.Bind(source).To(vm => vm.NavigationMenu.NavigationList);
            set.Apply();

            menuTableView.ReloadData();
        }
    }
}

MainTableCell

namespace MyApp.iOS.Views {
    public partial class MainTableCell : MvxTableViewCell {
        public static readonly UINib Nib = UINib.FromName("MainTableCell", NSBundle.MainBundle);
        public static readonly NSString Key = new NSString("MainTableCell");

        public MainTableCell(IntPtr handle) : base (handle) {
            this.DelayBind(() => {
                var set = this.CreateBindingSet<MainTableCell, NavigationItemViewModel>();
                set.Bind(titleLabel).To(vm => vm.DisplayName);
                set.Apply();
            });
        }

        public static MainTableCell Create() {
            return (MainTableCell)Nib.Instantiate(null, null)[0];
        }
    }
}

Stuart Stuart · Accepted Answer · 2013-08-21T02:05:01

You could add a SelectedCommand property to your cell implementation, bind that to your ActionLink vm property and Execute it when the user selects the cell using code like in SetSelected in https://github.com/slodge/MvvmCross/blob/v3/Cirrious/Cirrious.MvvmCross.Binding.Touch/Views/MvxStandardTableViewCell.cs

 public ICommand SelectedCommand { get; set; }


    private bool _isSelected;


    public override void SetSelected(bool selected, bool animated)
    {
        base.SetSelected(selected, animated);


        if (_isSelected == selected)
            return;


        _isSelected = selected;
        if (_isSelected)
            if (SelectedCommand != null)
                SelectedCommand.Execute(null);
    }

MvvmCross iOS SelectedCommand for a custom TableViewCell

2 Answers