Swipegesture only in title in xamarin forms

Question

I need a view where there will be a header and a content. Suppose the app displays fruit names and its details.

Say first view will have header -"strawberry" and in content it will be strawberry's picture and details. I need a swipe action only on the header "Strawberry", so that on swiping it, the next item "Mango" comes in the header with details of Mango below.

So now the header "Mango" must be swipable to both left and right. Swiping right to view the previous fruit Strawberry's details or swiping left to view the next fruit-Orange's details.

If Orange is the last fruit, it should have swipe action in it's header only to view the previous image, as it has nothing to show as next item.

I have all the fruit name and other details in a List. Kindly give me a heads up on how to achieve this

Answer 1

The easiest way to do this is to use a CarouselView for the title.

A simple sample like below:

the page 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>

the page.xaml.cs:

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

the viewmodel:

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" });
    }
     
}

the model：

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

you could change the template and data base on your needs.