CODEWITHSUNDEEP
listviewxamarinxamarin.forms
Pierre Thalamy
Pierre Thalamy

Reputation: 681

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

I want to create an expandable ListView, with a custom ViewCell containing two StackLayouts. 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>

Upvotes: 0

Views: 1602

Answers (1)

kojan abzah
kojan abzah

Reputation: 289

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.

Upvotes: 2

Related Questions