Carousel Page xamarin forms display selected item details

0
votes

I have this listView which display a bunch of items, and the idea is to click one, navigate to a carousel page and display its details there.

Problem: the carousel page also has to know the position of this item in the main list, and OnSlide must show the next/previous item from this selected one.

Already done:

ListView successfully populated and displaying selectable items.
OnSelectedItem pushAsync navigation to DetailPage and show there its details.

Now the problem has been even being able to populate a carousel page...

Already contacted the Xamarin team and they gladly helped me by sending me «here or to the forums because they couldn't be of any help»... (already tried the forums, been waiting for almost two months now :s, and the work needs to be delivered).

2
listviewxamarinxamarin.formsnavigationcarousel

2 Answers

1
votes

I think the "easiest" way would be to use a ListView and a CarouselPage (or CarouselView in Xamarin.Forms version 2.2+) that are sharing the same ItemsSource but using different DataTemplates that are embedded within a NavigationPage so you can push/pop of the CarouselPage for free.

Within the ListView.ItemSelected event, you can set SelectedItem of the CarouselPage to the be same as the item selected in the ListView since they are sharing the same data source. Then just push the CarouselPage to be the current Page and you are all done.... ;-)

Xamarin.Forms 2.1 using CarouselPage:

var carouselPage = new CarouselPage ();
carouselPage.ItemTemplate = new DataTemplate (() => new SaucePage ());
carouselPage.ItemsSource = sauces;

var listView = new ListView (ListViewCachingStrategy.RecycleElement);
listView.ItemTemplate = new DataTemplate (() => new HotSauceCell ());
listView.ItemsSource = sauces;
listView.ItemSelected += (object sender, SelectedItemChangedEventArgs e) => {
    carouselPage.SelectedItem = e.SelectedItem as Sauce;
    (MainPage as NavigationPage).PushAsync (carouselPage, true);
};
MainPage = new NavigationPage (new ContentPage {
    Content = listView
});

Xamarin.Forms 2.2 Pre-Release using CarouselView:

var carouselView = new CarouselView ();
carouselView.ItemTemplate = new DataTemplate (() => new SauceView ());
carouselView.ItemsSource = sauces;
var carouselDetailPage = new ContentPage {
    Content = carouselView
};
var listView = new ListView (ListViewCachingStrategy.RecycleElement);
listView.ItemTemplate = new DataTemplate (() => new HotSauceCell ());
listView.ItemsSource = sauces;
listView.ItemSelected += (object sender, SelectedItemChangedEventArgs e) => {
    carouselView.Position = sauces.IndexOf (e.SelectedItem as Sauce);
    (MainPage as NavigationPage)?.PushAsync (carouselDetailPage, true);
};
MainPage = new NavigationPage (new ContentPage {
    Content = listView
});

Results in:

enter image description here

enter image description here

Note: In Xamarin.Forms version 2.2 (currently available via pre-release Nuget) I would highly recommend using CarouselView, it is faster, meaner, slicker, happier, ;-) Just embed it your preferred type of Page class.

Note: The hot sauce data shown is from https://www.syntaxismyui.com/xamarin-forms-carouselpage-recipe/, I modified his sample to use DataTemplate so recycling and data binding is had for free....

1
votes

Before you push your DetailPage set CurrentPage.

var detailPage = new CarouselPage();
// ...
detailPage.CurrentPage = index;
Navigation.PushAsync(detailPage);

If you load the items later, just introduce another property.