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.
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>
</ViewCell>
</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.
Click here to download the sample.
