点击新项目时折叠 Xamarin ListView 中的所有项目

Question

我有一个看似相对简单的问题，但我想不通。

我有一个 Xamarin ListView，它使用 ViewCells 的项目模板，如下所示：

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

目前，“DeviceDataTemplateSelector”始终返回以下 ViewCell（稍后将添加更多 ViewCell）。

ViewCell 使用 Xamarin 社区工具包中的 Expander 控件

<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>

到目前为止，所有这些都正常工作 - 问题是当我点击 ListView 中的一个项目时，我希望任何其他展开的项目都折叠起来。

换句话说，当我点击一个 ViewCell 来展开它时，我希望 ListView 中的所有其他 ViewCell 将它们各自的 Expander 控件的“IsExpanded”属性设置为 false。

我已尝试在 ListView 中调用“ItemTapped”事件，然后循环浏览 ListView 中的元素 - 我不确定这是否是正确的方法？

在 ViewCell 中访问 Expander 控件属性的最佳方式是什么？

我不知道该怎么做 - 任何帮助将不胜感激。

谢谢。

Answer 1

更新

编辑提供纯UI解决方案，灵感来自get cells from ListView（或者可以试试这个highlight the selected item）

两步：

1. 在 XAML 中定义 ViewCell 和 ListView。

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

1. 在 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;
        }

---

上一个答案：

与其操作视图属性，我更愿意在模型类中进行操作。

这里的三个步骤：

1. 在模型类中添加布尔属性。

 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));
        }
    }

1. 单击时在 ViewModel 中定义 TapCommand（如果使用 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;
    }

1. 在Expander 中添加属性和命令绑定（在ListView 中删除ItemTapped）

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