仅在 xamarin 形式的标题中滑动手势答案

【问题标题】：Swipegesture only in title in xamarin forms仅在 xamarin 形式的标题中滑动手势
【发布时间】：2021-02-10 04:50:40
【问题描述】：

我需要一个包含标题和内容的视图。假设应用显示水果名称及其详细信息。

假设第一个视图将有标题 -“草莓”，内容将是草莓的图片和详细信息。我只需要在标题“草莓”上进行滑动操作，这样在滑动时，下一个项目“芒果”会出现在标题中，下面是芒果的详细信息。

所以现在标题“Mango”必须可以左右滑动。向右滑动查看上一个水果草莓的详细信息或向左滑动查看下一个水果-橙子的详细信息。

如果橙色是最后一个水果，它应该在其标题中滑动操作以查看上一个图像，因为它没有任何内容可显示为下一个项目。

我有一个列表中的所有水果名称和其他详细信息。请告诉我如何实现这一目标

【问题讨论】：

可以吗？
是的，它有效。谢谢@Leo，您能否编辑它以为 CarouselView 添加 ItemSource={Binding Fruits}？
好的，我会编辑的。

标签： xamarin xamarin.forms swipe

【解决方案1】：

最简单的方法是使用CarouselView 作为标题。

一个简单的例子如下：

页面xaml：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         x:Class="NewForms.CollectionViewPage">
  <ContentPage.Content>
    <StackLayout>
        <CarouselView x:Name="collection" ItemSource={Binding Fruits}   HeightRequest="50" Loop="False">
            <CarouselView.ItemTemplate>
                <DataTemplate>
                    <Label Text="{Binding Name}"></Label>   //this for the header content
                </DataTemplate>
            </CarouselView.ItemTemplate>
        </CarouselView>
        <StackLayout Orientation="Vertical" BindingContext="{Binding Path=CurrentItem,Source={x:Reference collection}}">
            <Label Text="{Binding Details}"></Label>   //binding the details content
                
        </StackLayout>
    </StackLayout>
 </ContentPage.Content>
</ContentPage>

page.xaml.cs：

  public CarouselViewPage()
    {
        InitializeComponent();
        FruitModel fruitModel = new FruitModel();
        BindingContext = fruitModel;
    }

视图模型：

class FruitModel
{
    public ObservableCollection<Fruit> Fruits { get; set; }

    public FruitModel()
    {
        Fruits = new ObservableCollection<Fruit>();
        Fruits.Add(new Fruit() { Name = "Apple", Details = "Thi is an apple" });
        Fruits.Add(new Fruit() { Name = "Pear", Details = "Thi is a Pear" });
        Fruits.Add(new Fruit() { Name = "Banana", Details = "Thi is a Banana" });
        Fruits.Add(new Fruit() { Name = "Strawberry", Details = "Thi is a Strawberry" });
    }
     
}

型号：

class Fruit
 {
    public string Name { get; set; }
    public string Details { get; set; }
 }

您可以根据需要更改模板和数据库。

【讨论】：

【解决方案2】：

Xamarin.Forms 提供滑动手势，您可以将滑动手势应用到标题。

https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/gestures/swipe

【讨论】：

但我只需要在标题中而不是在整个视图中滑动操作:(