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中的分组标头进行本机操作。首先创建一个分组结构：

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

初始化Parents，为每个parents包含一个新的分组，并为Child元素创建一个新的空列表。

添加一个接受Grouping<SelectCategoryViewModel, Item>作为参数的命令。该命令首先翻转分组键的Selected属性。然后检查选定属性的新值：

• If true ->填充子元素
• If false ->清除子元素

在你的ListView中

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

的子项

• 设置ListView.ItemTemplate以显示每个子元素

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

在my GitHub 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

这很简单。无自定义渲染。

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