Carousel Page xamarin forms 显示选中项详情

Question

我有这个显示一堆项目的 listView，我的想法是单击一个，导航到轮播页面并在那里显示其详细信息。

问题：轮播页面还必须知道该项目在主列表中的位置，而 OnSlide 必须显示该选定项目中的 next/previous 项目。

已完成：

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

现在的问题甚至是能够填充轮播页面...

已经联系了 Xamarin 团队，他们很乐意帮助我«这里或论坛，因为他们帮不上忙»...（已经尝试过论坛，已经等了将近两个月了:s，工作需要交付）。

Answer 1

在推送 DetailPage 之前设置 CurrentPage。

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

如果以后加载项目，再引入一个属性。

Answer 2

我认为 "easiest" 方法是使用 ListView 和 CarouselPage（或 Xamarin.Forms 版本 2.2+ 中的 CarouselView）共享相同的 ItemsSource 但使用嵌入在 NavigationPage 中的不同 DataTemplate，因此您可以 push/pop 轮播页面 免费 .

在 ListView.ItemSelected 事件中，您可以将 CarouselPage 的 SelectedItem 设置为与 ListView 中选择的项目相同，因为它们是 共享相同的数据源。然后只需将 CarouselPage 推送为当前页面即可完成....;-)

Xamarin.Forms 2.1 使用 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 使用 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
});

结果：

注意：在 Xamarin.Forms 版本 2.2（目前可通过预发布 Nuget 获得）中，我强烈推荐使用 CarouselView，它更快、更简洁、更流畅、更快乐，;-) 只需嵌入它是您喜欢的 Page class.

类型

注意：显示的辣酱数据来自https://www.syntaxismyui.com/xamarin-forms-carouselpage-recipe/，我修改了他的示例使用DataTemplate所以回收和数据绑定是免费的....