How to toggle visibility of ListView ViewCell attribute on tap in Xamarin.Forms

Question

I want to create an expandable ListView , with a custom ViewCell containing two StackLayout s. The first one would be the header and the second layout would be a children of the first one and show additional details . The idea is that the details layout would be hidden by default, and its visibility would be toggled when its ViewCell container is tapped.

I am not sure how to properly achieve this in the Xamarin.Forms environment, and have not found any truly helpful resource. I can imagine one solution which would involve creating a custom sub-class of ViewCell ; or another in which I would add a visibility attribute to each item of my ListView.itemsSource through a ViewModel.
What is consider best-practise in that case, and how to achieve this in Xamarin.Forms?

---

Below is a XAML outline of what I aim to create:

<ListView HasUnevenRows="True"
        ItemTapped="listView_OnItemTapped"
        x:Name="listView">
<ListView.ItemTemplate>
  <DataTemplate>
    <ViewCell>
      <StackLayout Orientation="Vertical"
                   Padding="10,10,10,10">
        <!-- Header Stuff -->
        <StackLayout Orientation="Vertical"
                     x:Name="_slDetails">
          <!-- Details Stuff -->
        </StackLayout>
      </StackLayout>
    </ViewCell>
  </DataTemplate>
</ListView.ItemTemplate>

Answer 1

What your looking for is GroupHeaderTemplate , for example :

<ListView.GroupHeaderTemplate>
    <DataTemplate>
        <TextCell Text="{Binding Title}"
                  Detail="{Binding ShortName}"
                  TextColor="#f35e20"
                  DetailColor="#503026" />
     </DataTemplate>
 </ListView.GroupHeaderTemplate>

please check the following links

For information on how to use GroupHeaderTemplate : customizing-list-appearance .

Related to the toggled on click part of your question: xamarin-forms-expandable-listview .