Navigate to another page depending on tapped item in a ListView

[Luis Gomez]

Hi, how can i navigate to another page depending on tapped item in a ListView?

Mi XAML code is:

<xForms:SfListView x:Name="listView" 

                           ItemSize="80"

                           ItemSpacing="5"

                           SelectionBackgroundColor="Chartreuse"

                           ItemTapped="ListView_OnItemTapped">

        <xForms:SfListView.LayoutManager>

            <xForms:GridLayout SpanCount="1" />

        </xForms:SfListView.LayoutManager>

        <xForms:SfListView.ItemTemplate>

            <DataTemplate>

                <Frame BorderColor="Chartreuse" x:Name="frame" CornerRadius="10" BackgroundColor="Transparent" Padding="7" >

                    <StackLayout>

                        <ffimageloadingsvg:SvgCachedImage HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Source="{Binding Image}"/>

                    </StackLayout>

                </Frame>

            </DataTemplate>

        </xForms:SfListView.ItemTemplate>

    </xForms:SfListView>

...and my list:

public Comercios()

        {

            InitializeComponent();

            veggies = new ObservableCollection<comerciosView>();

            veggies.Add(new comerciosView { Name = "Mercadona", Image = "comercio_mercadona.svg" });

            veggies.Add(new comerciosView { Name = "Alcampo", Image = "comercio_alcampo.svg" });

            veggies.Add(new comerciosView { Name = "Ahorramas", Image = "comercio_ahorramas.svg" });

            veggies.Add(new comerciosView { Name = "Lidl", Image = "comercio_lidl.svg" });

            veggies.Add(new comerciosView { Name = "Dia", Image = "comercio_dia.svg" });

            veggies.Add(new comerciosView { Name = "CorteIngles", Image = "comercio_corteingles.svg" });

            veggies.Add(new comerciosView { Name = "Aldi", Image = "comercio_aldi.svg" });

            veggies.Add(new comerciosView { Name = "Carrefour", Image = "comercio_carrefour.svg" });

            veggies.Add(new comerciosView { Name = "Ikea", Image = "comercio_ikea.svg" });

            veggies.Add(new comerciosView { Name = "Leroy", Image = "comercio_leroy.svg" });

            veggies.Add(new comerciosView { Name = "Makro", Image = "comercio_makro.svg" });

            veggies.Add(new comerciosView { Name = "Eroski", Image = "comercio_eroski.svg" });

            veggies.Add(new comerciosView { Name = "Froiz", Image = "comercio_Froiz.svg" });

            veggies.Add(new comerciosView { Name = "HiperUsera", Image = "comercio_hiperusera.svg" });

            veggies.Add(new comerciosView { Name = "Simply", Image = "comercio_simply.svg" });

            veggies.Add(new comerciosView { Name = "Spar", Image = "comercio_spar.svg" });

            veggies.Add(new comerciosView { Name = "SuperSol", Image = "comercio_supersol.svg" });

            veggies.Add(new comerciosView { Name = "Coviran", Image = "comercio_coviran.svg" });

            

            listView.ItemsSource = veggies;

        }

I need to navigate to another contentpage with more data than the included in the ListView, depending on selected item...but i don´t know how to do it...

Could you help me to achieve it?

Thanks in advance.

[Lakshmi Natarajan]

Hi Luis, 

 

Thank you for using Syncfusion products. 

 

We have checked the reported query “Navigate to another page depending on tapped item in SfListView” from our end. We would like to inform you that you can navigate to another page using ItemTapped event. You can get the tapped item information from the ItemTappedEventArgs of the ItemTapped event. Please refer the following code snippets to achieve your requirement, 

 

Code behind: Set BindingContext of the new page as the tapped item. Navigate to the new page using PushAsync method. 

private void _listView_ItemTapped(object sender, Syncfusion.ListView.XForms.ItemTappedEventArgs e) 

{ 

    var newPage = new NewPage(); 

    newPage.BindingContext = e.ItemData as Contacts; 

    Navigation.PushAsync(newPage); 

} 

 

You can also refer to our user guidance document regarding ItemTapped event from the following link, 

UG link: https://help.syncfusion.com/xamarin/listview/working-with-sflistview#tapped-event 

 

Also, we have documented the same requirement and you can refer to them using the following link, 

KB link: https://www.syncfusion.com/kb/7520/how-to-navigate-page-from-viewmodel-using-button-in-listviewitem 

 

Please let us know if you need further assistance. 

 

Regards, 

Lakshmi Natarajan 

[Luis Gomez]

Thanks for the answer...

One more Question...

If i tap on the listview objetc "Mercadona", i have to navigate to a xaml page named mercadona.xaml, 

If i tap on the listview objetc "Lidl", i have to navigate to a xaml page named lidl.xaml

etc...

how can i achieve this with your provided code?

Thanks in advance

[Chandrasekar Sampathkumar]

Hi Luis, 

Thank you for the update. 

We have checked the reported query “Need to navigate to particular xaml page based on tapped item” from our end. We would like to let you know that you can achieve your requirement using Activator.CreateInstance. Please refer the following code snippets for more reference, 

C#: Navigation to the particular page using ListView ItemTapped event 

private void Bindable_ItemTapped(object sender, Syncfusion.ListView.XForms.ItemTappedEventArgs e) 

{ 

    string page = (e.ItemData as comerciosView).Name.ToLower(); 

    string pageStr = "ListViewXamarin." + page+ ", ListViewXamarin"; 

    //"{namespace}.{class name}, {assembly name}" 

    //Example "ListViewXamarin.mercadona, ListViewXamarin" 

    var objType = Type.GetType(pageStr); 

    var newPage = Activator.CreateInstance(objType) as ContentPage; 

    newPage.BindingContext = e.ItemData as Contacts; 

    App.Current.MainPage.Navigation.PushAsync(newPage); 

} 

Please let us know if you need further assistance. 

Regards, 

Chandrasekar Sampathkumar 

[Luis Gomez]

Hi, thanks for your help

I have modified the code provided (modifications in BOLD:

private async void ListView_OnItemTapped(object sender, ItemTappedEventArgs e)

        {

            string page = (e.ItemData as comerciosView).Name.ToLower();

            string pageStr = "listView." + page + ", listView";

            //"{namespace}.{class name}, {assembly name}" 

            //Example "ListViewXamarin.mercadona, ListViewXamarin" 

            var objType = Type.GetType(pageStr);

            var newPage = Activator.CreateInstance(objType) as PopupPage;

            newPage.BindingContext = e.ItemData as Comercios;

            App.Current.MainPage.Navigation.PushAsync(newPage);

        }

...but it throws me an error:

'Value cannot be null. Parameter name: type'

What can i do to avoid this error?

Thnaks in advance

[Chandrasekar Sampathkumar]

Hi Luis, 

Thank you for the update. 

Could you please share the mercadona.xaml and mercadona.xaml.cs which would be helpful for us to check on it and provide you solution at the earliest. Also, please check the assembly name and namespace name by right clicking PCL project and go to properties. 

 

Regards, 

Chandrasekar Sampathkumar 

[Luis Gomez]

Hi, thanks for your answer

I have attached comercios.xaml, comercios.cs, mercadona.xaml and mercadona.cs

My assembly name and namespace are both AppListo

I have used this on my code, but it still throws me the error:

'Value cannot be null. Parameter name: type'

I hope you can help me avoid this error...

Thank you so much

Attachment: Views_e292f8c6.rar

[Chandrasekar Sampathkumar]

Hi Luis, 

Thank you for the update. 

We have checked the provided code snippet. We observed that the namespace for mercadona.xaml file is AppListo.Views since the class name provided in mercadona.xaml is x:Class="AppListo.Views.mercadona". You can achieve your requirement by using AppListo.Views as the namespace for the class. Please refer the following code snippets for more reference, 

C#: Using appropriate namespace 

private void ListView_OnItemTapped(object sender, Syncfusion.ListView.XForms.ItemTappedEventArgs e) 

{ 

    string page = (e.ItemData as comerciosView).Name.ToLower(); 

    string pageStr = "AppListo.Views." + page + ", AppListo"; 

    var objType = Type.GetType(pageStr); 

    var newPage = Activator.CreateInstance(objType) as PopupPage; 

    newPage.BindingContext = e.ItemData as Comercios; 

    Navigation.PushAsync(newPage); 

} 

Please let us know if you need further assistance. 

Regards, 

Chandrasekar Sampathkumar 

[Luis Gomez]

It works!

Thank you so much!

[Chandrasekar Sampathkumar]

Hi Luis, 

Thanks for the update.   

We are glad that the reported issue have been resolved at your end. Please let us know if you need any further update. As always we are happy to help you out. 

Regards, 

Chandrasekar Sampathkumar