Articles in this section
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

Navigate using Activator.CreateInstance

View sample in GitHub

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied