Navigation command withing viewCell

Question

I have a custom ViewCell. I was wondering if I could add a command to it, which would navigate to another page, when the ViewCell is clicked.

Below is what I have so far:

public class MainMenuItem : ViewCell
{
    public MainMenuItem(string text, string icon)
    {
        View = new StackLayout()
        {
            Spacing = 10,
            Padding = 10,
            Orientation = StackOrientation.Horizontal,
            VerticalOptions = LayoutOptions.Center,
            Children = {
                new Image() {
                    Source = ImageSource.FromFile(icon),
                    HorizontalOptions = LayoutOptions.Start,
                    HeightRequest = 30,
                    WidthRequest = 30,
                },
                new Label() {
                    Text = text,
                    HorizontalOptions = LayoutOptions.Start,
                    FontSize = 18,
                },
                 new Image() {
                    Source = ImageSource.FromFile("listitem_next.png"),
                    HeightRequest = 12,
                    HorizontalOptions = LayoutOptions.EndAndExpand
                }
            }
        };

        View = View;
    }
}

Above is my view cell. Now I render these within Table sections of a TableView. And here is the code for that:

TableView tvProfile = new TableView
{
    HasUnevenRows = true,
    Intent = TableIntent.Form,
    Root = new TableRoot {,
            new TableSection ("Emergency Contacts")
            {
                new MainMenuItem("Contacts", "icon_phone.png")
            },
            new TableSection ("Check in Timers")
            {
                new MainMenuItem("Timers", "icon_clock.png")
            },
            new TableSection ("Medical Information")
            {
                new MainMenuItem("Medcial Info", "icon_medicalkit.png")
            }
        }
};

What I want is, when the user selects an Item (the ViewCell), I want to navigate the user to the respective page.

How do I do this using a command? If it's even possible. I'm new to using commands, so whatever I've gotten on the web has gone over my head.

Any help on this would be HUGELY appreciated.

Answer 1

Here is a quick'n'dirty implementation. Add command and commandParameter to constructor and add GestureRecognizer which calls this command.

public class MainMenuItem : ViewCell
{
    public MainMenuItem(string text, string icon, ICommand command,  Func<Page> commandParameterFunc)
    {
        View = new StackLayout()
        {
            ...
        };

        View.GestureRecognizers.Add(new TapGestureRecognizer { Command = command, CommandParameter = commandParameterFunc });
    }
}

Then do the following changes - create a command and add 2 parameters to every cell. Here you define the command, what happens when you click and a parameter for the command, which is a Page (but you should not create it here already and check for errors).

Update: I changed to pass a function instead of an object, so the Page is created on click. Still a bit dirty ;)

public class MyPage : ContentPage
{
    private readonly ICommand _navigateCommand;

    public MyPage()
    {
        _navigateCommand = new Command(commandParamter => Navigation.PushModalAsync((commandParamter as Func<Page>)())));

        TableView tvProfile = new TableView
        {
            HasUnevenRows = true,
            Intent = TableIntent.Form,
            Root = new TableRoot 
            {
                new TableSection ("Emergency Contacts")
                {
                    new MainMenuItem("Contacts", "icon_phone.png", _navigateCommand, () => new ContactsPage())
                },
                new TableSection ("Check in Timers")
                {
                    new MainMenuItem("Timers", "icon_clock.png", _navigateCommand, () => new TimersPage())
                },
                new TableSection ("Medical Information")
                {
                    new MainMenuItem("Medcial Info", "icon_medicalkit.png", _navigateCommand, () => new MedicalInfoPage())
                }
            }
        };
        Content = tvProfile;
    }
}