Xamarin ExpandableListView

Question

Xamarin 中是否有类似本机的东西？有父元素列表的东西，当其中一个被点击时，子元素列表会出现在它下面。

例如

Parent
 -Child
 -Child
Parent
Parent

我尝试将 custom:listview 放在 custom:listview 中。计划是更改点击可见性，但我收到以下错误：

System.NotSupportedException：无法从本机句柄 0xbf835bfc (key_handle 0x26566218) 激活 Xamarin.Forms.Platform.Android.ListViewAdapter 类型的实例。

Answer 1

您可以在 Xamarin 表单中使用 ListView 中的分组标头本机执行此操作。首先创建一个Grouping结构：

public class Grouping<TK, T> : ObservableCollection<T>
{
    public TK Key { get; private set; }

    public Grouping(TK key, IEnumerable<T> items)
    {
        Key = key;
        foreach (var item in items)
            Items.Add(item);
    }
}

创建一个 ViewModel 以使用额外的布尔属性包装您的父模型，以表示父模型已被选中/应该显示其子项：

public class SelectParentViewModel
{
    public Parent Parent { get; set; }
    public bool Selected { get; set; }
}

在您页面的 ViewModel 中创建以下属性以绑定到您的 ListView

public ObservableCollection<Grouping<SelectParentViewModel, Child>> Parents { get; set; }

初始化父母以包含每个父母的新分组，并为子元素提供一个新的空列表。

添加一个以Grouping<SelectCategoryViewModel, Item> 为参数的命令。该命令首先翻转 Grouping's Key 的 Selected 属性。然后它检查 Selected 属性的新值：

• 如果为真 -> 填充子元素
• 如果为 false -> 清除子元素

在您的列表视图中

• 将 ItemsSource 属性绑定到 Categories 属性并将 IsGroupingEnabled 设置为“True”
• 将 ListView.GroupHeaderTemplate 设置为 ViewCell 以显示每个 Parent
• 在 ViewCell 的外部视图中添加一个轻击手势识别器，它调用命令来清除或填充父项的子项
• 设置 ListView.ItemTemplate 以显示每个子元素

这篇博文描述了 Listviews 中的分组： http://motzcod.es/post/94643411707/enhancing-xamarinforms-listview-with-grouping

我的 GitHub 上提供了一个演示此功能的示例 Forms 项目 https://github.com/umarmohammed/XFExpandableListView

Answer 2

我遇到了类似的问题，并使用了自定义控件来使其正常工作。

如果您使用 Xaml 创建一个“ExpandableView”内容视图，例如：

<ContentView xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="MyProject.CustomControls.ExpandableView">
    <StackLayout  x:Name="Layout" Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
        <StackLayout x:Name="SummaryRegion">               
        <StackLayout x:Name="DetailsRegion"/>
    </StackLayout>
</ContentView>

然后像这样连接 .cs 类：

   public partial class ExpandableView: ContentView
    {

        private TapGestureRecognizer _tapRecogniser;
        private StackLayout _summary;
        private StackLayout _details;

        public ExpandableView()
        {
            InitializeComponent();
            InitializeGuestureRecognizer();
            SubscribeToGuestureHandler();    
        }

        private void InitializeGuestureRecognizer()
        {
            _tapRecogniser= new TapGestureRecognizer();
            SummaryRegion.GestureRecognizers.Add(_tapRecogniser);
        }

        private void SubscribeToGuestureHandler()
        {
            _tapRecogniser.Tapped += TapRecogniser_Tapped;
        }

        public virtual StackLayout Summary
        {
            get { return _summary; }
            set
            {
                _summary = value;    
                SummaryRegion.Children.Add(_summary);
                OnPropertyChanged();
            }
        }

        public virtual StackLayout Details
        {
           get { return _details; }
           set 
           {
              _details = value;
              DetailsRegion.Children.Add(_details);
              OnPropertyChanged();
           }
       }

       private void TapRecogniser_Tapped(object sender, EventArgs e)
    {
        if (DetailsRegion.IsVisible)
        {
            DetailsRegion.IsVisible = false;
        }
        else
        {
             DetailsRegion.IsVisible = true;
        }
    }

然后在您的页面上将类似这样的内容包装在列表视图中：

<CustomControls:ExpandableView>
   <CustomControls:ExpandableView.Summary>
       <StackLayout>
          YOUR PARENT HERE 
       </StackLayout>
   </CustomControls:ExpandableView.Summary>
   <CustomControls:ExpandableView.Details>
        <StackLayout>
          YOUR CHILD LIST VIEW HERE
        </StackLayout>
    </CustomControls:ExpandableView.Details>
 </CustomControls:ExpandableView>

Answer 3

试试这个 TreeView： https://github.com/MelbourneDeveloper/Adapt.Presentation/tree/master/Adapt.Presentation.Standard/Adapt/Presentation/Controls/TreeView

这很简单。没有自定义渲染。

您可以在此处使用示例克隆 repo： https://github.com/MelbourneDeveloper/Adapt.Presentation.git