Xamarin CarouselView 和 List -> Detail 范例

Question

想在使用 CarouselView 导航范例时如何显示和从 List 视图导航到 Detailview 来开动脑筋。

具体来说，假设您有一个轮播页面，如下所示：

<ContentPage>
    <Grid>
       <CarouselView>
           <CarouselView.ItemsSource>
               <x:Array Type="{x:Type ContentView}">
                  <c:View0 />
                  <c:View1 />
                  <c:View2 />
           </CarouselView.ItemsSource>
       </CarouselView>
   </Grid>
</ContentPage>

还假设 Carousel 中的一个视图（例如 View1）包含从您的数据库中获取的产品列表，例如：

<CollectionView ItemsSource="{Binding listofproducts}" SelectionChanged="OnItemClicked">
     <CollectionView.ItemTemplate>
         <DataTemplate>
             <StackLayout>
                 <Label Text="{Binding productname}"
             </StackLayout>
        </DataTemplate>
     </CollectionView.ItemTemplate>
</CollectionView>

当用户触发 OnItemClicked() 时，您会如何显示产品的详细信息页面？ 如果你打开一个详细视图，那会不会混淆 CarouselView 导航逻辑？ 您将如何进入列表页面？

不知道什么样的方法会在这里工作。 有什么想法/例子吗？

提前致谢！

Answer 1

根据您的需要，我写了一个小例子供您参考。

首先在xaml页面上创建一个CarouselView，在里面添加一个CollectionView并添加一个点击事件。

这是 xaml 代码：

<StackLayout>
    <CarouselView ItemsSource="{Binding Mydates}">
        <CarouselView.ItemTemplate>
            <DataTemplate>
                <StackLayout>
                    <Frame HasShadow="True"
                   BorderColor="DarkGray"
                   CornerRadius="5"
                   Margin="20"
                   HeightRequest="300"
                   HorizontalOptions="Center"
                   VerticalOptions="CenterAndExpand">
                        <CollectionView  ItemsSource="{Binding data2}">
                            <CollectionView.ItemTemplate>
                                <DataTemplate>
                                    <StackLayout>
                                        <StackLayout.GestureRecognizers >
                                            <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>
                                        </StackLayout.GestureRecognizers>
                                        <Label Text="{Binding .}"/>
                                    </StackLayout>
                                </DataTemplate>
                            </CollectionView.ItemTemplate>
                        </CollectionView>
                    </Frame>
                </StackLayout>
            </DataTemplate>
        </CarouselView.ItemTemplate>
    </CarouselView>
</StackLayout>

点击信息可以在后台方法中获取，然后可以进行其他的逻辑判断。

下面是后台代码：

public partial class MainPage : ContentPage
{
     
    public ObservableCollection<Class1> Mydates { get; set; } = new ObservableCollection<Class1>();
    public MainPage()
    {
        InitializeComponent();
        Mydates.Add(new Class1() { data1 = "aaa",data2 = new List<string>() { "aaa","bbb","cccc"} });
        Mydates.Add(new Class1() { data1 = "bbb", data2 = new List<string>() { "ddd", "eeee", "ffffff" } });
        Mydates.Add(new Class1() { data1 = "ccc", data2 = new List<string>() { "ggg", "hhhh", "iii" } });
        BindingContext = this;
    }


    private void TapGestureRecognizer_Tapped(object sender, EventArgs e)
    {
        var sta = sender as StackLayout;
        var mydata = (sta.Children[0] as Label).Text;
    }
}