Xamarin表单中的可编辑分组ListView [英] Editable Grouped ListView in Xamarin Forms

问题描述

我想以Xamarin形式显示类似嵌套listview的内容. 我的意思是我想将Person列表与他们的订单(订单列表可以为空)一起使用.该列表将允许向特定人员添加订单，移除人员(及其所有订单)以及移除特定订单.

I Would like to display something like nested listview in Xamarin forms. I mean i would like to have list of Person with theirs orders (the list of order could be empty). The List would allow to add order to specific person, remove person (and all of his orders), and remove specific order.

我考虑创建 OrderModel 的ListView，其中 OrderModel 如下:

I Considerd to create ListView of OrderModel where OrderModel would looks like:

public class OrderModel
{
    public string PersonName {get;set;}
    public Order Order {get; set;}
}

但是我不知道这是否是一个好主意，以及如何实现类似的方法.

But I dont know if this is a good idea, and how to implement something like this.

推荐答案

我编写了一个简单的演示来满足您的要求.我使用Grouped ListViews:

I write a simple demo to achieve your requirement. I use the Grouped ListViews:

OrderModel :

public class OrderModel
{

    public string orderName { get; set; }

    public OrderModel()
    {
    }
}

public class GroupedOrderModel : ObservableCollection<OrderModel>
{
    public string personName { get; set; }
}

设置数据源:

public partial class GroupedListXaml : ContentPage
{
    private ObservableCollection<GroupedOrderModel> grouped { get; set; }
    public GroupedListXaml ()
    {
        InitializeComponent ();
        grouped = new ObservableCollection<GroupedOrderModel> ();
        var person1Group = new GroupedOrderModel() { personName = "   john"};
        var person2Group = new GroupedOrderModel() { personName = "   alex"};
        var person3Group = new GroupedOrderModel() { personName = "   jack"};


        person1Group.Add (new OrderModel () { orderName = "   OrderOne"});
        person1Group.Add (new OrderModel() { orderName = "   OrderTwo" });
        person1Group.Add (new OrderModel() { orderName = "   OrderThree"});
        person1Group.Add (new OrderModel() { orderName = "   OrderFour"});

        person2Group.Add (new OrderModel() { orderName = "   OrderOne"});
        person2Group.Add (new OrderModel() { orderName = "   OrderTwo"});
        person2Group.Add (new OrderModel() { orderName = "   OrderThree"});

        grouped.Add (person1Group);
        grouped.Add (person2Group);

        //Person3 without OrderModel
        grouped.Add(person3Group);

        lstView.ItemsSource = grouped;
    }
}

在XAML中，使用ListView.GroupHeaderTemplate自定义组标题:

In XAML, use ListView.GroupHeaderTemplate to customize the group header:

<ContentPage.Content>
    <ListView x:Name ="lstView" IsGroupingEnabled="true" Footer="">

        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <StackLayout Orientation="Horizontal">
                        <Label Text="{Binding orderName}" VerticalOptions="Center"  HorizontalOptions="StartAndExpand"/>
                        <Button Text="remove   " HorizontalOptions="EndAndExpand" VerticalOptions="CenterAndExpand"/>
                    </StackLayout>
                </ViewCell>

            </DataTemplate>
        </ListView.ItemTemplate>


        <ListView.GroupHeaderTemplate>
            <DataTemplate>
                <ViewCell>
                    <StackLayout Orientation="Horizontal">
                        <Label Text="{Binding personName}" VerticalOptions="Center"  HorizontalOptions="StartAndExpand"/>
                        <Button Text="remove all   " TextColor="Red" HorizontalOptions="EndAndExpand" VerticalOptions="CenterAndExpand"/>
                    </StackLayout>
                </ViewCell>
            </DataTemplate>
        </ListView.GroupHeaderTemplate>

    </ListView>
</ContentPage.Content>

让我们看一下结果:

如果person3的项目列表为空，如何显示该人?

how can I display person3 if his items list is empty?

检查dataSource代码，Person3没有orderModel.

Check the dataSource code and Person3 has no orderModel.

这篇关于Xamarin表单中的可编辑分组ListView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！