Category / Section
How to make navigation for a corresponding tapped item named page in Xamarin.Forms ListView (SfListView)
2 mins read
You can navigate to the particular xaml page based on the tapped item data (name of the page) using Activator.CreateInstance in Xamarin.Forms SfListView.
XAML
Defined TapCommand in ListView.
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:ListViewXamarin" xmlns:listView="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms" x:Class="ListViewXamarin.MainPage"> <ContentPage.BindingContext> <local:ContactsViewModel x:Name="viewModel"/> </ContentPage.BindingContext> <ContentPage.Content> <Grid> <listView:SfListView x:Name="list" TapCommand="{Binding OpenXamlPage}" ItemsSource="{Binding ContactsInfo}" SelectionMode="Single" AutoFitMode="DynamicHeight"> <listView:SfListView.ItemTemplate> <DataTemplate x:Name="ItemTemplate" > <ViewCell> <Grid x:Name="grid" RowSpacing="1"> <Grid.RowDefinitions> <RowDefinition Height="*" /> <RowDefinition Height="1" /> </Grid.RowDefinitions> <Grid RowSpacing="1"> <Grid.ColumnDefinitions> <ColumnDefinition Width="50" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Image Source="{Binding ContactImage}" VerticalOptions="Center" HorizontalOptions="Center" HeightRequest="50"/> <Grid Grid.Column="1" VerticalOptions="Center"> <Grid.RowDefinitions> <RowDefinition Height="*" /> <RowDefinition Height="*" /> </Grid.RowDefinitions> <Label Text="{Binding ContactName}"/> <Label Grid.Row="1" Grid.Column="0" Text="{Binding ContactNumber}"/> </Grid> </Grid> <StackLayout Grid.Row="1" BackgroundColor="Black" HeightRequest="1"/> </Grid> </ViewCell> </DataTemplate> </listView:SfListView.ItemTemplate> </listView:SfListView> </Grid> </ContentPage.Content> </ContentPage>
C#
Using Activator.CreateInstance to navigate to created page instance dynamically.
namespace ListViewXamarin { public class ContactsViewModel : INotifyPropertyChanged { public ObservableCollection<Contacts> ContactsInfo { get; set; } public Command OpenXamlPage { get; set; } public ContactsViewModel() { OpenXamlPage = new Command(OnOpenXamlPage); ContactsInfo = new ObservableCollection<Contacts>(); Random r = new Random(); for (int i = 0; i < CustomerNames.Length; ++i) { var contact = new Contacts(CustomerNames[i], r.Next(720, 799).ToString() + " - " + r.Next(3010, 3999).ToString()); contact.ContactImage = ImageSource.FromResource("ListViewXamarin.Images.Image" + i + ".png", typeof(MainPage)); ContactsInfo.Add(contact); } } private void OnOpenXamlPage(object e) { string page = ((e as Syncfusion.ListView.XForms.ItemTappedEventArgs).ItemData as Contacts).ContactName; //"{namespace}.{class name}, {assembly name}" //Example "ListViewXamarin.Views.Katie, ListViewXamarin" string pageStr = "ListViewXamarin.Views." + page + ", ListViewXamarin"; var objType = Type.GetType(pageStr); var newPage = Activator.CreateInstance(objType) as ContentPage; newPage.BindingContext = (e as Syncfusion.ListView.XForms.ItemTappedEventArgs).ItemData as Contacts; App.Current.MainPage.Navigation.PushAsync(newPage); } string[] CustomerNames = new string[] { "Irene", "Katie", "Michael", "Fiona", "Jennifer", "Torrey", "Holly", "Bill", }; public event PropertyChangedEventHandler PropertyChanged; public void OnPropertyChanged(string name) { if (this.PropertyChanged != null) this.PropertyChanged(this, new PropertyChangedEventArgs(name)); } } }
Output