We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to navigate page from viewmodel using button in ListViewItem?

Platform: Xamarin.Forms |
Control: SfListView
Tags: navigation, mvvm

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.

XAML

<ContentPage>
  <ContentPage.Content>
    <syncfusion:SfListView x:Name="listView" ItemSize="70"
                           ItemsSource="{Binding contactsinfo}"
                           SelectionMode="Single">
      <syncfusion:SfListView.ItemTemplate>
        <DataTemplate >
          <ViewCell>
            <ViewCell.View>
              <Grid>
                <Image Source="Navigate.png">
                  <Image.GestureRecognizers>
                    <TapGestureRecognizer
                        Command="{Binding Path=BindingContext.TapCommand, Source = {x:Reference listView}}"
                        CommandParameter="{Binding}" />
                  </Image.GestureRecognizers>
                </Image>
              </Grid>
            </ViewCell.View>
          </View­Cell>
        </DataTemplate>
      </syncfusion:SfListView.ItemTemplate>
    </syncfusion:SfListView>
  </ContentPage.Content>
</ContentPage>

 

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

C#

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);
        }
 
        ///<summary>        
        /// Navigating to a desired page on item tapped.
       ///</summary>
        private void OnTapped(object obj)
        {
            var newPage = new NewPage();
            newPage.BindingContext = obj;
            Navigation.PushAsync(newPage);
        }
}

 

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

Main page and navigated page in ListViewItem

Click here to download the sample.

2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment
Comments
Austin Ford
Oct 20, 2017

This Sample Project will not build.  Multiple errors regarding embedded resources.  Restoring and updating nuget packages does not correct any of the issues.

Reply
Muthu Kumaran Gnanavinayagam [Syncfusion]
Oct 23, 2017

Hi Austin,

 

Sample project does not build due to long path name of the solution files. So we have modified the solution name and republished the documentation.

 

Regards,

G.Muthu Kumaran.

Reply
Nick Alonge
Jun 13, 2019

Line 31 is incorrect: Navigation.PushAsync(newPage);

It should be navigation.PushAsync(newPage); (lowercase 'n').

Reply
Nick Alonge
Jun 13, 2019

Disregard...

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile