Articles in this section
Category / Section

How to navigate page from viewmodel using button in ListViewItem?

1 min read

SfListView allows you to navigate to another page when tapped on an element in the ListViewItem by adding the GestureRecognizers to that element in the ItemTemplate.

In the below code example, added the TapGestureRecognizer to the Image and bound the Command to navigate the page when tapped on that image from ViewModel.


    <syncfusion:SfListView x:Name="listView" ItemSize="70"
                           ItemsSource="{Binding contactsinfo}"
        <DataTemplate >
                <Image Source="Navigate.png">
                        Command="{Binding Path=BindingContext.TapCommand, Source = {x:Reference listView}}"
                        CommandParameter="{Binding}" />


In the ViewModel, navigate to another page through INavigation interface when the tap command is invoked.


public class ContactsViewModel : INotifyPropertyChanged
        private Command<object> tapCommand;
        private INavigation navigation;
        public Command<object> TapCommand
            get { return tapCommand; }
            set { tapCommand = value; }
        public INavigation Navigation
            get { return navigation; }
            set { navigation = value; }
        public ContactsViewModel (INavigation _navigation)
            navigation = _navigation;
            tapCommand = new Command<object>(OnTapped);
        /// Navigating to a desired page on item tapped.
        private void OnTapped(object obj)
            var newPage = new NewPage();
            newPage.BindingContext = obj;


The below screenshots show the main page and the navigated page.

Main page and navigated page in ListViewItem

Click here to download the sample.

Did you find this information helpful?
Help us improve this page
Please provide feedback or comments
Please sign in to leave a comment