Collapse all items in Xamarin ListView when a new item is tapped

Question

I have what seems like a relatively simple problem, but I can't figure it out.

I have a Xamarin ListView, which is using an item template for the ViewCells as follows:

<ListView  HasUnevenRows="True"
           ItemsSource="{Binding Devices}" 
           ItemTemplate="{StaticResource DeviceDataTemplateSelector}"
           SelectionMode="None"
           ItemTapped="NewItemTapped"
           />

For now, 'DeviceDataTemplateSelector' always returns the following ViewCell (more ViewCells will be added later).

The ViewCell uses the Expander control from the Xamarin Community Toolkit

<ViewCell xmlns="http://xamarin.com/schemas/2014/forms" 
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
        xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
        xmlns:ViewModel="clr-namespace:App.ViewModels"
        x:Class="App.UI.ViewCellStandardTemplate">

    <ViewCell.View>
        
        <!-- Calls an expander for each ViewCell. -->
        <xct:Expander HorizontalOptions="FillAndExpand"
                        VerticalOptions="FillAndExpand"
                        Margin="{StaticResource UniversalMargin}" 
                        >

            <xct:Expander.Header>
                <Grid HorizontalOptions="FillAndExpand" 
                        VerticalOptions="FillAndExpand"
                        Margin="{StaticResource UniversalMargin}">

                    <Grid.RowDefinitions>
                        <RowDefinition Height = "*" />
                    </Grid.RowDefinitions>

                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width = "*" />
                    </Grid.ColumnDefinitions>

                    <Label Grid.Row="0" Grid.Column="0" Text="Header Text" />

                </Grid>
            </xct:Expander.Header>

            <xct:Expander.Content>
                <Grid HorizontalOptions="FillAndExpand" 
                        VerticalOptions="FillAndExpand"
                        Margin="{StaticResource UniversalMargin}">

                    <Grid.RowDefinitions>
                        <RowDefinition Height = "*" />
                    </Grid.RowDefinitions>
                    
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width = "*" />
                    </Grid.ColumnDefinitions>

                    <Button Grid.Row="0"
                            Grid.Column="0" 
                            Text="Click Me" 
                            Command="{Binding Source={RelativeSource AncestorType={x:Type ViewModel:PageViewModel}, Mode=FindAncestorBindingContext}, Path=ClickCommand}"
                            CommandParameter="{Binding .}"
                            />

                </Grid>
            </xct:Expander.Content>

        </xct:Expander>

    </ViewCell.View>

</ViewCell>

So far all of this works correctly - the issue is that when I tap an item in the ListView, I want any other expanded items to collapse.

In other words, when I tap a ViewCell to expand it, I want all the other ViewCells in the ListView to set their respective Expander control's "IsExpanded" property to false.

I have tried calling the "ItemTapped" event in the ListView and then cycling through the elements in the ListView - I'm not sure if this is the right approach?

What is the best way to access the properties of the Expander control within the ViewCell?

I'm not sure how to go about this - any help would be much appreciated.

Thanks.

Answer 1

Updated

Edited to provide a pure UI solution, inspiration from get cells from ListView (or can try this one highlight the selected item)

Two steps:

1. Define the ViewCell together with ListView in XAML.

<ListView x:Name="MyList" ...>
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <xct:Expander Tapped="Expander_Tapped" ...>

2. Define the method in XAML.cs:

        private void Expander_Tapped(object sender, EventArgs e)
        {
            var expander = sender as Expander;
            var state = expander.IsExpanded;

            var cells = MyList.GetType().GetRuntimeProperties()
                .FirstOrDefault(info => info.Name == "TemplatedItems")?.GetValue(MyList);
            if (cells != null) { 
                foreach (ViewCell cell in cells as ITemplatedItemsList<Cell>)
                {
                    if (cell.BindingContext != null)
                    {
                        var child = cell.View as Expander;
                        child.IsExpanded = false;
                    }
                }
            }

            expander.IsExpanded = state;
        }

---

Previous answer:

Rather than manipulate the view property, I would prefer to do it in the model class.

Three steps here:

1. Add a boolean property in your model class.

 public class YourDeviceModel : INotifyPropertyChanged
    {
        private bool flag;

        public bool Flag
        {
            get => flag;
            set
            {
                flag = value;
                OnPropertyChanged("Flag");
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;

        public void OnPropertyChanged(string name)
        {
            this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
        }
    }

2. Define a TapCommand in your ViewModel when clicking (if using MVVM)

    public ICommand TapCommand => new Command<YourDeviceModel>(OnItemTapped);

    private void OnItemTapped(YourDeviceModel currentSelection)
    {
        //if your Devices is a ObservableCollection, convert it and reset all flags
        Devices.ToList().ForEach(x => x.Flag = false);
        //set the current one to true
        currentSelection.Flag = true;
    }

3. Add property and command bindings in Expander (remove ItemTapped in ListView)

    <xct:Expander
        IsExpanded="{Binding Flag, Mode=TwoWay}"
        Command="{Binding Source={RelativeSource AncestorType={x:Type ViewModel:PageViewModel}, Mode=FindAncestorBindingContext}, Path=TapCommand}"
        CommandParameter="{Binding .}">