Navigation command withing viewCell - xamarin

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;
}
}