Hide View cell in ListView

Question

I have a listview grouped, and everytime i touch the group header, all the items in the group hide, but for some reason the cells remain

I have tried to set a binded IsVisible property to all elements in the ViewCell, but still cant make it work

Heres my ListView xaml code:

<ListView x:Name="GroupsList"
                      ItemsSource="{Binding Dishes}"
                      IsGroupingEnabled="True"
                      SeparatorColor="Black"
                      SeparatorVisibility="Default"
                      HasUnevenRows="True"
                      GroupShortNameBinding="{Binding Key}">
                <ListView.GroupHeaderTemplate>
                    <DataTemplate>
                        <ViewCell Height="50">
                            <StackLayout
                                VerticalOptions="FillAndExpand"
                                BackgroundColor="LightSlateGray">
                                <Button BackgroundColor="Transparent"
                                        BorderColor="Transparent"
                                        BorderWidth="0"
                                        Text="{Binding Key}"
                                        TextColor="White"
                                        HorizontalOptions="StartAndExpand"
                                        Command="{Binding BindingContext.SelectGroupHeader, Source={x:Reference DishesPage}}"
                                        CommandParameter="{Binding Key}"
                                        ContentLayout="Right, 300"
                                        ImageSource="next_disclosure"></Button>
                            </StackLayout>
                        </ViewCell>
                </DataTemplate>
                </ListView.GroupHeaderTemplate>
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <ContentView Padding="2, 5, 5, 0"
                                         IsVisible="{Binding IsVisible}">
                                <Frame Padding="2"
                                       HasShadow="False"
                                       BackgroundColor="White">
                                    <StackLayout Orientation="Horizontal">
                                        <Label Margin="10"
                                               Text="{Binding Name}"
                                               TextColor="Black"
                                               FontSize="Medium"
                                               HorizontalOptions="StartAndExpand"></Label>
                                    </StackLayout>
                                </Frame>
                            </ContentView>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>

Here is my ViewModel code:

private async Task SelectedGroupHeader(string item)
        {
            foreach(var group in Dishes)
            {
                if(item == group.Key)
                {
                    foreach(var dish in group)
                    {
                        if (dish.IsVisible)
                        {
                            dish.IsVisible = false;
                        }
                        else
                        {
                            dish.IsVisible = true;
                        }
                    }
                }
            }
        }

before hiding:

after hiding

Answer 1

The problem is that you are setting ContentView.IsVisible to false when you want to hide the items, but when you do that you hide the ContentView and the items remain in the list, so you still see the items, but without a ContentView (blanks)!

One way i found out you can achieve your purpose is to store somewhere the items of the tapped group and clear its content when you tap on it. When you do that the group becomes empty, and thus the items in the ListView are not visible anymore. When you tap again in the group header you add again the items to the group so that the ListView displays again your items.

The code i got working is more or less as follows:

In XAML i only removed the binding to ContentView.IsVisible:

<ListView x:Name="GroupsList"
                  ItemsSource="{Binding Dishes}"
                  IsGroupingEnabled="True"
                  SeparatorColor="Black"
                  SeparatorVisibility="Default"
                  HasUnevenRows="True"
                  GroupShortNameBinding="{Binding Key}">
            <ListView.GroupHeaderTemplate>
                <DataTemplate>
                    <ViewCell Height="50">
                        <StackLayout
                            VerticalOptions="FillAndExpand"
                            BackgroundColor="LightSlateGray">
                            <Button BackgroundColor="Transparent"
                                    BorderColor="Transparent"
                                    BorderWidth="0"
                                    Text="{Binding Key}"
                                    TextColor="White"
                                    HorizontalOptions="StartAndExpand"
                                    Command="{Binding BindingContext.SelectGroupHeader, Source={x:Reference DishesPage}}"
                                    CommandParameter="{Binding Key}"
                                    ContentLayout="Right, 300"
                                    ImageSource="next_disclosure"></Button>
                        </StackLayout>
                    </ViewCell>
            </DataTemplate>
            </ListView.GroupHeaderTemplate>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <ContentView Padding="2, 5, 5, 0">
                            <Frame Padding="2"
                                   HasShadow="False"
                                   BackgroundColor="White">
                                <StackLayout Orientation="Horizontal">
                                    <Label Margin="10"
                                           Text="{Binding Name}"
                                           TextColor="Black"
                                           FontSize="Medium"
                                           HorizontalOptions="StartAndExpand"></Label>
                                </StackLayout>
                            </Frame>
                        </ContentView>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

In your ViewModel you would have to do something like:

private async Task SelectedGroupHeader(string item)
    {
        foreach(var group in Dishes)
        {
            if(item == group.Key)
            {
                if(!group.IsHidden)
                {
                    group.Clear();
                    group.IsHidden = true; // This is simply a flag you can set in your group class to keep track of if the group is collapsed or not
                }
                else
                {
                    AddItemsToGroup(group)// Add this group all the elements that belongs to it.

                    group.IsHidden = false;
                }
            }
        }
    }

I hope this helps!

Note: this only works if your collection of items is an ObservableCollection, so that the ListView gets notified when the collection changes!