I have a listview with a groupheader which displays the group name and items underneath it. Is there anyway On click on the header/Group name I can show or hide the items underneath it?

Question

For example : On click of the "Bear" I can show /hide the items

Answer 1

Hello,

If you want to achieve expandable listview,

Firstly, we need to detect the group header touch event. We can create a custom grouped header in the ListView, then add the TapGestureRecognizer for custom grouped header like following code.

<ListView.GroupHeaderTemplate>
                <DataTemplate>
                    <ViewCell>
                        <Grid>
                            <Label FontAttributes="Bold" FontSize="Small" Text="{Binding Name}" TextColor="Gray" VerticalTextAlignment="Center" />                          
                            <Grid.GestureRecognizers>
                                <TapGestureRecognizer Command="{Binding Source={x:Reference currentPage}, Path=BindingContext.RefreshItemsCommand}" NumberOfTapsRequired="1" CommandParameter="{Binding .}" />
                            </Grid.GestureRecognizers>
                        </Grid>
                    </ViewCell>
                </DataTemplate>
            </ListView.GroupHeaderTemplate>

Second, we need to hide the items of group, we can use ObservableCollection that remove or add data at the runtime and add a property   public bool IsVisible { get; set; } = false; in the Group to detect item appear or disappear.

Here is a similar thread about expandable listview, you can refer to source code.

Best Regards,

Leon Lu

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.