Xamarin CarouselView 和列表 -> 详细信息范例

Question

想在使用 CarouselView 导航范式时如何显示和从列表视图导航到详细信息视图来开动脑筋。

具体来说，假设您有一个这样的轮播页面：

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

还假设轮播中的一个视图（例如 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;
    }
}